| In this section, you'll learn more about the items found in the plone.css style sheet file, and how and where to add your own styles. The Plone style sheets use the items found in the base_properties file as a sort of shorthand, which is why modifying properties is often much simpler than editing the default style sheet. For example, a style sheet might define several classes, all of which build on a base font size. Instead of repeating the value of the base font size throughout the style sheet and then having to modify every entry in the style sheet in which this item occurs, a property is referenced: fontBaseSize . One change to fontBaseSize in the properties files will cause the change to cascade through every variation of its usage in the style sheet, resulting in less work for you and confidence that each entry will be modified appropriately. Quick Style Sheet Primer Style sheets are used to separate the design elements of a site from the underlying code of a site. Using a style sheet greatly reduces the number of files you need to edit if you decide that you really don't like the base font of your site. That's just an example because a style sheet includes many more design elements than just the name of the font in use: Colors, text weight and decoration, and padding are among the attributes used in style sheets. In HTML, you have tags pairs such as <P></P> to surround a paragraph, <H1></H1> to surround a level 1 heading, and so forth. Without a style sheet, your web browser renders the content surrounded by these tag pairs in some default font and size. Web designers want a bit more control than that and use style sheets to tell web browsers the specific way in which they want some text to be displayed. The P element, used for the <P></P> tag pair, could be defined in a style sheet as regular-weight, 10-point, sans-serif font. Or, it could be defined for whatever reason as bold, 12-point Wingdings. Regardless, any content within the <P></P> tag pair in that website would be displayed the same way. The structure of a style-sheet entry follows this pattern:
selector.class {property: value}
The selector is the name of the element you want to define. For example, if you want to define the <P> tag, then your selector would be P . The selector is optional; you can leave it blank to define a class that can be used with any HTML element. The selector can be used in these possible ways within a style sheet: -
P { property: value} can be used to define the content within the <P></P> tag pair. -
P.someclass { property: value} can be used to define the content within the <P></P> tag pair when the attribute class="someclass" is used in the tag, as in <P class="someclass"></P> . -
.someclass { property: value} is used to define the someclass class, which can be used within any tag pair, such as <P class="someclass"></P> , <H1 class=someclass></H1> , and so forth. The property and portions of the definition depend on the tag being used and what is valid per the HTML specification you are using (see http://www.w3.org/MarkUp/ for information on the various HTML specifications). The following are some examples of properties and values for various tags: -
To ensure that the background color of your site is white, you would use this:
body {color: white}
or
body {color: #FFFFFF}
-
If you want all of your paragraph containers to be Arial, 10 point, normal weight, you would use this:
P {font-family: Arial; color: black; font-size: 10pt}
In many style sheets, including the ones used in Plone, you will see property/value pairs on individual lines, but still within the curly braces:
P { font-family: Arial; color: black; font-size: 10pt }
This display makes your style sheets more readable, which is useful when you're searching through a long file for one particular element. This section has provided the briefest of introductions to the structure of style sheets, but if you would like to know more, visit http://www.w3c.org/Style/CSS/ for learn more about the standards to use. Structure of the Plone Style Sheet The Plone style sheet is a very readable document, and its creators have provided numerous comments within it to help you understand the elements being defined. As an element is defined, it might include one or more of the properties from the base_properties file. You will find these properties referenced like this:
&dtml-propertyname;
So, if the element being defined references the fontBaseSize property, it would look like this:
&dtml-fontBaseSize;
Here's an example:
body { font: &dtml-fontBaseSize; <dtml-var fontFamily>; background-color: &dtml-backgroundColor;; color: &dtml-fontColor;; margin: 0; padding: 0; }
Note The use of the double semicolons in lines such as background-color: &dtml-backgroundColor;; is not accidental. The first semicolon terminates the reference: &dtml-backgroundColor; The second semicolor terminates the style sheet directive itself.
In this example, the body element references four distinct properties from the base_properties file: fontBaseSize , fontFamily , backgroundColor , and fontColor . Tip If you wanted to use the fancyFontColor property used as an example in the previous section, you could add it here, replacing this line: color: &dtml-fontColor;; with this: color: &dtml- fancyFontColor;; This is simply an example; I don't advocate pink body text throughout an entire website.
The body element described earlier is the first stylistic element you encounter in the Plone style sheet, and it is preceded with the comment the basic elements . The "basic elements" consist of just that: specific definitions of core HTML elements such as P, H1 through H6, UL, OL and LI, and so forth. In addition, form elements are defined; you will find specific definitions for text fields, text areas, drop-down menus , and other form- related elements. After the basic elements have been defined, comments are used to introduce additional definitions:
/* searchbox style and positioning */
This comment precedes the definition of the search box, which is found in the top right of the default Plone template:
#portal-searchbox { position: absolute; top: 45px; right: 1.5em; background-color: transparent; margin: 0; padding: 0; text-align: right; text-transform: &dtml-textTransform;; width: 50%; white-space: nowrap; z-index: 2; }
As you can see, the style sheet is used to precisely place this item within the template; the position: absolute and top: 45px attributes tell the browser to render the search box exactly 45 pixels below the top of the viewable area of the browser window. The plone.css style sheet continues for many pages ”it's a 30K file. Virtually all aspects of design are included in the plone.css style sheet; this allows for a highly accessible and usable underlying structure, customizable without touching any of the actual page templates that drive Plone. You'll learn more about the page templates themselves in Chapter 7, "Advanced Content-Related Techniques." In the next section, you'll see how to bring together properties and styles into your own custom skin. | 