Send to Friend

There was a problem loading this item

From	To
Email: * First Name: Last Name: Send a copy to myself	Email: * First Name: Last Name:

Drupal Tips from Advantage Labs

Message Text:

Theming Made Easy with PrimerCSS

Here's a quick tip to make Theming your Drupal website a little easier.

The Problem

For me, theming is a dance between my text editor, FireFox views of my Drupal website, and Firebug. How many times have you looked in Firebug to find and modify an element's CSS properties, just to realized that there is no CSS declaration for the element in question? IF this happens to you all the time, you are in exactly the right place!

The Solution

PrimerCSS.com is yet another one-function-wonder websites, but that function addresses exactly what we are talking about here. The process is easy, and repeatable.

The marketing model for the site is a little suspect. At this point in time, the site is free. The site also lacks any ads or external links. AND there is no registration process, and no data collection.

Are they really doing this for the love?

How to Nuts and Bolts

The concept here is that PrimerCSS will analyze your page, and provide you with a listing of ALL the possible CSS tags for your page. PrimerCSS creates a complete list of these empty CSS tags.

So, get yourself into theming mode.

Load up FireFox and view the page of your Drupal website that needs some theming help
View the Page Source (Ctrl+U), and copy the full text contents of your page to your clipboard
Open another FireFox tab or window and go to http://PrimerCSS.com/
Paste the contents of the clipboard into the text area at PrimerCSS, and Prime it!

PrimerCSS will chug your page content in a long list of empty CSS tags! By pasting these into your CSS file, you will have instances of all your CSS tags.

Click the Copy It! button to paste it to your clipboard
Open your CSS files for editing.
Paste the long list of CSS tags into the bottom of your CSS file, and save the file
Now refresh your page, and voila, no more empty CSS element tags!

Neat and Repeat

So far so good, but there is a little catch. We only created empty CSS Tags for the single page. Of course when we are theming our site we will need to tweak the CSS on many pages and views of the site.

The answer it to repeat! Get the page source of the next page, and do it again.

That's it

It's a simple process, but it has become part of my hardcore-code-mode. Give it a try and let me know what you think!

~Wilbur
http://willince.com

Average:

Your rating: None Average: 4.8 (6 votes)