14.4.2. How to change background colour

A well-constructed theme will offer you a simple way to change the various colours (see How to change the background colour): in the theme.php file of the NukeNews theme, for example, you can read:

/************************************************************/
/* Theme Colors Definition                                  */
/*                                                          */
/* Define colors for your web site. $bgcolor2 is generaly   */
/* used for the tables border as you can see on OpenTable() */
/* function, $bgcolor1 is for the table background and the  */
/* other two bgcolor variables follows the same criteria.   */
/* $texcolor1 and 2 are for tables internal texts           */
/************************************************************/

and immediately after that:

$bgcolor1 = "#efefef";
$bgcolor2 = "#cfcfbb";
$bgcolor3 = "#efefef";
$bgcolor4 = "#cfcfbb";
$textcolor1 = "#000000";
$textcolor2 = "#000000";

The strings to the right side of the above assignments are hexadecimal representations of colours. They begin with a # and contain six hexadecimal digits, two for each colour of the basic ones, red, green and blue. Thus, the string "#cfcfbb" fot $bgcolor4 means cf for red, cf for green and bb for blue. Each one of the three hexadecimal two-digit numbers has a range from 00 to FF (just as each hexadecimal digit goes from 0 to F: 0, 1, 2, 3..., 8, 9, a, b, c, d, e, f, where a means 10, b means 11, c means 12 ... and f means 15 in the hexadecimal system). This means a range from 0 to 255 - that's 256 different values for each colour.

	Colour wheels
	A useful tool in exploring the visible spectrum in HTML is the colour wheel. Just hover over the wheel with your mouse to view 4096 colors in their web safe, web smart and unsafe versions. You can also use the colour popups of the Tag-o-matic to show all 216 web-safe colours in a virtual colour card.

But what do you do if your theme does not follow this scheme and does not offer you this possibility? In such a case, we need to applly our knowledge on the structure of a theme (see Section 14.1). We have seen that each theme comes with its own definition of the OpenTable() and CloseTable() functions. A brief look at the code of tables.php in modules/NukeNews reveals the place where $bgcolor1 and $bgcolor2 are used in the Nuke News theme: in the definitions of OpenTable() and CloseTable()! This is for example the OpenTable() function for the NukeNews theme (see modules/NukeNews/tables.php):

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";
}

Other themes construct their the OpenTable() and CloseTable() functions similarly, if not identically. We will use this fact to change the background colour in the Stories Archive module - and only there. To this end, we only need to define new OpenTable() and CloseTable() functions, with the colour of our choice, then use the new functions instead of the old ones everywhere in the module:

In the theme.php file of your theme, add the following two functions[1]:

function OpenTableNew() {
    global $bgcolor1, $bgcolor2;
    echo "<table width=\"100%\" border=\"0\" cellspacing=\"1\" 
          cellpadding=\"0\" bgcolor=\"$bgcolornew2\"><tr><td>\n";
    echo "<table width=\"100%\" border=\"0\" cellspacing=\"1\" 
          cellpadding=\"8\" bgcolor=\"$bgcolornew1\"><tr><td>\n";
} 
function CloseTableNew() {
    echo "</td></tr></table></td></tr></table>\n";
}

Give the new background colours, $bgcolornew1 and $bgcolornew2, the values of your liking in the start of theme.php, for example:

$bgcolornew1 = "#ffffff";
$bgcolornew2 = "#660000";

Then just change every occurence of "OpenTable" and "CloseTable" with "OpenTableNew" and "CloseTableNew" respectively in modules/Stories_Archive/index.php. That's all! The Stories Archive module will now use the new colours.

There is one small detail you may also want to fix though: the colours of the cells for the "Articles | Comments | Reads | Score | Date | Actions" links. To change those too, you will have to change the $bgcolour2 colour in the table cells of the show_month function of modules/Stories_Archive/index.php (see also Background color in Stories Archive):

    echo "<table border=\"0\" width=\"100%\"><tr>"
        ."<td bgcolor=\"$bgcolor2\" align=\"left\"><b>"._ARTICLES."</b></td>"
        ."<td bgcolor=\"$bgcolor2\" align=\"center\"><b>"._COMMENTS."</b></td>"
        ."<td bgcolor=\"$bgcolor2\" align=\"center\"><b>"._READS."</b></td>"
        ."<td bgcolor=\"$bgcolor2\" align=\"center\"><b>"._USCORE."</b></td>"
        ."<td bgcolor=\"$bgcolor2\" align=\"center\"><b>"._DATE."</b></td>"
        ."<td bgcolor=\"$bgcolor2\" align=\"center\"><b>"._ACTIONS."</b></td></tr>";

For your design to be consistent, the best way would be to change the six occurences of $bgcolor2 in the above code, to your new background colour $bgcolornew2.

If you want to change the foreground colour, the easiest method might be to change the value of the text attribute in the <body> tag that is echoed in the themeheader() function of theme.php (see How to change the main font color):

echo "<body bgcolor=\"#505050\" text=\"#000000\" 
link=\"#363636\" vlink=\"#363636\" alink=\"#d5ae83\">";

Setting

text=\"#FF0000\"

for example, should make all text appear in red.