1.Issue 2007.02/5
 1.1.Styling own Themes
 1.2.How to create an own theme
 1.3.Playing with styles
   The body
   Some front layers
   Varying font styles
   Paddings and Margins
   Varying font colors
   Borders
   Something else
  1.3.1.Conclusion

Some front layers

There are some CSS boxes feeling very well to be present in foreground layers of the page. You should know about CSS boxes they most overlay or hide like in layers (in total a rather complex chapter). Such boxes are used in pWS with ids called #container, #header, #top-menu and similar. The id values let assume a bit for what they are intented.

Now I alter the ids #container and #header (both line 8), and the classes .box (line 87) and .box-title (line 93):

 #container, #header {
    background-color: #ADB583;
    color : black;
 }

becomes

 #container, #header {
    background-color: #446;
    color : #eee;
 }

... but ...

these are the same assignments as body. We can remove the assignments with the same result, because the id containers inherit from body if not present. (To be a bit carfully, I often alter only the class names or container ids with such as NOP - like no operation). Example:

#containerNOP, #headerNOP {
    background-color: #ADB583;
    color : black;
}

The result is (before)

and after

Doing the same with the box and box-title classes, because my intention was to colorize most unique:

 .boxNOP {
    background-color : #ebedd1;
    color : black;
 }

 .box-titleNOP {
    background-color : #DEE2BD;
    color : black;
 }

The result now is:

Do not let confuse yourself with the borders we will handle later. At the moment you see one interesting effect: The body (foreground) color comes in action (remember, the light gray). One thing disturbes now: The header of the page we assumed to have just changed (#header). Probably, there is one piece more present. It is the #top-menu container, to find in line 123. The next change runs in danger to become boring:

 #top-menuNOP {
    background-color : #DEE2BD;
    color : black;
 }

results in:

Of course, you are free to set any desired colors instead of NOPing out something; here, I only want to show the results of changes. Now, I am unhappy with the form fields very above. Form fields are such as input and textarea html tags. In default.css, we find the references at line 101:

 input, textarea {
    color: #000;
    background: #ADB583;
    border: #000 solid 1px;
 }

 input:focus, textarea:focus {
    background-color : #EDEFDB;
    color : black;
 }

 input[type="submit"] {
    color: #000;
    background: #ADB583;
    border: 1px #000 outset;
    cursor : default;
    cursor : pointer;
 }

Because forms and form fields should not be equalized with any adjacent content, now I do not NOP out, but setting colors, and, because the borders are referenced also at that place, it is worth to change also, like:

 input, textarea {
    color: #000;
    background: #ccc;
    border: #000 inset 1px;
 }

 input:focus, textarea:focus {
    background-color : #eee;
    color : black;
 }

 input[type="submit"] {
    color: #000;
    background: #aaa;
    border: 1px #000 outset;
    cursor : pointer;
 }

Input and textarea backgounds are in some gray. The submit buttom becomes a bit darker gray. When the input or textarea field receives the focus, that field background becomes lighter. I also changed the border from solid to inset. Result:

Just one piece is really ugly: The dc4db title color. But that is a fault by myself done in the early life of pws 1.x. In the layout page header, I hard coded a text color style (I assumed, one day that becomes a repellent by example for never doing that again). Now corrected by removing that color style and the body forground color appears:

In a next step, the font styles are worth to vary.