HTML and CSS techniques and tools

For all the effort you put into building your site, the most important thing to your users is how your site looks. Managing the inconsistencies in your theme for each browser, for each module, and for user selectable themes can be very challenging.

First you should familiarize yourself with basic Cascading Style Sheets (CSS) concepts. Review CSS Discuss or HTML dog for CSS resources. A good overview of the power of CSS can be seen at the CSS Zen Garden.

Validate! Always. Validate XHTML 1.0 Strict.

Browsers interpret CSS differently and this is what causes inconsistencies in page display across browsers. Validation of your markup is essential in having a page display in standards conforming browsers and allows others to help you. Only after you have validated your XHTML and CSS code, and ensured it looks good in standards-compliant browsers, should you begin adding fixes for non-compliant browsers. Too often one hears designers complain, "Butbutbut, if I make my code validate, then it looks more awful than it before I validated it. I don’t want to start all over again." What that means is the good-looking layout was due to a bug! Debugging on top of bugs only leads to more problems down the road.

And really, a validating, clean layout will work 90% of the time. It will have easy fixes 9% of the time and will require hard measures only 1% of the time. Really!

Please ensure that you've validated both the CSS and HTML for your website using W3C tools. It would be great to review your theme with both the WAVE and FAE accessibility evaluators too. For some other good validation tools, look here.

Your page should not look the same everywhere

Another very important thing to consider is where your pages will be displayed. My mobile phone is not able to show your fancy 6 column fixed width javascript-based layout. And it should not be able to. Safari and Konqueror decided to not allow certain styles in forms, for security and desktop consistency reasons. Large screens will resize your font and that might break your fixed width layout. People using older screens will have larger font sizes set. People with bad internet connections often disable images. Or even CSS.

So keep in mind that your style is nothing more than an advice for browsers to display it in certain ways. It is by no means a law.

Tools for managing inconsistencies in your theme

1. We recommend you start with a standards-compliant browser for your themes such as Firefox. Firefox allows you to highlight portions of your web page and right click view selected source to understand what your themes CSS classes are. Understanding how CSS classes for your theme are applied to the underlying xHTML is the key to understanding your theme.
2. Use standard CSS naming conventions. We recommend adopting these naming conventions for your CSS classes.
3. Select a valid DOCTYPE type for your theme and include a DocType Declaration (DTD).
4. To help in analyzing your HTML and CSS we recommend you install the Firebug plugin for Firefox. It is an invaluable tool that allows you to look at your css and html and change it in real time to evaluate the effects of your changes. Another very useful Firefox plugin is the Web Developer toolbar. This has tons of handy utilities.
5. Before you start modifying your CSS to fix your bugs it is important to ensure you are styling valid HTML or xHTML. There is a web validator built into the Firefox Web Developer toolbar. Opera has built in validation, just press Ctrl+Alt+V.
6. A more advanced tool for analyzing and detecting errors in HTML pages is the Watchfire WebXACT tool.
7. If you find a problem with invalid xHTML in a module, file an issue with the module and include screenshots that show the effects of the issue in your theme.
8. To see how your site will look to search engines you can use Lynx viewer.
9. The Firefox Total Validator add-on provides validation and screen shots showing how your page looks in various browsers (including Lynx). Total Validator validates your HTML against the schema for HTML and highlights some errors the other validators miss.
10. Positioning problems in your site with Internet Explorer can be resolved using these references: Position Is Everything Internet Explorer Primer.
11. A library of examples of xHTML and CSS problems can be found at Quirks mode.

Cross browser compatibility (FireFox, Internet Explorer, Opera, Safari)

There are a number of tools available to help look at your theme in multiple browsers.

1. Browser Shots is a free service, but it can take a while to get your screenshots.
2. BrowserCam is paid service with a 24 hour trial.
3. Total Validator is a free Firefox add on that validates and returns a screen shot of how your page looks in other browsers. There is a limit of about 20 screen shots per day.

On Windows you can use Internet Explorer and download Firefox, Opera and Safari. On Linux you can use Konqueror, a KHTML-based browser (which Safari also uses on MacOS), Opera, and Firefox; Internet Explorer can be run under Wine. On Mac OSX you can use Safari and download Firefox and Opera.

Color and graphic issues

1. If you are selecting colors for your color palette, you can use Color schemes.
2. If your theme is causing "favicon not found" errors in your logs you can create a favicon with these two tools favicon from pics and favicon generator.
3. To check for how color blindness affects users of your site see Vischeck.
4. Always optimize your images, so that they load faster on your pages, by using a service such as Yahoo! Smush It or Google Page Speed, or programs such as ImageOptim, PNGOUT, OptiPNG, or Pngcrush.

Selecting a base theme

If you are looking for a theme to start with, then Zen or Foundation are good base themes. There is also BlueMarine, but it uses tables for layout, which is not a W3C recommendation.

Selecting a menu style

Suckerfish is a reliable flexible drop down, drop out, style menu system. Drupal uses jQuery. Superfish is Suckerfish implemented in jQuery. Pixture Reloaded is based on Zen + Superfish menus and a good starting point for Suckerfish style menus.

Module specific CSS

Some Drupal modules come with a default CSS file. You should use a tool like the Firefox Web developer's toolbar to see if a module's CSS is styling your elements and causing problems. When you install a new module you can also look in the module's folder to see if it is including a CSS file.

Debugging problems in your theme

If you are having trouble getting your theme to look right, then start with a simple base theme or select a theme that is known to work and as close to your end goal as possible. Learning the CSS classes in your theme is critical to understanding where your CSS changes will be applied. Try to find other themers by talking in IRC, providing documentation, and tutorials of what you have done. Make your existing theme available so that others can review and provide feedback. Make friends with PHP programmers who can help you understand what the underlying PHP theme template engine is doing. Consider an exchange of skills to get support.

This page was initially written by Kieran Lal, and Trae McCombs from CivicSpace Labs with Theodore Serbinski. If you would like to contribute or help make Drupal theming easier join the themes mailing list, or contact Kieran.