|Home Articles Solutions Contribute About|
the new eDare website, the commercial company providing services, projects and custom developments based on the eDreamers solutions.
PHP Enabled Stylesheets: Introduction to SkinsAuthor: Bertrand Potier
Last version: version 2 - Dec 03
Published on: PHPBuilder.com (v1.0), Canal HTML
Download Examples: ZIP (11 ko)
This is the second edition of an article I posted on the website PHPBuilder.com in November 2002. Since then, the Dynamic Stylesheets principle was improved and simplified and this article is now updated to explain the new implementation.
CSS Stylesheets are a major improvement in the World Wide Web, allowing HTML to come back to its roots: a language to structure and publish content on the web, not to apply a visual formatting to that content.
Unfortunately HTML and CSS have the same limitations: both are static languages!
If you're quite familiar with PHP and CSS, reading the above objectives will probably make you already think about some solutions to achieve them. When writing this article, I'm not saying that what is described here is the only way to do it. It's a way and do not hesitate to post comments: Let's start!
The main principle of this solution is that all the involved components, including the stylesheet, are PHP files that will be interpreted by the web server before being offered to the user.
Each component will therefore be named with a
Less files could be created but you have to consider these as the skeleton of a bigger application. To avoid any confusion, in the scope of this article, these files are assumed to be stored in the same directory. The location of this directory is not important as long as it is located somewhere under the root of your web server. Let's move on to the definition of the files.
The Configuration File
Obvious enough, this file is meant to hold some configuration parameters, ease their management by externalising them from the main other files.
In the scope of this article, we will only set one property defining the default skin to use when launching
I usually use arrays with capital letters names to hold global parameters, meaning parameters also visible and used in other files than the one in which they are created.
The Index File
This file is the core of the demonstration as it not only holds the HTML code using the styles but also is the file including all the others:
First, the skin name defined in the configuration file is used to create the name of the skin file to load.
This is giving us the opportunity to have the skin changed by providing a different name via an HTTP request for example.
Some code is making sure that this is possible by only using the configuration file value in case no value is provided by either a parent script or an HTTP request (
Then the PHP stylesheet is linked.
It seems that the stylesheet is not interpreted when using the following code
The rest of the code is some pure HTML to test the styles and more explanations are provided later in this article.
The Skin File
This file is meant for the end user who will configure the visual appearance of the application. Although being still a text/php file, its layout as well as the variables names are defined to be as user-friendly as possible. For this reason, I made the choice to not use variables but arrays that are giving the opportunity to name the different element in a very comprehensive way. Of course, an even more user-friendly solution is to provide some web screens to manage the skin parameters without having to edit the file but this is not the scope of this article.
The parameters that you want to make available via this Skin file are up to you. It fully depends on your stylesheet and what is the freedom that you want to give or not give to yourself or your end user. In the scope of this article, we will consider the following very simple example:
I limited the number of visuals parameters to 4: font, font size, font unit and page background color.
I recommend you that, when naming the first dimension of the
The CSS Stylesheet File
The PHP enabled stylesheet is nothing more that a CSS stylesheet with some PHP code in it. What is more interesting is the benefits of this association as, purely from a coding point of view, there's no complexity at all. Explanations will follow.
The Real Fun!
Let's now go through the benefits that this combination of PHP and CSS is providing us.
This is the most obvious use of PHP inside a CSS stylesheet but not the one with the highest added value. One example is the creation of repetitive style definitions like for the HTML headings, in/decreasing the font size automatically from the font size set in the Skin file:
The main advantage is to not have to type the same thing over and over again. Now you also understand why we split the font size from the font unit in the skin. More seriously, this can automate the creation of style definitions in many various situations. To make this specific example even more useful, the "increase factor" of 6, here hardcoded, could also be put in a skin parameter.
Browser/Platform Based Behaviors
It happens that the difference between this and this browser/platform specific stylesheet are not so big and being able to adapt a unique stylesheet would ease everything.
For example, font size (again) can be a problem depending on the Operating System (OS) of your visitor.
Even at the same resolution as on your WINDOWS OS, the text will appear to be smaller on Linux and Mac OS platforms.
I don't have the chance to own a MAC OS so the value tested may not be fully correct (code to be placed in the
An easy way to make the
The value of this increment should depend on the font unit that you use (px, pt, em, etc.).
This increment could also be declared as a new visual parameter to be included in your skin file as
I call contextual behavior the capacity of a style or class within the stylesheet to depend on an external information that is, in most case, the value of another configuration or visual parameter.
The code sample in the "Code Generation" section was demonstrating that kind of behavior by using the default text font size visual parameter to calculate the font size of the Headings in order to obtain a certain consistency between the different font sizes.
New skins can be created and can inherit parameters defined by a parent skin.
Let's create a new
This new value simply overwrites the one stored in the parent skin loaded with the PHP
Inheritance can help defining totally new skins from a parent one with just a few lines redefining some key parameters as illustrated below with the print skin.
Create Skin for Printing
How to make contents displayed through a website printable is a question that is coming back in the mind of many web developers and webmasters. Skins can offer a good answer to that, especially if you've used them to also influence your HTML code as suggested earlier. Skins inheritance is making it even easier. Taking the eDreamers website example, I will explain here how the solution to print the content pages was built based on the principles described in this article:
That's it, simple and quite efficient. You can test the result by using the "Print page" link on the bottom of this page. I've not developed these mechanisms specifically for the eDreamers website. I created the website thanks to eDContainer, which is what I call a container for web site and applications. It implements mechanisms described here (skins, print links, user stylesheet, etc. ) and make them available out-of-the-box.
Bringing the power of PHP inside the already powerful CSS stylesheets can bring you a lot of new opportunities and as many problems. The importance of a good design prior to development (or during a prototyping phase) is always essential and always more essential when dealing with technologies as rich as PHP and CSS, and this is all the more true when they are combined.
That the reason why making a clear distinction between the structure, the visual and the content related aspects of your web sites or web applications is an absolute must if you want to achieve good results.
Skins should always provide a real added value compared to the CSS stylesheet: you'd better stop the moment you start to create parameters such as
|built with eDContainer, the structure of your web sites and applications - Copyright © 2006 - 2013 eDare|