CSS Customization Examples

by Anne Bowtell last modified Feb 04, 2009 03:06 AM
Contributors: Yuri Carrer
Examples of Plone 3.0.x customization through base_properties and CSS.

The following examples are provided to get you started making style changes to your site.  They are not intended to be complete examples.  In each case we will take an existing website to use as our target and make change that imitate the target style.  Finishing up the styling is left as an exercise for the student.

Example 1:  'Austin Neon' style

One of the easiest ways to see what the base_properties control is to create a 'dark' style for your site.  As an example of where this style is appropriate we will use Austin Neon as our target site.  As always, the Firebug extension for Firefox is invaluable for inspecting the style in our target site.  If you haven't already, please install and familiarize yourself with Firebug before attempting to discover how the target site is styled.

Initial base_properties settings

The first step will be to modify our Plone site's base_properties as outlined in section 1.  The following screenshot shows base_properties that come close to mimicing the colors that are found in our target site.  Go ahead and make these changes to your base_properties now. 

neon_base_properties

Further styling with CSS

TODO

Example 2:  'New York Times' style

Anyone wish to make a contribution here?