How to get started with PHP themes?

I have a web application developed using PHP. I want my users to select themes开发者_开发百科 for their pages throughout the application.

• Where should I start before using PHP themes?

What should I know about Themes in a PHP application?

Edit:

My question about themes is only about changing the color of the layout, not the images.

Suppose My ADMIN user will have white and Orange, but my staff user will have white and green...

How it can be done in PHP with CodeIgniter?

There are lots of directions you can go with this.

1) "CSS ZEN"

This is where the markup remains unchanged, but you totally change the design just by using CSS and images. Demonstrated very well on http://www.csszengarden.com/

2) MVC Stylee

This is where you create a model that represents the page data and then pass it to a view, which contains some inline echo statements. The idea is that you could send the same model to a totally different view so it could look entirely different, HTML and all. Cake PHP is a good start for this: http://cakephp.org/

Example:

<div class="content">
    <? echo $Page->Content ?>
</div>

3) Micro-Markup

With this method, you add your own "special tags" to an HTML page. You then read in your plain HTML page and replace the special tags with the information you want to display. This is good if you want your templates to be recognisable to HTML guys that don't know PHP and might break the PHP code in the MVC app.

Example:

<div class="content">
    <#Content#>
</div>

Out of all of these, MVC is a very structured way of achieving what you want - however, I listed the other options as they cater for specific scenarios that might be relevant to you.

I have implemented the concept in all three of these, in situations that were appropriate for each.

Regarding The Edit In The Question

I imagine you'll have "something" that represents your user - so it is as easy as:

(In the event of just wanting to override a few settings...)

<link href="style.css" type="text/css" rel="stylesheet">
<?php if ($User->Type === USER_ADMIN) {  ?>
<link href="admin.css" type="text/css" rel="stylesheet">
<?php } ?>

You can adjust this example in the following ways:

• Use a switch statement if there will be many user types
• If the replacement is total, rather than just a few overrides, you may want to completely swap the stylesheet.

You would usually set up template files that contain the HTML and CSS, and build in the PHP generated values at runtime.

The best approach to this is to have the theme reside in a separate directory, containing no code, just template variables like {mainmenu}, {backbutton}, {content} ... you get my drift. Those are then filled by your PHP script, possibly with the help of a template engine like Smarty (No need to re-invent the wheel here).

There is also the approach of having PHP markup directly in the template file(s) like echo $xyz; while this is a perfectly valid practice I use myself often, I recommend using a template engine over using PHP markup in the code if you want a solid, future-proof templating system because:

• First, there is less that a designer can break when working on the HTML.

• Second, having PHP markup in the code is a temptation to program PHP logic inside the template (loops, conditions) instead of properly preparing them in the PHP code at the point where the template variables are created. That is terrible for maintenance and the further use of your templates, because you have to replicate that PHP soup into every new template again. After all, you want to have a template engine so others can create new looks for your product, without having to know how to program it.

• Third, with the templating engine based approach you have the possibility to add caching where necessary without any additional work. Not possible with the scripting approach. Yes, in a web application you won't be able to cache that much, but with a lot of data, there will be instances where it will help the user experience.

• Fourth and least important, it makes your template less easy to export to other applications, and import templates from other applications.

The CSS Zen approach mentioned by Sohnee is great for websites, but is going to be too limited for a web application that uses complex input elements, JS based menus, and the like. It is too often that those elements need to be changed and customized in the markup.

If you have a look at my CodeIgniter Template library it briefly explains how you can set up themes and layouts (the equivalent of header & footer).

If you set up global code such as a Hook or a MY_Controller then you can dynamically set your theme based on the logged in user, the user type, etc.

Eg:

if($user->role == 'admin')
{
    $this->template->set_theme('admin_skin');
}

else
{
    $this->template->set_theme($user->theme);
}

That is just a VERY basic example of the sort of thing you could use this Template library for.

CMS Solutions

Magento and Wordpress package all theme related files into their own seperate directories. These contain the serverside code, stylesheets, images and javaScript for the theme. The user in effect chooses a directory to use which affects how the page is layed out and styled.

An easier approach

A much easier way to get started would be to accept that the actual content, e.g. HTML of a page would stay the same, but let the user choose from various CSS style sheets.

When choosing a style sheet the system could use JavaScript to load it in dynamically so that the user can preview the look they are choosing.

If you have really good semantic HTML it will be enough to change the CSS files. Unless the design changes are really heavy. Then it would make sense to provide PHP templates that are build with some sort of modules: variables which contain certain HTML structure like navigation or sidebar, etc.

For themes you do not need PHP. Just define your themes in CSS (the best way is one file for each theme) and use a simple JavaScript chooser like at this site: http://www.fotokluburan.cz/switchcss.js.