1.Issue 2006.12/4
 1.1.Styling and Themes
 1.2.pWS 0.x.x theme styling
 1.3.pWS 1.x.x theme styling
 1.4.theme.ini
 1.5.Design examination
   Snapshot of a site
   A webpage template
   CSS references
    default.css
    style.css
    basic.css
    positioning.css
   CSS orientation
   Conclusion

1.5.Design examination

To understand what and how styling flows thru, let examine a site.

Snapshot of a site

With this view in mind, let lead you to a template belonging to webpages.

A webpage template

Do not let confuse yourself at the moment about where module dependent templates reside. Important is to see such a sniple, the main.tpl of module webpage:

0001 <div class="panel-title"><h1>{TITLE}</h1></div>
0002   <h2>{MESSAGE}</h2>
0003 <div class="panel-content">{CONTENT}</div>
0004 

What we now can observe, there is something like a box known from the past. The typical output variables are TITLE and CONTENT. And similar to a box is the div container surrounding the output variables. That should easy be confirmed with that portion seen in the snapshot belonging to webpages.

CSS references

To influence styling, the battlefield are the css classes, just seen in this example. There are some css classes in use and there are some css files to find in the themes directory. To examine essentials about, let show an extract of the browsers source view html

:
<style type="text/css"> @import url("templates/webpage/style.css") ;</style>

<style type="text/css"> @import url("mod/wiki/templates/style.css") ;</style>
<style type="text/css"> @import url("templates/menu/style.css") ;</style>
<style type="text/css"> @import url("themes/default/style.css") screen;</style>
<link rel="stylesheet" title="Default Delite" href="themes/default/default.css" type="text/css"  />
<link rel="alternate stylesheet" title="Blue" href="themes/default/blue.css"
      type="text/css" media="print, screen" />
<link rel="stylesheet"  href="themes/default/print.css" type="text/css" media="print" />
<!--[if IE 6]>
  <link rel="stylesheet" type="text/css" href="themes/default/hacks.css" />
<![endif]-->
:

where first module oriented css files are referenced, like that from the webpage path, but also site oriented css files, like style.css and default.css. And, the very important, the hack.css for InternetExplorer (that solves problems caused so much headache for legions of designers worldwide in the too many past years).

Let try to close the cicle. A look to the webpage module dependent css (webpage,style.css):

div.page-links {
margin-top : 20px;
text-align : center;
}

div.page-links span a:link {
text-decoration : none;
}

div.page-links span a:visited {
text-decoration : none;
}

and to the sites oriented css (themes,default.css) ...

default.css

body {
    color: #000;
    background-color : #DFE3BA;
}

/* ---------- Block colors ----------- */

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


#sidepanel div.box {
    border : white 2px solid;
}


.toggle1 {
    background-color : #EDF4D1;
    color : black;
}

.toggle2 {
    background-color : white;
    color : black;
}


.bgcolor1 {
    background-color : #DEE2BD;
    color : black;
}

.bgcolor2 {
    background-color : #EDF4D1;
    color : black;
}

.bgcolor3 {
    background-color : #ADB583;
    color : black;
}


q {
    background-color : #d6d7ca;
    color : black;
}


a:link, a:visited {
    text-decoration : none;
    background-color : inherit;
    color: #A03E19;
}

a:hover, a:active {
    text-decoration : underline;
    background-color : inherit;
    color: #000;
}


h1, h2, h3 {
    background-color : inherit;
    color: #A03E19;

}

h1 a {
    text-decoration : none;
}

h1 a:hover {
    background-color : inherit;
    color : #CB572D;
}


th {
    color: #A03E19;
    background-color : #EDF4D1;
}


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


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


/* -------- Form color ---------- */

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;
}



/* ----------- Module ----------- */
#top-menu {
    background-color : #DEE2BD;
    color : black;
}

#top-menu a:hover{
    background-color : #ADB583;
    color : black;
}

div.blog div.box {
    border : 2px white solid;
}

div.blog div.read-more {
    border-top : 1px solid white;
    margin-top : 5px;
}

div.category-links {
    padding : 4px;
    background-color : #EDF4D1;
    color : black;
}

/*--------------- Control Panel ---------------*/

div.frame {
    background-color: #CBCEAC;
    color : black;
    border-color : #90996E;
}

div.backgrd {
    border-color: #90996E;
}

ul.tabmenu {
   line-height : 0px;
   margin-top : 10px;
   margin-bottom : 12px;
}

ul.tabmenu li {
    border-color: #90996E;
    border-bottom : none;
}

ul.tabmenu li.inactive {
    background-color : #DEDFBA;
    color : #49493D;
}

ul.tabmenu li.active {
    background-color : #CBCEAC;
    color : #49493D;
}

ul.tabmenu li.active a:visited {
    text-decoration: none;
    background-color : inherit;
    color: #49493D;
}

ul.tabmenu li.inactive a:link {
    text-decoration: none;
    background-color : inherit;
    color: #49493D;
}

ul.tabmenu li.inactive a:visited {
    text-decoration: none;
    background-color : inherit;
    color: #49493D;
}

ul.tabmenu li.inactive a:hover {
    text-decoration: none;
    color: black;
    background-color : inherit;
}

ul.tabmenu li.inactive:hover {
    background-color : #CBCEAC;
    color: black;
}

/*--------------- End Control Panel ---------------*/

div.menu-link {
    border-top : white 2px solid;
    margin : 0;
    padding : 0;
    font-size : .9em;
}

div.menu-link a {
    font-weight : bold;
    text-decoration : none;
}

div.menu-link a:hover {
    text-decoration : underline;
}

div.menu-link:hover {
    background-color : #ADB583;
    color : black;
}

div.link-level-1 {
    padding : 5px;
    background-color : #CBCEAC;
    color : black;
}

div.link-level-2 {
    padding : 5px;
    padding-left : 1em;
    background-color : #E2E5BF;
    color : black;
}

div.link-level-3 {
    padding : 5px;
    padding-left : 2em;
    background-color : #F1F4CC;
    color : black;
}

div.link-level-1:hover,
div.link-level-2:hover,
div.link-level-3:hover {
    background-color : inherit;
    color : black;
}

div.current-link {
    background-color : #ADB583;
    color : black;
}

div.category-menu-bar {
    background-color : #DEE2BD;
    color : black;
}

div.panel-title {
    background-color : #DEE2BD;
    color : black;
    padding : 4px;
    margin-bottom : 10px;
}

ul#navlist li a {
    background-color : #ADB583;
    color : black;
}

div.category-info {
   margin-bottom : 10px;                  
}

div.breadcrumb span.current-bc {
   font-size : 1.1em;
   font-weight : bold;
}

/*---- Notes ---- */

.note-not-read {
   font-weight : bold;
}

... and (themes,style.css) ...

style.css

/* Basic tags and classes */
@import url("basic.css");

/* Positioning */
@import url("position.css");

that chains to basic (themes,basic.css) ...

basic.css

html, body {
    margin: 0px;
    padding: 0px;
}

body {
    font-family : sans-serif;
    font-size : .8em;
    padding : 0px 0px 10px 0px;
}


/* ---------- Headers ----------- */

h1, h2, h3 {
    font-family: "Trebuchet MS", Verdana, serif;    
    margin: 0;
    padding : 0;
}

h1 {
    font-size :  1.2em;
    font-style : italic;
}

h2 {
    font-size :  1.0em;
}

h3 {
    font-size :  .9em;

}


/* ---------- Tags ---------- */

code {
    white-space: pre;
    border: 1px solid #C0C0C0;
    display: block;
    overflow:auto;
    background-color : white;
    height : 200px;
}

pre {
    font-size : 1.1em;
}

strong {
    font-weight : bold;
}

q {
    display : block;
    padding : 5px;
    font-size : 90%;
}

ul {
    margin : 0px;
    padding : 0px;
    padding-left : 8px;
}

p {
    margin : 2px;
}

img {
    border-style : none;
}

img.float-left {
    float : left;
    margin-right : 10px;
    display : inline;
}

img.float-right {
    float : right;
    margin-left : 10px;
    display : inline;
}


blockquote {
    border-top : 1px solid #fff;
    border-bottom : 1px solid #fff;
}

fieldset {
    margin : 10px;
    padding : 10px;
}

legend {
    font-style : italic;
    font-size : 110%;
}

/* ----------- Form styles ----------- */

form {
     margin : 0;
     padding : 0;
}

input, textarea {
    font-family : inherit;
    font-size : 9pt;
    padding : 1px 2px;
}

select[multiple="multiple"] {
    padding : 1px 2px 1px 2px;
}

ul.no-bullet {
   list-style-type : none;
}


/* ------------- Table ------------- */

table {
      border-collapse : collapse;
}

th {
    font-weight : bold;
    font-family : "Trebuchet MS", Verdana, serif;
    text-align : left;
}

td {
    vertical-align : top;
}

/* ---------- Classes ---------- */

fieldset.quote {
    border : 1px solid black;
}

fieldset.quote legend {
    font-style : italic;
    font-weight : normal;
    font-size : inherit;
}

.spoiler {
    background-color : black;
    color : black;
}

.error {
    color : #cf2626;
    font-weight : bold;
}


table.form-table {
    margin : 4px;
}

table.form-table td {
    padding : 4px;
    vertical-align : top;
}

.form-table label {
    font-weight : bold;
    margin-right : 20px;
    color : black;
}


label.radio-label {
    font-weight : normal;
}


.clear {
    clear : both;
}

.padded {
   padding : 4px;
}

.smaller, .smaller input, .smaller select {
   font-size : .8em;
}

.larger {
   font-size : 1em;
}

.align-center {
   text-align : center;
}

.align-right {
   text-align : right;
}

.align-left {
   text-align : left;
}

/* ---------------- Box definitions -------------- */

.box {
    margin-bottom : 10px;
}

.box-title, .box-content, .box-footer {
    padding : 8px;

}

code {
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

abbr {
    border : none;
}

... and positioning (themes,positioning.css)

positioning.css

/* --------- Layout and positioning ------------ */

#container {
        border: 5px solid #FFF;
        margin : 10px 10px;
        padding: 10px;
}

#sidepanel {
        float : left;
        width : 17%;
        margin-right : 1%;
}

#main-content {
        margin-left : 18%;
}

#content h1, h2 {
        padding : 3px;
}

#header {
        padding-bottom : 10px;
}

#header img {
        padding : 0px;
}

#footer {
        clear: both;
        font-size : 90%;
        padding: 5px;
        margin-top: 15px;
        border-top : white 1px solid;
}

#top-menu {
    padding : 5px 5px 8px 5px;
    text-align : right;
    margin-bottom : 5px;
}

#search-box {
    float : left;
    padding : 0;
    margin : 0;
    display : inline;
}

div.block-embedded {
    width : 200px;
}

#miniadmin div.box-content {
   font-size : .9em;
   max-height : 180px;
   overflow : auto;
}

CSS orientation

As seen, a lot of css styling occurs. The tasks of style sheets are

• default.css
  body colors, colors of blocks, forms etc
  
• style.css
  is the switch to basic and positioning
  
• basic.css
  body fonts, padding, margins, also for various html tags
  
• positioning.css
  box stylings for containers and the behaviour all together
  

Conclusion

Styling of themes in pWS 1.x.x is powerfull as never before. But let warn, if anybody playing with that without the required in deep knowledge of how to style with css, it's easy to construct a site with rich content looking like a plate of spaghetty falling down by arriving (as always) on the wrong side.