14.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 a lot of HTML files, all 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.

For a graphical anatomy of a PHP-Nuke theme, please have a look at the theme.html file. As you can see, each PHP-Nuke page follows the classic 3-column table layout: in the left and right columns you can position small blocks, while in the center, wider column, you should position the larger blocks. It is also the center column where the currently viewed module is shown.

The NukeNews theme, for example, is structured in the following way (Figure 14-1):

• theme.php: controls the main functions of the variables for the background colors.

• tables.php: controls the functions opentable() and closetable().

• header.html: controls the header for your site.

• footer.html: controls the footer for your site.

• blocks.html: controls the blocks.

• center_right.html: controls the layout of the page.

• center_left.html: controls the layout of the page.

• story_home.html: controls the layout of the page.

• story_page.html: controls the layout of the page.

These files are included in the functions specified in theme.php We then have a style sheet (Section 28.3), 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 theme 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 theme.php is the file that creates the managing functions of all of PHP-Nuke's components (header, footer, central parts, block...).

The technique of putting HTML code in separate files, that are then included in theme.php, is not used in all themes (see Figure 14-2). Some programmers include all the HTML in the theme.php file. However, 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 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.

Code in theme.php (that defines the $theuser variable)

if ($username == "Anonymous") {
  $theuser = "&nbsp;&nbsp; <a href=\"modules.php
  ?name=Your_Account &op=new_user\">Create an account";
} else {
  $theuser = "&nbsp;&nbsp;Welcome $username!";
}

Code in header.html (that displays the $theuser variable)

<td width="15% "nowrap >< font class="content" color="#363636 " >
<b> $theuser </b></font></td>

It is also in the themeheader() function that the position of the advertisement banners is hardcoded. If you are not satisfied with the placement of your banners, look for the lines

if ($banners == 1) {
  include("banners.php");
}

These lines are responsible for the output of the banner. By changing their place in the PHP code, you can achieve a different banner placement.

The themefooter(); function is responsible for the footer of our site.

It has some interesting elements we have to analyse:

First of all, it identifies if the displayed 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 achieved by 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 20), 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 21) , 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 the Column; You close the Line

• You close the Inner Table

• You close the Column; You close the Line

• You close the Outer Table

Its easy to construct HTML functions with PHP, isnt it?