VbID dc4db eZine

Home

Something else

At this point, major changes are made to alter a theme. Very important stylings for a common unique view are the classes bgcolor1, bgcolor2 and bgcolor3, together with the classes toggle1 and toggle2. All the classes reside in default.css. These classes are important beyond the anonymous view. When a user logges in, several administrative task across Controlpanel use these classes. For several lists designed with the zebra effects, the toggles are styled most with the mentioned classes.

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

An example is the module list from boost:

I change the background color in bgcolor1 and toggle1 to #78a, a medium sun blue ...

... and bgcolor2 and toggle2 to #777 some similar medium gray ...

The list title is a th tag ...

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

... changed to ...

 th {
    color: #ccc;
    background-color : #446;
 }

... with that result ...

Does the tab colors of Controlpanel just look strange? There is a comment bounded Controlpanel section in default.css with class names starting most with "tabmenu", where I made several changes. Note, class bckgrnd is no spelling fault - this name is true.

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

 div.frame {
    background-color: transparent;
    color : black;
    border-color : #eee;
 }

 div.backgrd {
    border-color: #eee;
 }

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

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

 ul.tabmenu li.inactive {
    background-color : #446;
    color : #eee;
 }

 ul.tabmenu li.active {
    background-color : #78a;
    color : #eee;
 }

 ul.tabmenu li.active a:visited {
    text-decoration: none;
    background-color : #78a;
    color: #eee;
 }

 ul.tabmenu li.inactive a:link {
    text-decoration: none;
    background-color : #446;
    color: #eee;
 }

 ul.tabmenu li.inactive a:visited {
    text-decoration: none;
    background-color : #446;
    color: #eee;
 }

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

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

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

At this point, let break to explain the styling of controlpanel, because now modules CSS files become essential.

1.3.1.Conclusion

In this artikel, only three CSS files in a theme were altered and the sites view has changed very comprehensive. Hoping now, theme design for pWS 1.x is not more a bigger secret.

To be continued ...