How to do Basic Styling with CSS and Drupal – Final Post

In regards to CSS and Drupal from a high level perspective, this is the last post. Any other CSS stuff will involve specific Drupal parts like Superfish Menus, Views, Panels, etc. But here is what I have and what I do to make CSS changes in Drupal.

What I have:

1. Hosted Drupal site from Blackmesh Hosting, the BEST hosting in the known universe
2. File System access to the server via SSH with the proper permissions
3. Firefox browser with FIREBUG
4. Aptana Studio 3 Code Editor
5. Lots of CSS Reference Books

I have a Sandbox environment but I don’t have to use it for CSS because of the MIRACLE of Firebug. I also normally use Chrome but the Firebug version for Chrome doesn’t do it for me.

How I test/make CSS changes:

1. Browse to the site with Firefox
2. Right click on the page and choose “Inspect Element with Firebug”
3. Click on the second icon in the top left corner of Firebug. Looks like a rectangle. This tool will allow you to track down a specific element on your page. Click an element.
4. The element’s HTML will be highlighted below. Its CSS will be on the right.
5. You can use your mouse to enter a CSS element and change it.
6. ***Use the arrow keys to move values up and down. This is a powerful tip. You can use the arrow keys to scroll through available CSS options even when none are listed explicitly. Just play with it and get used to it. These changes are dynamic and are totally isolated to your browser if your setup is like mine***
7. When you have a change in place that you like, track down the CSS file using the right hand pane of Firebug. If you hover your mouse, you will see the path to the file. The CSS line number will also be listed.
8. ****DO NOT HACK THE “CORE” THEME CSS FILES**** Make sure to subtheme what you are changing. ****ALWAYS**** Don’t put yourself in a position to have to skip an upgrade from Drupal.org because you changed a file within the theme and not the subtheme. Or worse, lose your cool changes because the upgrade replaced the CSS file. Make a subtheme. Look up how to do it. It isn’t hard. But make sure to do it.
9. Now that you know what CSS file you need to work with, use your SSH file browser to fine the correct file. Double click it in the right hand side of SSH. If confiured properly, Aptana will open along with the file. You can make your changes, save them and SSH will sense that the file has been changed and ask you if you want to overwrite it. Click Yes
10. Open a different browser and check out the change. Use Chrome, Safari, FF, IE and a mobile device to make sure the change looks good on all platforms.

That’s it! You are now a Drupal CSS wiz!