1.Issue 7:The easy way of theme styling
1.1.Basics about theme styling
1.2.Theme investigation
1.3.Distinguish kinds of styles
1.4.phpWebSite style sheets
1.4.1.theme.ini
1.4.2.style.css
1.4.3.basic.css
1.4.4.default.css
1.4.5.position.css
1.4.6.others
1.4.7.modules style sheets
1.4.8.An example, resolved
1.5.Conclusion
Forum thread link

1.4.phpWebSite style sheets

As mentioned, phpWebSite has some style sheets in a theme.

1.4.1.theme.ini

Is an important file to control what css files exist and how they are to use.

1.4.2.style.css

Is the main sheet for the purpose to fetch (and chain) more style sheets. The import of basic.css and position.css is caused by this style.css.

1.4.3.basic.css

Mainly, but not excluding, for xhtml tag oriented assignments of style properties. basic.css is imported by style.css first.

1.4.4.default.css

The right place for css class assignments for the whole theme. Is linked as declared in theme.ini as prefered style sheet because to title is assigned.

1.4.5.position.css

Is the main place to control css boxes in size and positions. position.css is imported by style.css as 2nd. That means in the cascade, has priority against the 1st (basic.css).

1.4.6.others

Vary ..., some are for dynamic assignments during the run of phpWebSite, for example with layout manager or mini-admin. That is not all.

1.4.7.modules style sheets

Each module may be shipped with own style sheets also, to share in the cascade of styles. Those are to find primary in the modules folder, instead of the themes folder and become copied to templates/themodule during module installation. The place for change styles permanently, to survive de-installations is site/mod/themodule/templates (and not site/templates/themodule), that is valid for active modules, thus protected against module updates.

Someone will find contradictions against the theme oriented style design. The contradiction seems to be: module has own style.css in template subdirectory; during module installation that template subfolder is copied from site/mod/themodule/templates to site/templates/themodule; neither site/mod/themodule/templates, nor the site/templates/themodule folder belong to the site/theme (folder); changes to site/mod/themodule/templates does not apply to the current installed module - so changes to site/templates/themodule will do, but vanish if the module becomes uninstalled. To make changes in both sources are no solution, because module updates may override the own heavy work. But there is a solution, an easy solution: regard, styling in general should always belog to a theme. A theme is the a place untouched during module setup processes. Own modifications to the modules specific style properties have to be placed into a css within the theme, for example default.css. The art in that case is, to code the right specifications in the themes css file. Sounds complex, but is not. A simple example:

ControlPanel (a module not running in danger to uninstalled too often) has a site/mod/controlpanel/templates/style.css that is copied to site/templates/controlpanel/style.css from where it applies. To change the tab link titel properties of controlPanel, the css is to investigate (remember fireBug) what specifica are referenced; that is for example the "div.link a { ...}". Now, we can put that declaration into default.css of the theme to become in effect with changed properties sure to have set before. Because the themes default.css has priority against the modules css, our changes are the winner (while using the theme).

1.4.8.An example, resolved

Any running phpWebSite has a generated source xhtml like

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

Seen most above, the modules css are mentioned first, resulting in laying most to bottom in the cascading pyramide. More below (with more priority) followed by themes style.css (that imports basic.css and position.css), followed by themes default.css and ends with some specials for the IE misbehaviours.

1.5.Conclusion

Whatever is (simple or complex) used, assigned, cascaded ... With tools like FireBug and the shown examples, I hope to have guided a bit to the possibilities of theme design creation. Perhaps that may help a bit to see a growing number of well designed themes for phpWebSite 1.x.x in the future.

Forum thread link

Any remarks, questions etc about the article are requested to the associated sourceforge forum thread.