CSSimple is a theme for the drupal content management system. It offers a pure-CSS layout system, and includes over 20 sub-themes. There are two versions of CSSimple, the old drupal 4.6.x version (slightly broken) and the drupal 4.7.x version.
CSSimple has these features:
- Uses pure CSS for page layout
- Dynamically detects from the presence of "blocks" on the left and/or right how many columns are required, and automatically switches the layout to handle either two-column or three-columns
- Uses separate CSS files for layout and theming
- Incorporates 22 separate themes (most of which are cribbed from a collection of Wordpress themes)
- Ensures that the main body content appears first in the page, before the "block" content. This will help the search engines to understand the page topic
- Allows Wordpress themes to be easily ported, by using class= and id= tags that are mostly compatible with Wordpress themes.
Installation is simple. Just download the archive attached to this page and unpack it in the
themes
of your drupal installation. The various themes will automatically show up in the <i>administer</i>/<i>themes</i> menu, and you can enable them as you wish.
I wish to give thanks to the following resources which helped me build these themes.
The template:css template gallery has pointers to many working example CSS layouts, including the 3-column liquid-center layout I cribbed.
[amazon-item:0957921888|The CSS Anthology] contains much useful and practical information on using CSS. Of most importance for this are the two-column layouts I cribbed.
The WordPress CSS Style Competition caused dozens of nice wordpress stylesheets to be written, 19 of which I cribbed for this collection.
All the above resources were published without license, and I also offer this collection without license as well. Enjoy.
Some notes on converting Wordpress themes
In case you didn't notice above, the CSSimple theme makes it easy to port Wordpress themes to Drupal. This is done by using code= and id= attributes similar to the ones Wordpress uses. Unfortunately we can't make it exact, so the wordpress themes need a little bit of modification.
The use of '#menu': In wordpress the '#menu' refers to what Drupal calls "blocks". The menu is structred as nested ul elements, without any id or class markings so they are styled by referring to the ul and li elements themselves. Most of this is useless to Drupal, and further other parts of Drupal might use '#menu' for a different purpose. It's best to comment all this out.
In some cases you want to copy the styling of the elements that lead menu sections. In Drupal I believe this is most analagous to the block title. What you do is copy the body of the '#menu ul li' styling into a new style for '.block-title'.
Some of the '#menu' declaration should be copied to '#content-left' and '#content-right'. This is especially true for wordpress themes where the menu has a different background color than other areas.
In some cases '#menu' declares a border-right or border-left (depending on which side the menu is located). One should create individual '#content-left' and '#content-right' entries, specifying border-right or border-left appropriately so that the border appears between the blocks and the main content.
In some cases the menu has special mouseover effects for the links. This is declared in the '#menu ul ul li a' and '#menu ul ul li a:hover' entries. One should make copies of both as follows:
.block-content a,
.block-content a:link,
.block-content a:visited,
.navlinks a,
.navlinks a:link,
.navlinks a:visited,
.meta a,
.meta a:link,
.meta a:visited,
.submitted a,
.submitted a:link,
.submitted a:visited {
... body of #menu ul ul li a
}
.block-content a:hover,
.navlinks a:hover,
.meta a:hover,
.submitted a:hover {
... body of #menu ul ul li a:hover
}
Calendar styling: Wordpress uses '#wp-calendar' while Drupal uses '#calendar', plus all the details are different. I've found that for most themes we don't need to specify any styling for the calendar, instead all the defaults work fine. Just comment out the '#wp-calendar' sections. In a few cases you'll have to copy some definitions from the '#wp-calendar' into equivalent '#calendar' stylings.
Fixed styling and sizes for H2 and H3 elements: Wordpress uses bare unadorned H2 and H3 elements for certain elements of their display. For example a bare unadorned H2 is used for the blog titles. It's beyond me how they expect to style the H2 for blog titles differently from H2's the user inserts themselves. Anyway, the H2 and H3 declarations should be commented out, and in CSSimple the class for page titles is either title or storytitle. Most of the H2 styling should be copied to storytitle.
Screwy headers: Often the theme will give margins and sizes to the '#header' styling that are completely outrageous. I've been commenting out size and margins in these cases.
Fixed layout: The typical wordpress layout is two columns. Further the layout is made by specifying positioning for at least '#content'. With CSSimple the layout is handled by the CSS layout and there's a separation between layout and styling. The policy is that layout is controlled by the CSS code in page.tpl.php, while the styling is left to the individual style.css files in the individual themes.
Most layout and positioning declarations should be commented out of the ported wordpress theme.
Problematic themes
Not all the themes have ported perfectly. In this section I'll discuss what's up with some of them.
Splat:
- The compose tips page has most of its area as blue. This is because '#content' is declared to have a blue background, and in most cases that becomes a thin border within which is a white background on which the content is placed. But the way the compose tips page is set up doesn't trigger this white background. There's a similar problem with the Contact Us, Recent posts, and News aggregator pages, and no doubt several others.
- In mouseovers on collapsable section headers, the text disappears. The mouseover probably changes the text color to the background color? Unfortunately there isn't styling available to change this behavior.
- Header layout is a little strange, but that's because someone dripped some paint on the screen and I'm just moving the text out of the way. Soon as someone cleans up the screen I'll move the text back.