Page 1 of 1

scrollbar style

Posted: Wed Dec 30, 2009 9:02 pm
by jaap
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>
<!--
BODY
{ color:black;
background-color:#a0a0a0;
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;
}
-->
</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>
<!--
BODY
{ color:black;
background-color:#a0a0a0;
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;
}
-->
</STYLE>

<script type="text/javascript"><!--
function openSmiley()
{
w=window.open("smileys.php", "smileys", "fullscreen=no,toolbar=no,status=no,menubar=no,scrollbars=yes,resizable=yes,directories=no,location=no,width=500,height=300");
if(!w.opener)
{
w.opener=self;
}
}
//-->

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.

Posted: Wed Dec 30, 2009 11:54 pm
by Henrie
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 :evil:
Luckily I use Firefox that (just like Opera and Safari and many other browsers) follows css guidelines and do not display the colored scrollbars :D

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

Posted: Thu Dec 31, 2009 6:52 am
by jaap
Hi Henrie,
That works except the last part of your answer.
Where to put the backgroundcolor lines ?
Jaap

Posted: Thu Dec 31, 2009 8:12 am
by Henrie
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

Posted: Thu Dec 31, 2009 8:37 am
by jaap
Thanks Henrie, that's it. Great work.
[ a drink should be on your account now :D ]
Jaap.

Posted: Thu Dec 31, 2009 8:41 am
by Henrie
Hallo Jaap,

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

viewtopic.php?p=12540#12540

Groeten,
Henrie