Specialized fonts beyond the typical “Arial, Geneva, Helvetica” can be embeded to your site by uploading Web Open Font Format file for the needed font in your site. Aesthetics is often very important for any website you design. If it isn't pleasing to the eyes, it will directly affect traffic. Fonts are a very important in aesthetics and readability. If you are not sure of how to add web fonts to your site then read on.
In a drupal website, it is easy to add the font styles provided by drupal itself. If the user wants to add a font which is not present in the drupal site by default, the process given below can be followed. Read on to know more.
@font-face allows designers to specifically embed certain fonts in to their stylesheets. Now a days many sites are providing webfonts. For eg: Fontsquirrel, Webfonts etc. They are providing us with the css too, but it is not correct. This article explain about what they are doing wrong and how to fix this issue.
Many a times, IE7 stands out from the group of modern web-browsers owing to its notorious incompatibility with many a standard HTML/CSS/JS. In this article, we are seeing the following case of incompatibility: CSS border for Select (Drop down) element does not work.
Many a times, IE7 stands out from the group of modern web-browsers owing to its notorious incompatibility with many a standard HTML/CSS/JS. In this article, we are seeing the following case of incompatibility: In IE7, the CSS 'border-collapse' does not override cell spacing related tags.
Many Drupal users have wished to know how to use customized fonts in Drupal themes. If you are facing the same question when creating or modifying or editing a Drupal theme and want to know how to use customized fonts in a Drupal theme then continue reading.
Firefox seems to add an extra top-padding for all the anchor tags inside li elements. If you are facing the same issue in your website and want to know how to remove the extra top padding for anchor tags inside a li element in Firefox then read on to know the solution.
Almost all the browsers have different settings for base margins and padding. It is always important to set margin and padding for the body and html tags while styling web-pages. Otherwise it might result in some inconsistencies while displaying the pages across various browsers.
Normally while using Flag module, the flag name is displayed as a link. If you want to change this behaviour and replace the link with a button, you can do this easily by using CSS. You need not alter any forms for this. For this you may add the below code to your CSS.
Implementing multiple color mode switching is so simple! In HTML we can easily add the switching color style sheets as alternative style sheets.
But when it comes to Drupal there is a slight change. Here is how we can implement multiple color switches in Drupal theme. We normally include style sheets in .info file and we cannot specify 'alternative stylesheets' just like in HTML. So here we need a module called Drupal 'Styleswitcher'. By enabling this Drupal module you will get the option 'styleswitcher' to add alternative style sheets.
For more details just follow these steps.
The trick explained briefly
Developers often overlook CSS as something very simple and not requiring a lot of thought. This leads to poorly thought out CSS rules, CSS abuse, inefficient CSS and ultimately bad rendering performance and slow page load times. Here is a simple tip to improve CSS performance and page load times - avoid descendant selectors.
Cross browser compatibility is one of the most important concerns of an HTML/CSS developer. Here’s how you can easily add shadow effect to your div blocks with cross-browser compatible CSS. Simply add the below code to the div to which the effect is to be added. You can change the size, strength and direction of the shadow in all browsers, except for IE, in which you can change only the strength and direction of the shadow.
We were trying to create a new theme for our Drupal site and we came across an issue. How to create div "left" to be the same height as div "right" which can be smaller or bigger?
Is it possible to have the "left" div height adjusts automatically according to the "right" div height?
Here is what saved us:
It is required of every Drupal developer to keep ahead of common browser compatibility issues. IE is probably the most notorious browser in any drupal developer’s dictionary.
For any site - be it Drupal or non-Drupal, this is most probably due to simple mistakes made while entering attributes. Let us see one very common case where a simple mistake can cause glaring issues:
We usually see the css given something like this. We do not see any glaring issue in the class defined below.
If we are using a custom font on our webpage and if that particular font is not installed on a user’s computer, then there is a good chance that our website would become unreadable. One of the best solutions to overcome this scenario would be to embed the said font file into the CSS in the webpage source. Checkout the most simple method of embedding fonts within a CSS.
What is CSS? This is a common question asked by most web users hoping to understand how websites are created when they encounter the three letters on the web? Almost everyone is familiar with Html as it is a simple markup language but CSS seems to be an enigma. Since most of our work in developing web apps based on Drupal revolves around CSS, we have decided to share our knowledge with you.
While designing fixed width layouts it is advantageous to use percentage based width for inner containers in the layout to make it easy for easy scaling up of the layout for other widths. When doing so you should be very careful about setting the actual percentage values. The percentage based width should result in a whole integer as the width. If not, you will end up with fractions as widths of containers leaving the rounding off to the browsers.