1.Issue 2007.02/5
The articles in this issue are directed to experienced users, designers, administrators and module developers of phpWebSite and are less suitable for beginners.
1.1.Styling own Themes
pWS 1.x has a different behaviour in styling own themes than pWS 0.10.x and is much more flexible then ever. To create an own theme, a good knowledge of CSS is required. First, let only quick explain some essentials about CSS.
Some CSS basics
CSS uses named classes that are collections of styling properties stored most in an own file (or some own files). Important files used with pWS 1.x are default.css, basic.css and position.css all to find in the theme directory (Themes have names equal to the subdirectories in the sites theme directory).
CSS class names are referenced in several html tags generated by pWS together with the content. The basic generation process in pWS is template driven, so each designer may influence the CSS class usage and other styling options.
Although each CSS class may cover every aspect of styling content, it is a smart idea to separate CSS class usage by some artifical groupings. pWS is doing this and that is the reason why some CSS files occur.
CSS also often refers to containers. A container may be a html tag, may also be an id of a html tag (regard, each html tag may have an unique id assigned), but may be something like a property of a html tag, too.
To declare a CSS class, the class name is coded with a leading dot and the reference of a CSS class with a html tag uses the class name (without a coded dot). Example:
.bgcolor1 { background-color:white; color:black; }
<div class="bgcolor1">Any great nonsens</div>
If the html content uses ids, and pWS is doing that heavy, the ids may also referenced in the CSS file. Example:
#header { background-color:#ddd; color:#333; }
<div id="header">Titles sometimes are read first</div>
Everybody using CSS knows the dynamic/cascading intermix of classes, ids and much more possible to declare.
Grouping CSS usage
One possible grouping of CSS styles for example are background and foreground colors. Another one may be borders and paddings of CSS boxes, and a third, for example, could be fonts and font properties. Such similar grouping is used by pWS by using not only one central CSS file.
eZine