For a Drupal Designer, when using the Drupal CMS to design websites, it is sometimes easy to fall into the mindset of looking for a module to do everything for you. After all, Drupal and other content management systems including Wordpress and Joomla are built upon an extensible framework that allows you to add functionality using modules (for Drupal), plugins (for Wordpress) or extensions (for Joomla). Many of these modules add programming functionality, but there are others that provide theming solutions, adding to the design and layout of your website. However, you can create advanced website designs using the existing Cascading Style Sheets ("CSS") launguage, and avoid the bloat and resource drain that too many modules can have on your server. Once you become accustomed to a handful of CSS properties, you'll find that making changes to your Drupal website will become easier.
You can use CSS2 alongside CSS3 for advanced functionality as long as you choose the CSS3 properties that are compatible across most browsers. Although most web designers are concerned that they produce valid HTML, using a mix of CSS2 and CSS3 will not validate within W3C's "CSS Validator" tool, but valid HTML will pass of course. This is not to say that there is anything wrong with mixing the two, its just that the validation tool can only validate one or the other CSS document type. We feel that as long as the HTML is valid, the extra benefit of adding some CSS3 Properties into a CSS2 Style-sheet is worth it.
Your Drupal theme comes with a CSS Style-sheet called
"style.css", and it is here that you can amend the settings for your theme and alter the properties, layout, background images, and colours etc. It is advisable sometimes to add additional style-sheets to your theme in order to keep things manageable.
You can do this by amending the
"theme.info" file that you'll find under your themes directory. So, for example if we download the Marinelli theme for Drupal7, you'll find a
"marinelli.info" text file in the folder. There is section in this file that looks like this:
stylesheets[all] = css/common.css stylesheets[all] = css/links.css stylesheets[all] = css/typography.css stylesheets[all] = css/forms.css stylesheets[all] = css/drupal.css ....
Lets say that you want to add a new style-sheet called
"mystyles.css". You enter the following line into the
"marinelli.info" file as follows:
stylesheets[all] = css/mystyles.css .... stylesheets[all] = css/common.css stylesheets[all] = css/links.css stylesheets[all] = css/typography.css stylesheets[all] = css/forms.css stylesheets[all] = css/drupal.css ....
Then simply add your new style-sheet to the
"/themes/marinilli/css" folder. Simply upload the files to your server, clear out the cache, if any, and your new CSS style-sheet will take effect.
Once you become familiar with adding some CSS coding, you can begin to add new styles to your theme. If you are using template files such as
"page-front.tpl.php", which is a template used to override the front page, you can begin to add CSS ID and Class selectors to the HTML attributes you'll find there, such as
<div>, <span>, <p>, <ul> etc..
Certain modules come with the functionality to insert a CSS Class into the piece of content to which that module relates. For example, the Views Module includes such an option. This can be seen here:
Other modules such as Panels include the ability to add CSS classes too, as seen here;
With Panels you can choose to add an ID or a class, thereby increasing granularity of control over your CSS styles.
If you are not using PHP template files such as the one mentioned above, there are a lot of modules that work with CSS in order to help you hook into the HTML attributes of your theme. Modules such as CSS and Unset CSS are worth trying out. and there are quite a few other CSS modules available to download from Drupal.org.
Once you have settled on your preferred way to hook into or bypass the core CSS style-sheets that come with Drupal, you'll see the wide range of styling and layout options that CSS affords the designer. Alongside overriding already existing CSS, creating you own style-sheets for particular customised content can be a great way to keep everything compartmentalised so that it may easily be removed later, should you want to. This will help you to avoid having to pick through existing style-sheets using something like Firebug in order to undo the changes that you made.
Getting to grips with CSS in Drupal gives you a great deal more control over your website than you would otherwise have.
If you are thinking about using CSS3 properties, our Blog article on using Internet Explorer compatible CSS3 in Drupal Design provides a review and explanation of CSS3PIE, a third party solution to the issue of IE incompatibility.
Feel free to post your question, feedback and comments below