Purpose, Prerequisites & Audience

This tutorial describes the use of CSS (Cascading Style Sheets) in Plone 3.x and is intended for site customizers who are familiar with CSS and have administrative privileges on a Plone site. The approach here is strictly for making through-the-web modifications to stylesheets.

No previous knowledge of Python, Plone or Zope is required and examples will walk those new to Plone through every step required to make CSS modifications to Plone.  If you have set up a Plone site but are otherwise new to Plone, this tutorial is for you.  If you are a web designer who needs to work as part of a Plone team, this tutorial might help clarify how CSS is used in Plone.

Using the Right Tools

By far, the most popular website CSS introspector tool is Mozilla's Firebug tool. No matter the level of your experience, Firebug is the ultimate CSS debugging tool and all themers should use it.

The basic idea is that you can step through the HTML that frames your Plone pages, see the CSS that is applied to the HTML. You can even change the CSS settings on the fly to experiment with the layout of your site. For help on using Firebug, click here.

Introduction

Plone's extensive use of CSS gives customizers a great amount of control over the appearance of a Plone site.  The quickest way to get a sense for this is to look at a Plone site with styles disabled in your browser.  In Firefox you can disable styles with "View > Page Style > No Style".  (Try this now.)  Clearly, CSS is very heavily used which makes for an excellent separation of form and content.

Custom styling of a Plone site can be performed in one of the following ways:

1. modifying 'base_properties' 
2. overriding existing style by adding styling information to ploneCustom.css
3. adding, deleting or reordering stylesheets

This tutorial will describe techniques 1 and 2.

Note that serious customizations of the Plone interface are best done by creating custom products.  These allow you to encapsulate all of your style and template changes in one place, save them and reapply them elsewhere.  The instructions here apply to 'quick and dirty' customizations for an individual site.

Navigating the ZMI

The following folders in the ZMI (Zope Management Interface) allow you control what stylesheets are used and their contents:

ZMI > portal_CSS

Controls the registration and ordering of stylesheets within Plone. 

 ZMI > portal_skins > custom

 Location for locally customized versions of the stylesheets found in ZMI > portal_skins > plone_styles.

ZMI > portal_skins > plone_styles

Location of default base_properties and stylesheets.

Simple Customizations

Enabling development mode

Before beginning any CSS customization you should turn on debug-/development mode.  This will guarantee that caching and compression of CSS is disabled.

Here is how you enable debug-/development mode:

1. log on to your Plone site as the 'admin' user or with your manager account
   
2. add '/manage' to the URL to access the ZMI
3. navigate to ZMI > portal_css
4. click the Debug/development mode checkbox
5. click the "Save" button

When you are finished making your CSS modifications you should disable debug-/development mode as it does impact the performance of your Plone site.

Modifying base_properties

Plone provides a set of base_properties that control some of Plone's color, font, logo and border defaults.  These properties allow you to modify the basic look-and-feel of a site without working directly with Plone's CSS files and provides the simplest way to do basic customization.  Individual property names are reasonably self-explanatory (linkColor, borderStyle, etc.) and accept standard CSS style values.

Here is how you modify the base_properties:

1. enable development mode
2. navigate to ZMI > portal_skins > plone_styles > base_properties
3. click the Customize button
4. modify individual properties using CSS style values
5. click the "Save Changes" button (at the bottom of the page)

Section 3 of this tutorial provides more detailed descriptions of each of the base properties.

Making CSS modifications

The next step beyond base_property modifications is overriding Plone's CSS with custom CSS of your own.  Plone provides the ploneCustom.css stylesheet for site customizations.  The difficult part of this for newcomers to plone is figuring out the CSS selectors that are used within Plone.

For many people, the Firebug or Web Developer Firefox extensions provide the easiest way to inspect the style associated with HTML elements in a web page.  Either of these provides easy access to the CSS selectors and style information needed to create a custom stylesheet.

Note that the .css files in ZMI > portal_skins > plone_styles are actualy dtml templates, meaning that they can utilize base_properties to make global changes via variables.  This means that they may contain references to base_properties alongside standard CSS as in the following example from public.css:

h1, h2 {
    border-bottom: &dtml-borderWidth; &dtml-borderStyle; &dtml-globalBorderColor;;
    font-weight: normal;
}d

Here is how you add CSS customizations to your Plone site:

1. enable development mode
2. navigate to ZMI > portal_skins > plone_styles > ploneCustom.css
   
3. click the Customize button
4. add CSS
   
5. click the "Save Changes" button (at the bottom of the page)
   

Sections 4 and 5 of this tutorial describe Plone's stylesheets and the CSS selectors associated with various elements of the Plone interface.

Restoring default styling

When you first start playing with base_properties and stylesheets you will want the freedom to make lots of changes knowing that you can easily get back to the default settings.  Plone makes this easy by always keeping custom versions of base_properties and stylesheets in a separate folder. When Plone assembles the CSS stylesheets it looks for custom versions first and uses these when found.  If custom versions are not found it uses the default versions.  To restore default settings you only need to delete the custom versions.

Here is how you restore default styling to your Plone site:

1. enable development mode
2. navigate to ZMI > portal_skins > custom
   
3. check base_properties and/or ploneCustom.css (or anything else you've modified)
   
4. click the "Delete" button
   

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. 

Further styling with CSS

TODO

Example 2:  'New York Times' style

Anyone wish to make a contribution here?

The following list of base_properties are used for styling throughout Plone.  They can be edited through the ZMI at

ZMI > portal_skins > plone_styles > base_properties

Plone 3.0.x base_properties

logoName

the file name of the portal logo

fontFamily

the font family used for all text that is not headers

fontBaseSize

the base font size that everything is calculated from

fontColor

the main font color

fontSmallSize

used for various elements like buttons and discreet text

discreetColor

the font color of discreet text

backgroundColor

the background color

linkColor

the color used on normal links

linkActiveColor

color used on active links

linkVisitedColor

color used on visited links

borderWidth

the width of most borders in Plone

borderStyle

the style of the border lines, normally solid

borderStyleAnnotations

style of border lines on comments etc

globalBorderColor

the border color used on the main tabs, the portlets etc

globalBackgroundColor

background color for the selected tabs, portlet headings etc

globalFontColor

the color of the font in the tabs and in portlet headings

headingFontFamily

font family for h1/h2/h3/h4/h5/h6 headlines

contentViewBorderColor

the content view tabs border color

contentViewBackgroundColor

the content view tabs background color

contentViewFontColor

the font color used in the content view tabs

inputFontColor

the font color used for input elements

textTransform

whether to lowercase text in portlets, tabs etc.

evenRowBackgroundColor

the background color of even rows in listings

oddRowBackgroundColor

the background color of even rows in listings

notifyBorderColor

border color of notification elements like the status message, the calendar focus

notifyBackgroundColor

background color of notification elements like the status message, the calendar focus

lpBackgroundColor

background color of information pop-ups (currently not used)

Plone's default stylesheets are described below along with list of the CSS selectors defined in each.  The stylesheets are presented in the same order they are defined in ZMI > portal_css so that style defined in stylesheets lower on the page will override style defined in earlier stylesheets.

member.css

Styles for workflow states of logged in users.

.state-private { ... }
.state-visible { ... }
.state-published { ... }
.state-pending { ... }
.state-expired { ... }
.syndicated { ... }

RTL.css

Right-to-Left styles for Arabic and Hebrew.

base.css

Styles for base elements (HTML tags).

body { ... }
table { ... }
a { ... }
img { ... }
p { ... }
p img { ... }
hr { ... }
h1, h2, h3, h4, h5, h6 { ... }
h1 a{ ... }
h1 { ... }
h2 { ... }
h3 { ... }
h4 { ... }
h5 { ... }
h6 { ... }
ul { ... }
ol { ... }
li { ... }
dt { ... }
dd { ... }
abbr, acronym, .explain { ... }
abbr .explain { ... }
q { ... }
blockquote { ... }
code, tt { ... }
pre { ... }
ins { ... }
del { ... }

public.css

Lots of styles for public-facing elements.

/* Accessibility elements, applied by JS */
body.largeText { ... }
body.smallText { ... }

/* Padding for the columns */
#portal-column-one .visualPadding { ... }
#portal-column-two .visualPadding { ... }

/* Content area */
h1, h2 { ... }
body.kssActive h2.inlineEditable:hover, body.kssActive h1.inlineEditable:hover { ... }
h3, h4, h5, h6 { ... }

.documentFirstHeading { ... }
.documentContent { ... }
.documentContent ul { ... }
.documentContent ol { ... }

/* Links with differently colored link underlines - only for content */
.documentContent p a { ... }
.documentContent p a:visited { ... }
.documentContent p a:active { ... }
#content a:target { ... }
.documentContent li a { ... }
.documentContent li a:visited { ... }
.documentContent li a:active { ... }
.documentContent dd a { ... }
.documentContent dd a:visited { ... }
.documentContent dd a:active { ... }
/* End links */

#visual-portal-wrapper { ... }

/* Logo properties */
#portal-logo img { ... }

/* The skin switcher at the top, only shows up if you have multiple skins available */
#portal-skinswitcher { ... }
#portal-skinswitcher a { ... }
#portal-top { ... }

/* Site-wide action menu - font size, contact, index, sitemap etc */
#portal-siteactions { ... }
#portal-siteactions li { ... }
#portal-siteactions li a { ... }
#portal-siteactions li.selected a { ... }
#portal-siteactions li a:hover { ... }

/* Searchbox style and positioning */
#portal-searchbox { ... }
#portal-advanced-search { ... }
#portal-advanced-search a { ... }

/* Search results elements */
dl.searchResults dt { ... }
form.searchPage { ... }
input.searchPage { ... }
form.searchPage input.searchButton { ... }

/* LiveSearch styles */
.LSRes { ... }
#LSHighlight, .LSHighlight { ... }
.LSRow { ... }
.LSRow a { ... }
.LSDescr { ... }
.LSResult { ... }
.LSShadow { ... }
.livesearchContainer { ... }
* html .livesearchContainer { ... }
#livesearchLegend { ... }
* html #livesearchLegend { ... }

/* Workaround for Internet Explorer's broken z-index implementation */
.LSIEFix { ... }
.LSBox { ... }
#LSNothingFound { ... }
.LSBox label { ... }

/* The global section tabs. */
#portal-globalnav { ... }
#portal-globalnav li { ... }
#portal-globalnav li a { ... }
#portal-globalnav li.selected a { ... }
#portal-globalnav li a:hover { ... }
/* Bar with personalized menu (user preferences, favorites etc) */
#portal-personaltools { ... }
#portal-personaltools .portalUser { ... }
/* Used on all descriptions relevant to those not logged in */
#portal-personaltools .portalNotLoggedIn { ... }
#portal-personaltools li { ... }
#portal-personaltools li a { ... }
#portal-personaltools .visualIconPadding { ... }
.visualCaseSensitive { ... }
#portal-languageselector { ... }
#portal-languageselector li { ... }
/* The path bar, including breadcrumbs and add to favorites */
#portal-breadcrumbs { ... }
#portal-breadcrumbs a { ... }
.breadcrumbSeparator { ... }
.addFavorite { ... }
.documentEditable { ... }
#content-news h1 { ... }

/* Only h5/h6 headlines in the content area should have the discreet color */
#content h5, #content h6 { ... }
.newsItem { ... }
.newsImage { ... }
.newsImageContainer { ... }
.newsContent { ... }
.newsContent ul, .newsContent li { ... }
.newsAbout { ... }
.newsAbout li { ... }
.newsFooter { ... }
.newsFooter li { ... }
.documentActions { ... }
.documentActions ul { ... }
.documentActions li { ... }
.documentActions a { ... }

/* Status messages */
dl.portalMessage { ... }
dl.portalMessage a { ... }
dl.portalMessage dt { ... }
dl.portalMessage dd { ... }
dl.warning dt { ... }
dl.error dt { ... }
dl.warning dd { ... }
dl.error dd { ... }

/* The summary text describing the document */
.documentDescription { ... }
.documentByLine { ... }
dl.searchResults span.documentByLine { ... }
#category ul { ... }
#category ul li { ... }
.discussion { ... }
.even { ... }
.odd { ... }
.visualHighlight { ... }
.discreet { ... }
.pullquote { ... }
.callout { ... }
.notify, .documentEditable * .notify { ... }
.card { ... }
.card a { ... }
.portrait { ... }
.portraitPhoto { ... }

/* The table used for listings - horizontal and vertical variants */
table.listing, .stx table { ... }
table.listing th, .stx table th { ... }
table.listing .top { ... }
table.listing .listingCheckbox { ... }
table.listing td, .stx table td { ... }
table.listing a { ... }
table.listing a:hover { ... }
table.listing img { ... }
table.listing td a label, .stx table td a label { ... }

/* Vertical addition class */
table.vertical { ... }
table.vertical th { ... }
table.vertical td { ... }

/* grid addition class */
table.grid td { ... }

/* plain table class with light gray borders */
table.plain, table.plain td, table.plain th { ... }

/* Batch selector */
.listingBar { ... }
.listingBar span.previous, .listingPrevious { ... }
.listingBar span.next, .listingNext { ... }
.listingBar img { ... }
.listingBar a { ... }
.tileItem { ... }
.tileHeadline { ... }
.tileHeadline a { ... }
.tileBody { ... }
.tileImage { ... }
.eventDetails { ... }

/* Useful deviations from regular style on elements */

/* List classes without markers */
ul.visualNoMarker, ol.visualNoMarker { ... }
ul.discreet { ... }
textarea.proportional { ... }
.productCredits { ... }
#portal-footer { ... }
#portal-footer p { ... }
#portal-footer a { ... }
#portal-footer a:visited { ... }
#portal-footer a:hover { ... }
#portal-colophon { ... }
#portal-colophon ul { ... }
#portal-colophon ul li { ... }
#portal-colophon ul li a { ... }

.feedButton { ... }
.poweredBy { ... }

/* Sitemap styles */
#portal-sitemap { ... }
#portal-sitemap a { ... }
#portal-sitemap a:hover { ... }
#portal-sitemap .navTreeLevel1 { ... }
#portal-sitemap .navTreeLevel2 { ... }

/* Album view classes */
.photoAlbumEntry { ... }
.photoAlbumEntry img { ... }
.photoAlbumEntryWrapper { ... }
.photoAlbumEntry a { ... }
.photoAlbumFolder { ... }
.photoAlbumEntryTitle { ... }

/* Link types */
a.link-parent { ... }
#content .link-category { ... }
#content .link-user { ... }
#content .link-comment { ... }
#content .link-anchor { ... }
#content .link-presentation { ... }
#content .link-wiki-add { ... }

/* Handling external/internal links, we first set the icon on all links, then
remove it from the ones that are local - for both http and https */
#content a[href ^="http:"], #content a.link-external { ... }
#content a[href ^="https:"], #content a.link-https { ... }
#content a[href ^="&dtml-portal_url;"] { ... }

/* Protocol-specific links */
#content a[href ^="mailto:"], #content a.link-mailto { ... }
#content a[href ^="news:"], #content a.link-news { ... }
#content a[href ^="ftp:"], #content a.link-ftp { ... }
#content a[href ^="irc:"], #content a.link-irc { ... }
#content a[href ^="callto:"], #content a.link-callto { ... }
#content a[href ^="webcal:"], #content a.link-webcal { ... }
#content a[href ^="feed:"], #content a.link-feed { ... }

#content .link-plain { ... }

/* For ghosted elements */
.visualGhosted { ... }

/* Fullscreen */
body.fullscreen #portal-logo, body.fullscreen #portal-siteactions { ... }
body.fullscreen #portal-globalnav { ... }
body.fullscreen #portal-searchbox { ... }

/* Kupu image alignment classes */
.image-left { ... }
.image-inline { ... }
.image-right { ... }
dd.image-caption { ... }
dl.captioned { ... }

/* Dashboard */
#dashboard-info-message { ... }
#dashboard { ... }
#dashboard-portlets1,
#dashboard-portlets2,
#dashboard-portlets3 { ... }
#dashboard-portlets4 { ... }
#dashboard-portlets1 a,
#dashboard-portlets2 a,
#dashboard-portlets3 a,
#dashboard-portlets4 a { ... }
#dashboard-portlets1 dl.portlet,
#dashboard-portlets2 dl.portlet,
#dashboard-portlets3 dl.portlet,
#dashboard-portlets4 dl.portlet { ... }
div.managedPortlet.portlet { ... }
#dashboard select { ... }
.portletAssignments { ... }
#dashboard-portlets1 div.managedPortlet a,
#dashboard-portlets2 div.managedPortlet a,
#dashboard-portlets3 div.managedPortlet a,
#dashboard-portlets4 div.managedPortlet a { ... }
#dashboard-portlets1 div.managedPortlet span a,
#dashboard-portlets2 div.managedPortlet span a,
#dashboard-portlets3 div.managedPortlet span a,
#dashboard-portlets4 div.managedPortlet span a{ ... }
#dashboard-actions { ... }
#dashboard-actions ul { ... }
#dashboard-actions ul li { ... }
#dashboard-actions ul li.portalUser { ... }

/* manage portlets */
.section div { ... }

columns.css

Styles for table-based columns also known as "left slot", "right slot", etc.

#portal-columns { ... }
#portal-column-one { ... }
#portal-column-content { ... }
#portal-column-two { ... }
body.fullscreen #portal-column-one, body.fullscreen #portal-column-two { ... }
body.fullscreen #portal-column-content { ... }

authoring.css

Styles associated with authoring elements visible to content providers.

/* Editable border */
.contentViews { ... }
.contentViews li { ... }
.contentViews li a { ... }
.contentViews .selected a { ... }
.contentViews li a:hover { ... }
.configlet .contentViews { ... }

/* begin ECMAScript Content Action Menus */
.contentActions { ... }
.contentActions ul, .contentActions li { ... }
.contentActions li { ... }
.contentActions a { ... }
.contentActions span.subMenuTitle { ... }
.contentActions a span.subMenuTitle { ... }
.actionMenu { ... }
.actionMenu .actionMenuHeader { ... }
.actionMenu.activated .actionMenuHeader { ... }
.actionMenu .actionMenuHeader a { ... }
.arrowDownAlternative { ... }
.actionMenu .actionMenuContent { ... }
.actionMenu.activated .actionMenuContent { ... }
.actionMenu.activated .actionMenuContent { ... }
.actionMenu.deactivated .actionMenuContent { ... }
.actionMenu .actionMenuContent ul { ... }
.actionMenu .actionMenuContent li { ... }
.actionMenu .actionMenuContent li a { ... }
.actionMenu .actionMenuContent .selected { ... }
.actionMenu .actionMenuContent li a:hover { ... }
.actionMenu .actionMenuContent .actionSeparator a { ... }
#templateMenu li a { ... }
/* end ECMAScript Content Action Menus */

ul.configlets { ... }
ul.configlets li { ... }
ul.configlets li a { ... }
ul.configlets li a:visited { ... }
ul.configlets li a:active { ... }
ul.configlets li label { ... }
ul.configletDetails { ... }
ul.configletDetails li { ... }
ul.configletDetails li a { ... }
ul.configletDetails li label { ... }

/* Additional STX workaround classes */
.stx table p { ... }
.stx table { ... }
.stx table td { ... }

.reviewHistory { ... }
.comment { ... }
.comment h1, .comment h2, .comment h3, .comment h4, .comment h5, .comment h6 { ... }
.comment h3 a { ... }
.commentBody { ... }
.spacer { ... }

/* Collapsible elements */
dl.collapsible { ... }
dl.collapsible dt.collapsibleHeader { ... }
dl.collapsible dd.collapsibleContent { ... }

/* for IE the following isn't needed, that's why the css2 selector is used */
dl.collapsible dd.collapsibleContent > dl { ... }
dl.expandedInlineCollapsible dt.collapsibleHeader, dl.expandedBlockCollapsible dt.collapsibleHeader { ... }
dl.collapsedBlockCollapsible { ... }
dl.collapsedBlockCollapsible dt.collapsibleHeader { ... }
dl.collapsedInlineCollapsible dd.collapsibleContent, dl.collapsedBlockCollapsible dd.collapsibleContent { ... }
dl.collapsedInlineCollapsible { ... }
dl.collapsedInlineCollapsible dt.collapsibleHeader { ... }

.configlet .documentEditable { ... }
.documentEditable .documentContent { ... }
.label { ... }
.optionsToggle { ... }

#portal-column-content fieldset > * input:focus, #portal-column-content fieldset > * textarea:focus { ... }

.highlightedSearchTerm { ... }
dl.searchResults .highlightedSearchTerm { ... }
.noInheritedRoles { ... }
.currentItem { ... }
tr.dragging td { ... }
.draggingHook { ... }
.notDraggable { ... }

.managePortletsLink { ... }
ul.formTabs { ... }
li.formTab { ... }
li.formTab a { ... }
li.formTab a { ... }
li.firstFormTab a { ... }
li.lastFormTab a { ... }
li.formTab a.selected { ... }
li.formTab a:hover { ... }
li.formTab a.notify { ... }
li.formTab a.required span { ... }
li.formTab a.notify:hover { ... }
.formPanel { ... }
.formPanel.hidden { ... }
div.formControls input.hidden { ... }

portlets.css

Styles associated with components of individual portlets.

/* Main portlet elements */
.portlet { ... }
.portlet a { ... }
.portlet a.tile { ... }

.portletItem a:visited, .portletFooter a:visited { ... }
.portletHeader { ... }
.portletHeader a { ... }
.portletItem { ... }
.portletItem ol { ... }
.portletItemDetails { ... }
.portletFooter { ... }

/* Elements that enable layout with rounded corners */
.portletTopLeft { ... }
.portletTopRight { ... }
.portletBottomLeft { ... }
.portletBottomRight { ... }

/* Calendar elements - used in the calendar rendering */
.dayPopup { ... }
.date { ... }
.portletCalendar { ... }
.portletCalendar dt { ... }
.portletCalendar dd { ... }
.portletCalendar a { ... }
.portletCalendar a:hover { ... }
.ploneCalendar { ... }
.ploneCalendar td { ... }
.ploneCalendar .weekdays th { ... }
.ploneCalendar .event { ... }
.ploneCalendar .todayevent { ... }
.ploneCalendar .todaynoevent { ... }

.managePortletsLink { ... }
div.portlets-manager div.section { ... }
div.managedPortlet { ... }
.managedPortlet .portletHeader { ... }
.managedPortlet a { ... }
.managedPortletActions { ... }
.managedPortletActions a { ... }
.managedPortletActions a.up,
.managedPortletActions a.down { ... }
.managedPortletActions a.delete { ... }

/* Table of Contents styling - essentially a portlet with smaller fonts and aligned right + limited in width */
.toc { ... }

controlpanel.css

Styles associated with the Plone control panel.

.inlineDisplay { ... }

table.controlpanel-listing { ... }
table.controlpanel-listing td, table.controlpanel-listing th { ... }
table.controlpanel-listing dl { ... }
table.controlpanel-listing dd { ... }
table.controlpanel-listing dl dt a .trigger{ ... }
table .controlpanel-listing td { ... }
table.controlpanel-listing td.checker{ ... }
table.controlpanel-listing th.smallcolumn { ... }

.chooser-right { ... }

.rule-element { ... }
.rule-element dl { ... }
.rule-element dl dd { ... }
.rule-updown, .rule-operations { ... }

print.css

Print styles for CSS2-capable browsers.  Much of this stylesheet has to do with hiding components that an inappropriate for printed documents.

deprecated.css

Styles for deprecated elements that will disappear from plone in a future release.

navtree.css

Styles associated with the navigation tree.

.portletNavigationTree { ... }
.navTree { ... }
.navTree li { ... }
.navTreeItem { ... }
.navTreeItem a, dd.portletItem .navTreeItem a { ... }
.navTreeItem a:hover, dd.portletItem .navTreeItem a:hover { ... }
.navTreeCurrentItem { ... }
li.navTreeCurrentItem { ... }
li.navTreeCurrentItem a, li.navTreeCurrentItem a:hover { ... }

.navTreeLevel0 { ... }
.navTreeLevel1 { ... }
.navTreeLevel2 { ... }
.navTreeLevel3 { ... }
.navTreeLevel4 { ... }
.navTreeLevel5 { ... }

invisibles.css

Styles for invisible and accessibility elements.

/* List classes without markers */
ul.visualNoMarker, ol.visualNoMarker { ... }
.visualOverflow { ... }
.visualOverflow pre, .visualOverflow table, .visualOverflow img { ... }

/* Accessibility and visual enhancement elements */
.hiddenStructure { ... }
.contentViews .hiddenStructure, .contentActions .hiddenStructure { ... }
.hiddenLabel { ... }

/* Helper element to work with CSS floats */
.visualClear { ... }

/* Hiding helper elements for old browsers */
.netscape4 { ... }

forms.css

Styles associated with forms.

textarea { ... }
input { ... }

input[type=checkbox] { ... }

#searchGadget { ... }

button { ... }
select { ... }
form { ... }
fieldset { ... }
legend { ... }
label { ... }
optgroup { ... }
option { ... }
optgroup > option { ... }

dl.enableFormTabbing dd { ... }

#login-form { ... }
#login-form .field { ... }
#login-form input { ... }
#login-form input.context { ... }

#forgotten-password { ... }

.standalone, .documentEditable * .standalone { ... }
.context, .formControls .actionButtons .button, .documentEditable * .context { ... }
.destructive, .documentEditable * .destructive { ... }
input.searchButton { ... }
.searchSection { ... }
.searchSection label:hover { ... }

/* The edit form elements */
.field { ... }
.field .field { ... }
.fieldRequired { ... }
.fieldUploadFile { ... }
.fieldTextFormat { ... }
.formHelp { ... }
.formHelp:hover { ... }
div.error { ... }
.error .fieldRequired { ... }

/* Styles to make the editing widgets look more like their view counterparts */
#archetypes-fieldname-title input, input#form\.title { ... }
#archetypes-fieldname-description textarea, textarea#form\.description { ... }
input.inputLabelActive { ... }

textarea#form\.description { ... }

tr.selected { ... }

.kupu-save-message { ... }

ploneKss.css

Not accessible from ZMI > portal_skins > plone_styles.

ploneCustom.css

This is where your locally modified styles should go.  By default, no styles are defined in this stylesheet.

kupustyles.css

Not accessible from ZMI > portal_skins > plone_styles.

kupuplone.css

Not accessible from ZMI > portal_skins > plone_styles.

kupudrawerstyles.css

Not accessible from ZMI > portal_skins > plone_styles.