scrollbar style

jaap · Post by **jaap** » Wed Dec 30, 2009 9:02 pm

Version of script: 1.7

Hi Henrie / Klemen ,

Last request if I may.
I want to style the scrollbar of the guestbook page and the sign page.

Have this code :

<STYLE>

</STYLE>

and added it to the head of the overall_header.php like this :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo $settings['gbook_title']; ?></title>
<meta http-equiv="Content-Type" content="text/html;charset=<?php echo $lang['enc']; ?>" />
<STYLE>

</STYLE>

<script type="text/javascript">

But now only the scrollbar of the message field on the sign page is styled now and not the scrollbar of the page.

Is it possible ?

Jaap.

Henrie · Post by **Henrie** » Wed Dec 30, 2009 11:54 pm

Hello Jaap,

Please remove that style code from the overall_header.php file.

Style code belongs in the style.css file.

I hope that you realise that the scrollbar style is a Microsoft only thing. It is not an official css-style. So you made me start Internet Explorer just to check if the following code would work

Luckily I use Firefox that (just like Opera and Safari and many other browsers) follows css guidelines and do not display the colored scrollbars

Add the following code to the style.css file if you want the colored scrollbars.

Code: Select all

html {
	scrollbar-face-color:#903030;
	scrollbar-arrow-color:#FFFFFF;
	scrollbar-track-color:#C0B0B0;
	scrollbar-shadow-color:rgb(0,0,0);
	scrollbar-highlight-color:rgb(0,0,0);
	scrollbar-3dlight-color:#808080;
	scrollbar-darkshadow-Color:#202020;
}

Place it before directly after the /*------HEADER------*/ and before the body {...} because that is the place where it logically belongs.

The
color:black; should be changed in the existing body {...; color:#003399;} style,
background-color:#a0a0a0; should be added to the body {...} style, it is not present yet.

Greetings,
Henrie

jaap · Post by **jaap** » Thu Dec 31, 2009 6:52 am

Hi Henrie,
That works except the last part of your answer.
Where to put the backgroundcolor lines ?
Jaap

Henrie · Post by **Henrie** » Thu Dec 31, 2009 8:12 am

Hallo Jaap,

The default styles for body in the style.css file are:

Code: Select all

body{margin:0; padding:0; background-image:url(images/bg.png); background-repeat:repeat-x; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; color:#003399;}

You should change it to:

Code: Select all

body{margin:0; padding:0; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; color:black; background-color:#a0a0a0;}

The background-color was there, you just did not see it because you probably did not remove the style for the background-image. Background-images are displayed over the background-color. Because i now removed the background-image style, i also removed the background-repeat style because it only has to be used when the background-image is used.

Please read more about using css-styles. It really is necessary knowledge when making websites these days.
A good site is http://www.w3schools.com/css/default.asp
A dutch tutorial (a bit outdated though) is http://www.handleidinghtml.nl/css/inhoud-css.html

Greetings,
Henrie

jaap · Post by **jaap** » Thu Dec 31, 2009 8:37 am

Thanks Henrie, that's it. Great work.
[ a drink should be on your account now

]
Jaap.

Henrie · Post by **Henrie** » Thu Dec 31, 2009 8:41 am

Hallo Jaap,

You were writing a message at the same time as i was

viewtopic.php?p=12540#12540

Groeten,
Henrie