Lullabot Ideas
We know stuff. We empower you to know stuff too.
Drupal 6: Get your CSS-only theme, right here!
Blog by Jeff EatonOctober 8, 2007 - 8:02am
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!
| Attachment | Size |
|---|---|
| snowcrystals.zip | 52.72 KB |
Comments
How create themes
Hi!!
How i create my own themes in drupal 6.0,should any one suggest me ??
regards & thanks
Manish
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.
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
Could you take on
Could you take on 'Explaining Overriding theme functions to Themers' as your next howto? I've been reading D6 Theme Guide and Converting 5.x themes to 6.x without understanding much of it. An example would help put things in perspective.
So should I wait for D6?
I'm planning on adding Drupal to my site - should I hold out for D6 or get started w the current build? Any recommendations?
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. :)
Wow, wow, wow. Thanks guys -
Wow, wow, wow. Thanks guys - this is a huge step for Drupal for us designer folks.
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.
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. :)
How bout some example
How bout some example code or links to docs to help us along the Drupal 6 theming path?
Converting 5.x themes to 6.x
http://drupal.org/node/132442
Writing .info files for themes (Drupal 6.x)
http://drupal.org/node/137062
Furry creatures
http://images.google.com/images?q=furry+creatures&hl=en&sourceid=mozilla...
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?
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. :-)
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?!
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.
Thanks
I've been following the discussion on your patch issue post with my fingers crossed, now it happened. Thanks a lot!
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