Free CSS Themes and other CSS help - check them out!

CM1
1

Many have asked where you can get some free CSS help, either to steal in bits, or use as a sort of library of options. Here are some totally FREE themes you can download and then just do minor tweaks to use them with CM1.

http://www.oswd.org/
http://www.freecsstemplates.org/

And more listed here:
http://www.visual-blast.com/css/web_site_css_layouts_templates/

Here’s a great tutorial and refernce site on CSS
http://www.w3schools.com/css/

And for you advanced folks, here’s a very good table of some of the more complex matching options out there for CSS rules:
http://www.w3.org/TR/CSS2/selector.html#pattern-matching

2

What would those minor tweaks be to make them usable in CM1?

3

The tweaks depend on the theme, but mostly it’s just checking and changing some of the CSS selectors. Some things to check

  1. Class names - use the Region properties dialog in Layout mode to set the right class names on regions.
  2. Regions vs. Widgets “empty content styling” - generally speaking, in a cms you want the style applied to the Region, not to the Widget (sometimes you want it to be a combination of the Region + Widget together) because the widget or widget content is not always going to be there if the user decides to leave it blank or move it. For example, in a sample theme, a CSS style like a background effect may be applied to a UL or LI or P, but in a CMS like CM1, the UL and LI or P will be entered by the user as they type into the Rich Text Widget. If the user wants to see the right background BEFORE they start typing, or if the area is blank, it’s better if the style is applied to the Region DIV (usually by class name). Basically, you’re enabling the style when the “content is empty.”
  3. Overflow - this is the opposite of “empty” in that the Widget allows the user to type any amount of text, or add rich media, etc. In most sample themes you get online, this condition is not taken care of. In a CM1 theme, you’ll want to add “overflow:hidden” to many or most of the Region styles (usually again, by class name on a region). That way, if a user types too much text, it will just be clipped off and the rest of the design will still hold together.

The other tweaks tend to be specific to functions, like an auto image list widget getting turned into a jQuuery panel slider.

4
5