7.1. Structure of a PHP-Nuke theme
Making your own personal graphical theme for your site is very important so that you don't have another PHP-Nuke clone, if your site looks the same as other sites it dosn't make you, the Webmaster look very professional. Personalising the portal starts from the graphical side of things. Knowing how to put your hands on a PHP-Nuke theme means being able to play with all of the graphical elements that we can use. The example theme we will use in this chapter is the NukeNews theme, made by Francisco Burzi for PHP-Nuke. It's a theme composed of alot of HTML files included in theme.php. This is a very good solution that permits you to manage the graphical part of the theme through an editor like DreamWeaver using the least amount of PHP code.
The NukeNews theme is structured in this way:
theme.php: It manages the main functions of the variables for the background colors.
tables.php: it manages the functions opentable(); and closetable();
header.html: It manages the header for your site
footer.html It manages the footer for your site
blocks.html It manages the blocks
center_right.html Manages the outlay of the page.
center_left.htmlManages the layout of the page.
story_home.htmlManages the layout of the page.
story_page.htmlManages the layout of the page.
These files are included in the functions specified in theme.php We then have a style sheet called style.css (style/style.css) included in the header.html file in our theme folder. For convention, the style sheet must always be called style.css and must always be contained in one folder called "style" inside of our theme folder. The images generally are grouped in a folder called "images" that is always found in our themes folder.
The folder structure of the NukeNews topic will be :
themes/NukeNews
themes/NukeNews/style/
themes/NukeNews/images/
Always remember that case is important, you must respect the difference between UPPERCASE and lowercase for compatibility with any Unix systems.
The theme.php file is the heart of all PHP-Nuke's graphical management.
The HTML file inclusion does not happen in all kind's of themes, some programmers include all the HTML in the theme.php file, but including it separately, solves many problems such as HTML formatting, that would otherwise be included in the PHP code. It also gives us the possibility of editing all with a visual editor (WYSIWYG).
The theme.php is the file that creates the managing functions of all of PHP-Nuke's components (header, footer, central parts, block...).
The themeheader() function manages the site header. It is composed of various tables that form the heading, and sometimes also defines some elements of the body tag that are not included in the style sheet and the variables that are placed inside the included html files.
- Example:
The variable $theuser is defined inside of the themeheader() function and is then recalled in the header.html file in a table:
Code in theme.php (that defines the $theuser variable)
if ($username == "Anonymous") {
$theuser = " <a href=\"modules.php?name=Your_Account &op=new_user\">Create an account";
} else {
$theuser = " Welcome $username!";
} |
Code in header.html (that visualises the $theuser variable)
<td width="15% "nowrap >< font class="content" color="#363636 " > <b> $theuser </b></font></td> |
The themefooter(); function manages the footer of our site.
It has some interesting elements we have to analyse:
First of all, it identifies if the visualised page has got the $index variable set equal to 1, in this case we will also insert the right blocks on our page, but if instead $index==0 then the right blocks will not appear on our page.
It then defines the footer messages (which are captured from config.php) and inserts all them in a variable that is recalled from the footer.html file.
The function themeindex() manages the news in Home Page and formats them adding elements according to various cases using the function "if". It also includes the story_home.htm file.
The function themearticle() instead manages the internal news page (that we can see by pushing on "Read more..."; remember that the layout part in this case is managed including the story_page.htm file, but the blocks that must be included (i.e. the article's survey, correlated links etc.) are defined by the news module.
The function themesidebox() instead manages the layout of the box that we create or that we find already made (see Chapter 8), it too includes a file called blocks.htm that defines the style and the layout.
We have ignored an element of the file theme.php. These are the variables that format the text, some of them are inserted in css (the style sheet) but others are instead defined at the beginning of the theme.php file.
Let's see the variables from the NukeNews theme:
$bgcolor1 = "# efefef"; $bgcolor2 = "# cfcfbb"; $bgcolor3 = "# efefef"; $bgcolor4 = "# cfcfbb"; $textcolor1 = "# 000000"; $textcolor2 = "# 000000"; |
As you see the expression values of these variables are in decimal format.
Define your site colours - $bgcolor2 is generally used for table edges as you can see in the function opentable(), $bgcolor1 is used for table background. The others two background variables use the same criteria. $textcolor1 and $textcolor2 are used to format the text colour.
Now we have to examine what is included in the tables.php file. This file creates 4 functions (opentable(); closetable(); opentable2(); closetable2();) that include HTML tags that open and close tables in a predefined way.
It is very easy to use when creating modules (see Chapter 9) , you don't have to rewrite the HTML every time you want to create a table but it's enough with the following syntax:
opentable(); echo "Content of the table"; closetable(); |
In this way you've created a table in a fast and effective way. But how is this function structured? We will examine first opentable(); then closetable();
 | Please note |
|---|---|
These are php functions so you have to respect the HTML syntax inside php adding / before every " (ie align="left" must be written as align=\"left\") |
function OpenTable() {
global $bgcolor1, $bgcolor2;
echo "<table width=\"100% \" border=\"0 \ "cellspacing=\"1 \" cellpadding=\"0 \ "bgcolor=\"$bgcolor2 \" >< tr >< td > \n ";
echo "< table width=\"100% \" border=\"0 \ "cellspacing=\"1 \" cellpadding=\"8 \ "bgcolor=\"$bgcolor1 \" >< tr >< td > \n ";
} |
The syntax is very simple, isn't it?
The function is opened
Necessary variables are called ($bgcolor1, $bgcolor2)
We open a table 100% wide and we define the background colours for it
Open Line, Open Column
We insert a new table 100% wide (for the edges)
The width and height characteristics are defined.
line column
We stop on the column because it's here we will insert the table content (In fact opentable is where we start from to close this table!)
function CloseTable() {
echo "</td ></tr ></table ></td ></tr ></table > \n";
} |
In fact...
The function is opened
You close Column, You close Line
You close Inner Table
You close Column, You close Line
You close External Table
Its easy to construct HTML functions with PHP, isnt it?