customisations

[Me59]

Script URL:
Version of script: 1.3
Version of PHP: 4
Hosting company: host excellence

Write your message below:

I just installed your script and all seems fine. However, I miss 3 customisation options:
1) page background image (body background)
2) table background image (table background)
3) customisable table borders

any chance to add it?

[me59]

I found the page background fix but how about table

[Henrie]

Hi Me59

What you want can be done by editing the style.css file.
Open it with a simple text editor (like notepad).
For editing the style of the table find table.entries {.
For a background image add background-image: url(backgroundimage.jpg); before the ending }, where backgroundimage.jpg is the name of your backgroundimage which is placed in the same directory as your style.css file.
To change the style of the borders change the values of the border-right: and border-left: and border-top: and border-bottom: properties.
If you need help on the values you can use visit this link http://www.w3schools.com/css/css_border.asp

I hope this helps you.

Greetings Henrie.

[Guest]

Thx, Henrie but it does not work!

BODY, TD {
background-image: url('CanvasBG2.jpg');
color : maroon;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;


This style refers to BODY and TD - means the TD background == BODY background. Do you know the syntax to separate these two?

[Henrie]

What does not work? Do you not see a background image or do you just want a different background image for the BODY and the TD?

For a different background for BODY and TD you can best split the two definitions.
For example:

BODY {
background-image: url('CanvasBG2.jpg');
color : maroon;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
}

TD {
background-image: url('tdbg.jpg');
color : black;
}

If you want properties in the TD the same as in the BODY you should not have to define them again as they are inherited in nested items. Be aware that for example when you define a font-size for TABLE this is then inherited by the TD instead of the font-size defined in the BODY.

If this does not work, then please post a link to your guestbook so i can look at the files more closely to see what's wrong.

[Me59]

with the default style css the table background is always the same as the page background. u just can't get two separate backgrounds to show up.
just try it for yourself...

[Me59]

here my site link - under construction!

http://72.41.72.231/Studio/StartET.html

[Me59]

What does not work? Do you not see a background image or do you just want a different background image for the BODY and the TD?

.....

Now after registering I can edit the posts

I see just one (body) background image covering the page and table. I would like to have the table its own different background image but so far nothing works for me.

[Henrie]

OK, I see you have not split the style for body and td. At this moment you have

Code: Select all

BODY, TD {
	background-image: url('CanvasBG2.jpg');
      color : maroon;
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
}

TD.upper {
	color : #FFFFFF;
	background : #23559C;
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
}

FONT.smaller {
	font-size: 10px;
}

table.entries {
	color : black;
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	BORDER-RIGHT: #23559C 1px solid;
	BORDER-LEFT: #23559C 1px solid;
	BORDER-TOP: #23559C 1px solid;
	BORDER-BOTTOM: #23559C 1px solid;
}

Try changing it to this:

Code: Select all

BODY {
	background-image: url(../RedDunes.jpg); 
	color : maroon;
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;	
}

TD {
	color : maroon;
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;	
}

TD.upper {
	color : #FFFFFF;
	background : #23559C;
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
}


FONT.smaller {
	font-size: 10px;
}

table.entries {
	color : black;
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	BORDER-RIGHT: #23559C 1px solid;
	BORDER-LEFT: #23559C 1px solid;
	BORDER-TOP: #23559C 1px solid;
	BORDER-BOTTOM: #23559C 1px solid;
	background-image: url(../CanvasBG.jpg); 
}

This will add different styles for body and td. The background-image for the table is added in the style for table.entries .

The colorfull border you have around the yellow background can also be done around the entire guestbook. This would require adding some code to the header.txt and footer.txt files.

In header.txt file add:

Code: Select all

<div align=\"center\">
<center>
<table border="0" cellspacing="0" cellpadding="2" width="95%" class="entries">
<tr><td colspan="3" rowspan="1" style="height: 25px; background-image:url(../BorderH.gif);">&nbsp;</td></tr>
<tr><td style="width: 25px; background-image:url(../BorderV.gif);">&nbsp;</td>
<td>

In footer.txt file add:

Code: Select all

</td>
<td style="width: 25px; background-image:url(../BorderV.gif);">&nbsp;</td></tr>
<tr><td colspan="3" rowspan="1" style="height: 25px; background-image:url(../BorderH.gif);">&nbsp;</td></tr>
</table>
</center>
</div>

You should also consider changing some of the background and border colors used in the style.css file so they look better with the rest of your page.

[Me59]

I am amazed, Henrie...all fits perfectly well!

I modified the header.txt by adding two line breaks to move the table down a bit.

Last thing to do for me is changing the font colors outside the table.

Thanks a bunch, Henrie!

EDIT: you are even better than this - no need to change fonts at all!
Thank you master!

[Henrie]

Glad I could help.
I see just one thing I overlooked. The blue border around the images border. Easy to overcome, change the following things:

In header.txt change the line:
<table border="0" cellspacing="0" cellpadding="2" width="95%" class="entries">
to
<table border="0" cellspacing="0" cellpadding="2" width="95%" class="border">

In style.css add (preferable below the table.entries { ... } for clean coding reasons):

Code: Select all

table.border {
	color : black;
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	border : maroon solid 0px;
	background-image : url(../CanvasBG.jpg); 
}

I am a little bit of a perfectionist and I think you have not that many experience with html and cascading style sheets (css).

Good luck with filling the rest of your pages.

Greetings,
Henrie

[Me59]

Glad I could help.
.....
I am a little bit of a perfectionist and I think you have not that many experience with html and cascading style sheets (css).

Good luck with filling the rest of your pages.

Greetings,
Henrie

U are right that my css and php is limited. however, my html and javascripting skills are quite sufficient. no need to wish me good luck

[Moon]

Hi this thread helped me but one thing I can't figure out is how to make the background a watermark so when you scroll the guestbook the background stays still. Is there a way to change that?

[Me59]

Hi this thread helped me but one thing I can't figure out is how to make the background a watermark so when you scroll the guestbook the background stays still. Is there a way to change that?

just append bgproperties=fixed to background image=whatever.jpg in the style.css but I am not entirely sure about the syntax

[Henrie]

The following should be placed in your style.css file (preferrably as the first item in your style.css file)

Code: Select all

body {	
	background-image: url(images/backgroundimage.gif);
	background-color: white;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
}

Here a summary of the possible values:
background-image: url(images/backgroundimage.gif); /* the url to your background image */
background-color: white; /* the background color of the page where no image is showm */
background-attachment: fixed; /* fixed = not scroll with page; scroll = scroll with page */
background-repeat: no-repeat; /* no-repeat = show background image ones; repeat-x; repeat-y; repeat */
background-position: center center; /* where should the background image be placed on screen; top left; top center; top right; center left; center center; center right; bottom left; bottom center; bottom right; x-% y-%; x-pos y-pos */

For more explanation visit the following link
http://www.w3schools.com/css/css_background.asp

Greetings Henrie