How to display a watermark background image

14.3.7. How to display a watermark background image

It may sound inconsistent (actually, it is inconsistent!), but in order to display a static background image (i.e. one that does not scroll down when you scroll), like a watermark, in PHP-Nuke, you must change the theheader() function in the theme.php file of your theme.

The code you will need for this nice effect should be placed in the body part of the page's HTML code (the part delimited by the <body> and </body> HTML tags). The reason we need this in the body part, is that in the header it will produce an error (at least in Mozilla):

Error: document.body has no properties

This is probably because the document body does not exist at the time the header is loading.

Our code is a small Javascript, so you might think it belongs to the javascript.php file under the includes folder (see Section 21.9.1). Unfortunately, whatever is in that javascript.php file, will be included in the HTML header of the page, i.e. the part of the HTML code delimited by the <head> and </head> tags (see Chapter 15), so this will not serve our purpose. What we actually need is a file for code that belongs to the HTML body and comes preferably immediately after the <body> tag - but such a file does not exist in PHP-Nuke yet.

Thus, the next best place to insert our Javascript is in the theme.php file of our theme. This is because the <body> tag is echoed precisely in this file, as Table 14-1 demonstrates[1].

Table 14-1. <body> tags in theme.php of various themes

theme.php file

PHP code that echoes the <body> tag for the theme

themes/3D-Fantasy/theme.php

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

themes/Anagram/theme.php

echo "<body bgcolor=\"#ffffff\" text=\"#000000\">\n";

themes/DeepBlue/theme.php

echo "<body bgcolor=\"#0E3259\" text=\"#000000\" link=\"0000ff\">"

themes/ExtraLite/theme.php

echo "<body text=\"000000\" link=\"0000ff\" vlink=\"0000ff\">"

themes/Kaput/theme.php

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

themes/Karate/theme.php

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

themes/Milo/theme.php

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

themes/NukeNews/theme.php

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

themes/Odyssey/theme.php

echo "<body bgcolor=\"#004080\" text=\"#000000\" link=\"#004080\" vlink=\"#004080\" alink=\"#004080\">";

themes/Sand_Journey/theme.php

echo "<body bgcolor=\"$bgcolor1\">";

themes/Slash/theme.php

echo "<body bgcolor=DDDDDD text=222222 link=660000 vlink=222222>

themes/SlashOcean/theme.php

echo "<body bgcolor=FFFFFF text=000000 link=101070 vlink=101070>

themes/Sunset/theme.php

echo "<body bgcolor=\"#FFC53A\" text=\"#000000\" link=\"#035D8A\" vlink=\"#035D8A\">";

themes/Traditional/theme.php

echo "<body bgcolor=\"#FFFFFF\" text=\"#000000\" link=\"#000000\" vlink=\"#000000\">"



Find the line that echoes the <body> tag in your theme.php (look for the themeheader() function or consult Table 14-1) and insert the following lines after it (if the line does not contain a semicolon at its end, you have of course to append these lines after the next most close line that contains it, otherwise you will mess up the code and get errors):

    echo "\n";
    echo "<script language=\"JavaScript1.2\">\n";
    echo "<!--\n";
    echo "if (document.all||document.getElementById) \n";
    echo "document.body.style.background=
          \"url('http://www.yoursite.com/images/watermark.gif') 
          white center no-repeat fixed\"\n";
    echo "//-->\n";
    echo "</script>  \n";

Adapt the URL in the script (http://www.yoursite.com/images/watermark.gif) to reflect the full URL to your watermark image. That's all, if your theme does not define any background colours for tables!

In practice, however, your theme will define at least two table background colours, those in the OpenTable() and OpenTable2() functions, as shown in this example, taken from the ExtraLite theme:

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";
}
function OpenTable2() {
    global $bgcolor1, $bgcolor2;
    echo "<table border=\"0\" 
          cellspacing=\"1\" cellpadding=\"0\" 
          bgcolor=\"$bgcolor2\" align=\"center\"><tr><td>\n";
    echo "<table border=\"0\" 
          cellspacing=\"1\" cellpadding=\"8\" 
          bgcolor=\"$bgcolor1\"><tr><td>\n";
}

You must delete those bgcolor attributes completely for this method to work! In fact, this will not be enough: you will have to delete every other table bgcolor attribute that appears in your theme.php[2]. Contrary to what is implied in Static Background Image, where this method is described in detail, deleting only the bgcolor attributes for the above two OpenTable functions will not be enough.

Tip Alternative solution
 

An alternative solution would be to add the background and bgproperties attributes directly in the <body> tags of the lines in Table 14-1, as in this example for the ExtraLite theme:

echo "<body background=\"images/watermark.gif\" bgproperties=\"fixed\" 
text=\"000000\" link=\"0000ff\" vlink=\"0000ff\">"

bgproperties will also create a "watermark" on the page, a background image which does not scroll with the rest of the page (see bgproperties attribute. The only value it can attain is "fixed" and it must be used in conjunction with the background attribute. It is an MSIE extension, so use it, but don't rely on it. You will again have to delete all background colour attributes of the tables in theme.php. Contrary to the first method, however, there is no way to specify a no-repeat property, so that if your image does not fill the whole background space available (which depends on the client's monitor resolution), it will be repeated horizontally as well as vertically.

Notes

[1]

Of course, this also means that our change has to be applied for every theme and after every upgrade anew.

[2]

That is at least the way I managed to get it to work with the ExtraLight theme. Since everyt heme is different, you will have to experiment here.

 

Site Info v2.2.2

Last SeenLast Seen
Server TrafficServer Traffic
  • Total: 342,471,360
  • Today: 4,523
Server InfoServer Info
  • Nov 23, 2017
  • 01:35 am PST
 
 

Daily Inspiration