A Guide to Drupal eCommerce and Site Development

Let’s say you’ve located a theme you like, it has pretty much all the physical features you want, but the colors, font and layout are not exactly what you want. There are different options for realizing the changes you want, and if you have not read the previous article where I describe those options, I suggest you read the section discussing your options, and then returning to this article.

The semi-standard for themes supporting local changes is to provide a file inside its theme directory named “local.css”. Often a theme’s Drupal.org page will state that the theme supports local changes. However, I’ve found that even in such a situation, the “local.css” file might be commented out and you need to remove the comment specification to realize any changes in your “local.css”.

1. Download your desired theme and uncompress the files;
2. Identify a file with the same name as your theme, that ends with a “.info” extension;
3. Open the file up with a text editor;
4. Look for a line similar to this:

stylesheets[all][] = local.css

The key to look for is the filename “local.css” at the end of a line beginning with “stylesheets”. Also, this line may begin with a semicolon “;” character.

If you do not see any lines defining a style sheet named “local.css”, then your theme probably does not support local changes – you need to create a sub-theme to safely realize making changes to your web site’s presentation. I say “probably” because supporting local changes is up to the theme developer, and they could be using some other filename. To be sure a theme does not support local changes, you should examine any “read me” or other files in the theme that end with a “.txt” extension.

If you see a line defining a style sheet named “local.css”, check for that line to begin with a semicolon character. If your line defining this style sheet begins with a semicolon, that style sheet definition is commented out. Simply delete the semicolon character and save your “.info” file. That’s it; that is all that is necessary. You can now put overriding CSS inside the “local.css” file.

Keep in mind that changes to your “.info” file as well as changes to your “local.css” file can be cached both by your web browser and by Drupal. Anytime you make changes to the “.info” file, visit the admin/settings/performance page, scroll down to the bottom and click the “Clear cached data” button:

The Clear cache button at the bottom of admin/settings/performance

Now, I hate to admit this fact, but I am unsure exactly when Drupal caches a CSS file. If you read everything on the admin/settings/performance page, it appears that you can turn off caching. But I’ve seen cases where parts of the site were still being cached even with caching turned off! If you make changes to your “local.css” file and you have caching turned off, but you are not seeing the effect of your changes when you reload the page, revisit the admin/settings/performance page and hit that cache-clearing button.

If you are still not seeing the effect of your changes, try clearing your browser’s cache. Do this only as a last resort, because any sites you are logged into through your browser will have their session IDs cleared, and you’ll need to re-login.

Okay, now that you’re all set to make changes, how to know what changes to make? That information is given in my tutorial covering how to locate where and make changes to your Drupal Theme. That's it for this tutorial. If you have any questions or suggestions for how I can improve these instructions, please write a comment. All constructive suggestions will be followed to the best of my ability.