-
Notifications
You must be signed in to change notification settings - Fork 11
The new theme system
A theme in general supports all the parts of a web page that is not related to the content of that page. This means, the header, the colors, the html-code snippets that encapsulates the content parts of the web page to give the desired design and look of the content elements.
In the process of creating a new theme system, I have included a new file in every theme, called theme_functions.php. This file contains a number of procedures that is called from within Prairie to have the encapsulation of the content parts of the web-page. The old themes silver and fresh have one instance of the theme_functions.php that conform with the encapsulation of the old theme system. Here we have moved some parts of Prairie out in those files. The new theme system uses another instance of this file, with the encapsulation for the new theme system.
The new theme system is made to take advantage of Artisteer to produce the images and the CSS files to produce the new theme. Artisteer is basically an Theme builder for Joomla, Wordpress, Drupal, and a number of other CMS systems. It also has an option to produce HTML themes for general use. It is fairly easy to produce a good looking theme in Artisteer, as you can customize every part of the web page easely without much web-development knowledge. When exporting, Artisteer produces a page.html file, a CSS directory, and a Image directory, and a few other files.
We rarely use the page.html file - since much of it is contained in the theme_functions.php file. IF the theme does not look like you expected after included the CSS files and the image files. You might look into the page.html to see if any of the building blocks are different in the encapsulation.
To create a new theme, start using a copy of the blue theme. Just copy the whole folder and give it a different name. Then produce the theme in Artisteer, and copy the content of the produced image directory into the image directory of the new theme. Then copy the CSS files into the CSS directory of the theme.
After that, we may open the style.css and do some search and replace to have the image references conform with actual location. See how this is done in the style.css of the blue theme compared to your new fresh style.css from Artisteer - and redo the same in your new style-sheet. It should be just one search and replace to do all the image references in one shot.
Then - edit the theme_functions.php to change the path of your theme, the first function is called theme_headincludes() that returns the extra stuff needed in the HEAD section of your pages.
function theme_headincludes () {
$csscommon = SCRIPT_THEME_PATH."css/common.css";
$cssScriptName = SCRIPT_THEME_PATH."css/".SCRIPT_NAME.".css";
$tmppath = "/theme/blue";
The above procedure have the line $tmppath assigned the path where your new theme is located. You should here just change blue to the name of your new theme.
Now, switch the template in Prairie to the new one created. If the look and feel are just like the one created in Artisteer, you are done. If there is some differences, you might dive into the theme_functions.php and change some of the code snippets to conform with the snippets found in the page.html. It might need some HTML knowledge and some PHP knowledge to do this. The page.html file produced from Artisteer is just a web page that utilizes the CSS's and images - and it contains all the example texts and menu stuff. One need to sort out all this and see how the basic blocks defined in the theme_functions.php are implemented in that particular page.html. It might not be much of a difference.
If you only notice that the images of the theme does not display, some adjustment to the CSS file might be necessary to have the image tags go to the right place. Se the image tags in the style.css of the blue theme, and make your new style.css have the same kind of image addresses.
There is a number of other functions in the theme_functions.php - Here is a more complete reference. To the PHP developers, this new theme system is a good base for implementing a lightweight theme system into any PHP project - taking away the focus of the design basics, and make the developer have focus on the content and the functionality of the web system he is making. There is no license regulations connected to this theme system, so you may freely use it in any commercial or non commercial project - make it your own. :-) If you like to have a look at how the theme system is implemented in the actual system, have a look at the file: templates/wrapper.tpl.php
This procedure returns the extra stuff needed in the HEAD section of your theme. This might be loading of extra style sheets, javascript libraries, and other things needed. The function have a HTML block where the stuff go. Look at the way paths are addressed in the file to conform with those already defined.
This function contains the HTML code for encapsualtion of the content part of the page. This is called the article. In front of the profile page, you have an article about yourself. This code encapsulates this article. IE, the div-tags and style references to your CSS styles. The $body parameter are the actual content - the return value is the $body encapsulated in the html code neccessary for making the $body look the way you want.
Not used at the moment.
This function are used on the profile page. The profile page have a e-mail form that is normally hidden. When clicking "contact me" the form become visible. This function encapsulates the e-mail form and the body text of the profile page.
This function encapsulates content in the sidebar. The sidebar have now just the profile picture and some text of the owner, but future releases of prairie might contain more blocks in the sidebar. Each block is encapsulated in this function, and the whole sidebar is encapsulated in a separate function described below.
Encapsulation of the sidebar. This includes the profile picture of the user. More custom blocks can be included in this if necessary, like company info, etc.
The start code neccessary for making the top menu look the way you want.
The end code for the menu block.
This function encapsulates one item in the top menu bar.
This function should draw the head of the web-page. The $menu parameter has to be included in the head. It contains the code of the menu included the start/end and itmes descibed above. This parameter is included so the theme designer has the flexibility to choose where to put the top menu (above or below the top image banner).
This function creates the whole body part of the page. The $head parameter is taken from previous execution of the theme_head function. The $body contains the main article and the sidebar. This function encapsulates the whole ting into at least the body tags, but has to include the two parameters. The footer of the page are also included here.