by Jeff Eaton on October 8, 2007 // Short URL

Drupal 6: Get your CSS-only theme, right here!

A little over a week ago, I wrote about fixing Drupal's core CSS rules for menu and list handling. For designers, overriding the appearance of Drupal's normal navigation menus has always been frustrating -- the default CSS rules had a high level of specificity, so overriding was difficult. And removing the CSS file itself required writing PHP code, copying and pasting large chunks of CSS that were still needed, and so on.

I'm here today to tell you some good news -- those problems are now fixed, and the work of creating a 'pure CSS' theme in Drupal 6 is now much, much easier. A theme's .info file can now specify replacements for entire core CSS files (eliminating entire sets of CSS rules without manually overriding each one) and the menu-related rules have been split into their own file for easy overriding. Combined with the other themeing improvements in Drupal 6, making themes with nothing but CSS files and a folder full of images is now pretty straightforward!

As an experiment, I hopped over to a free CSS template archive and grabbed one of their designs: Snowcrystals, a simple but representative layout that uses positioning rules and images to provide a clean bloggy layout. Lo and behold, it works, with no PHP or template overrides. It's not finished at all -- I haven't put any work into the CSS rules for the comment pages, tables, or anything beyond basic front page and node formatting. But as a proof-of-concept, it's very, very encouraging.

Designers? We're listening!

Comments

HornCologne

Well thank God!

Praise be to all code-ninjas who are making this possible ... my prayers have been answered ... [etc., etc. ... rants for a while to self "How long have I been telling them?" ... Casts guilty glance at PHP textbook on desk ...] ... but since I've never found anything that the developers call 'simple' to actually be simple, straightforward or to not, in fact, need some code ... I'll believe it when I have themed it!

Cheers guys,

HC

Reply

Paco

Thanks

I've been following the discussion on your patch issue post with my fingers crossed, now it happened. Thanks a lot!

Reply

elv

Admin CSS

I still have to investigate if I can enable only minimum default styling, just for the admin screens and forms, without interfering with my custom theme's styles.

Reply

elv

Add-ons

I guess we could have a few good flexible "base" themes, so we could build upon them. "Skins" for Drupal.
Zen "skins" anyone?
Or a possible way to use my experimental Blueprint theme?

Reply

eaton

One of the changes...

One of th changes in Drupal 6, though, is that core comes with complete 'fallback' HTML to render the site in the absence of any theme-specific templates. That's one of the changes that makes "pure CSS" themes possible.

Obviously, creating additional domain-focused base themes, with XHTML for different needs, would make things even more flexible. But making pure CSS skins is possible using nothing but core in D6. :-)

Reply

Anonymous

Do you mean that D6 can be

Do you mean that D6 can be themeless? Is it actually possible to select NONE in the theme page?!

Reply

jGirlyGirl

Thank you so much!

I really appreciate all the work you guys did to make this happen. This is going to be great for the community as a whole. :)

Reply

themegarden.org

That could be a great

That could be a great improvement because even less experienced web designers will have opportunity to design (! just visual design !) new Drupal Themes.

Reply

dvessel

Thanks again Eaton for

Thanks again Eaton for bringing that issue back to life. There were other issues to override module styles but it went nowhere.

It's definitely a different mindset when your not dealing with template files or any php code. I'm going to have to force myself to do more pure css themes as I find that it brings out different side of me. :)

Reply

Jeff F CO.

Page Structure

How do you change the layout/structure of the page? "what you see on the screen"

What files in Drupal are used to create the layout of theme? Sorry just a little confused
thanks for your time

Jeff

Reply

Anonymous

I downloaded this theme and

I downloaded this theme and have 1 question in mind. I see only 3 main files in this theme. snowcrystals.info, style.css and system-menus.css. There is no block.tpl.php, box.tpl.php, comment.tpl.php, node.tpl.php and page.tpl.php.

My question is at which page or which line of code is defining the div class on the style.css For example, the #main-squeeze class... It appears on the drupal page (with firebug on) But I couldn't see where is the div being defined with the main-squeeze class.

Reply

Manish Nagar

How create themes

Hi!!
How i create my own themes in drupal 6.0,should any one suggest me ??
regards & thanks
Manish

Reply