Scroll Bar Colours! [Archive]

iRoss

17-01-2005, 08:58 PM

Hey,

Does Anyone Know How 2 Change The Colour Of Scroll Bars? All I Know Is That It's CSS And Thats It, So if Anyone Knows The Code, Then Please Leave It Under Here =) (Or Website) x)

Thanks

Ross :)

Forz

17-01-2005, 09:13 PM

Put the following into your coding, and just change the color codes to what you want them to be..

<style type="text/css">

</style>

iRoss

17-01-2005, 09:15 PM

cool, thanks mate =)

-JT-

17-01-2005, 09:22 PM

if you do your site in flash you can get really intersting scroller bards xD

iRoss

17-01-2005, 09:26 PM

Where Do You Place That? Just In The Body? :s

Forz

17-01-2005, 09:29 PM

I usually put it before/after the body or in the head..

iRoss

17-01-2005, 09:31 PM

doesn't seem 2 be working for me...

Forz

17-01-2005, 09:48 PM

This might just make it worse, it's actually pretty simple, but here is a bit of coding I just copied from my website, so maybe it will help, it has a lot of other stuff in it, just ignore it though, and look where the scrollbar colors are at, I have them between Head and Body..

<html>
<head>
<title>HabboCorner.com - HabboHotel.com Fansite</title>
</head>

<style type=text/css>
A:link {
COLOR: #000000; TEXT-DECORATION: none
}
A:visited {
COLOR: #000000; TEXT-DECORATION: none
}
A:active {
COLOR: #000000; TEXT-DECORATION: none
}
A:hover {
COLOR: #0099CC; TEXT-DECORATION: underline
}
</style>
<style type="text/css">

body {background-color: #e7e3e7}
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
color: #000099;
}
</style>

<body style="background-color: #E1E1E1">

iRoss

17-01-2005, 09:54 PM

nope, still not working =D but thanks for trying! isnt there a site where it does it for u?!

Forz

17-01-2005, 09:59 PM

Not sure about doing it for you, but here is one link, but all it shows is pretty much same as I said, but you can check it out if you wish: http://www.ssi-developer.net/css/scrollbar-colours.shtml

jamie5k

17-01-2005, 10:02 PM

add it b4 the head code m8 it shud work

COOLK1D4

17-01-2005, 11:52 PM

:wav:
--------------------------------------------------------------------------------

Directions:

Just add the following stylesheet into the <head> section of your page:

<style type="text/css">

</style>

Three of the most commonly used properties have a color value pre-assigned. Obviously, the other properties can too be manipulated.

Important note
If your page uses a doctype that triggers a "Strict" mode in IE, change "BODY" in the above code to "HTML" instead. This is required in order for the effect to work.

:wav:

Arcanum

18-01-2005, 06:40 AM

The code goes before the head where you're telling the browser what type of document the website is. You need to use HTML color codes for it to work as well by the way ;)

iRoss

18-01-2005, 07:29 AM

ok, i know it goes in the HTML!!! i will try it tonight thanks =)

-JT-

18-01-2005, 07:45 AM

dude, if you give me the page i will do it for you:)

iRoss

18-01-2005, 03:36 PM

i will if i cant do it =)

Homosexual

19-01-2005, 07:47 PM

Here is the CCS for it:

/* Defaults */
body {
text-align: center;
font-family: verdana, arial, tahoma, sans-serif;
font-size: 11px;
color: #000;
background: #dcdcdc;
padding: 0;
margin: 15px 0 5px;
}

form {
margin: 0;
padding: 0;
}

/* Links */
a:link {
color: #000099;
background: inherit;
text-decoration : none;
padding : 0;
margin : 0;
}
a:visited {
color: #000099;
background : inherit;
text-decoration : none;
}
a:hover {
color: #000000;
background : #f5f5f5;
text-decoration : underline;
}
a:active {
color: #999999;
background : inherit;
text-decoration : none;
}

/* Outer layer */

#outer {
text-align: left;
background: #fcfefc;
color: inherit;
border: 1px solid #000000;
margin: 0 auto;
padding: 0;
width: 760px;
}

/* Header */

.header {
background: #fcce32;
}

.logolink {
padding: 6px 3px;
}

.logolink a {
background: inherit;
}

.hdr-links {
width: 230px;
text-align: center;
font-size : 10px;
padding : 0;
margin: 0;
}

a.hdrnav:link {
color: #000099;
background: inherit;
text-decoration : none;
font-size : 10px;
padding : 0;
margin : 0;
}
a.hdrnav:visited {
color: #000099;
background : inherit;
text-decoration : none;
}
a.hdrnav:hover {
color: #000;
background : #fff;
text-decoration : underline;
}
a.hdrnav:active {
color: #999;
background : inherit;
text-decoration : none;
}

.hdr-links .access {
text-decoration : underline;
color : #000;
background : inherit;
}

/* Top Nav Bar */

.top-nav {
height: 25px;
background: #c5c6ac;
color: inherit;
border: solid #000000;
border-width: 1px 0;
}
.top-nav-inner {
padding: 5px 10px;
}
.top-nav-inner a:link {
color: #000000;
background: inherit;
font-weight: bold;
text-decoration: none;
}
.top-nav-inner a:visited {
color: #000000;
background: inherit;
font-weight: bold;
text-decoration: none;
}
.top-nav-inner a:hover {
background: inherit;
color: #555555;
font-weight: bold;
text-decoration: underline;
}
.top-nav-inner a:active {
color: #000000;
background: inherit;
font-weight: bold;
text-decoration: underline;
}

/* Image Bar */

.image-bar {
clear:both;
}

.title-img {
border: 1px solid #000;
color: #ffffff;
background: #343234;
padding: 0 0 0 10px;
}

.section-title {
font-size: 16px;
font-weight: bold;
font-family: verdana, arial, tahoma, sans-serif;
}

.graphic-img {
border: 1px solid #000000;
}

.blank-img {
border: 1px solid #000000;
background: #fcce32;
}

/* Content Section */

.content {
padding: 0 4px 4px 4px;
margin: 0;
}

.left-col {
border: 1px solid #000000;
background: #fcce32;
width: 145px;
}

.left-nav {
margin: 3px;
}

.lnav-hdr {
background: #c5c6ac;
color: #000000;
font-family: verdana, tahoma, arial, sans-serif;
font-size: 11px;
font-weight: bold;
border-bottom: 1px solid #000000;
margin: 0;
padding: 3px 5px;
}

.left-nav p {
font-family: verdana, arial, tahoma, sans-serif;
font-size: 11px;
line-height: 14px;
margin:5px;
}

.left-nav .access {
text-decoration : underline;
color : #000000;
background : inherit;
}

a.lhdr:link {
color: #000000;
background: inherit;
text-decoration : none;
font-size : 10px;
padding : 0;
margin : 0;
font-weight: bold;
text-transform: uppercase;
}
a.lhdr:visited {
color: #000000;
background : inherit;
text-decoration : none;
font-weight: bold;
}
a.lhdr:hover {
color: #000;
background : #fcfefc;
text-decoration : underline;
}
a.lhdr:active {
color: #555;
background : inherit;
text-decoration : none;
}

a.nav:link {
color: #000099;
background: inherit;
text-decoration : none;
font-size : 10px;
padding : 0;
margin : 0;
}
a.nav:visited {
color: #000099;
background : inherit;
text-decoration : none;
}
a.nav:hover {
color: #000;
background : #fcfefc;
text-decoration : underline;
}
a.nav:active {
color: #999;
background : inherit;
text-decoration : none;
}

/* Main content box */
.content-box {
padding: 0;
margin: 0;
}

/* right content box */
.rhcol {
float: right;
width: 160px;
margin: 0 0 10px 15px;
background: #fcfefc;
color: #000000;
}
.rhcont {
border-left: 1px solid #000000;
border-bottom:3px solid #000000;
}
.rnav-hdr {
background: #c5c6ac;
color: #000000;
font-family: verdana, tahoma, arial, sans-serif;
font-size: 12px;
font-weight:bold;
border-bottom: 1px solid #000;
border-left: 2px solid #000000;
margin: 3px 0;
padding: 2px;
}

/* main content area */

.content-title {
margin: 5px 10px 15px;
font-size: 14px;
text-decoration: underline;
}

.content-box .cont {
margin: 10px 10px 15px 10px;
font-size: 11px;
line-height: 15px;
}

.content-box .cont-list {
margin: 2px 10px 5px 10px;
}

.content-box .sub-hdr {
margin: 2px 10px 10px;
font-size: 12px;
text-decoration: underline;
}

/* Bottom footer box */

.footer-col {
margin: 0 0 0 4px;
}

.footer-box {
border: 1px solid #000000;
background:#343234;
font-family: verdana, arial, tahoma, sans-serif;
font-size: 11px;
color:#ffffff;
padding: 0 0 0 15px;
}

.footer-box .cont1 {
margin: 8px 10px 5px 5px;
font-size: 11px;
line-height: 15px;
}
.footer-box .cont2 {
margin: 2px 10px 15px 5px;
font-size: 11px;
line-height: 15px;
}

.footer-box input {
font-family: verdana, arial, tahoma, sans-serif;
font-size: 11px;
}

/* Copyright layer */

.copyright {
background: #c5c6ac;
font-family: verdana, arial, tahoma, sans-serif;
font-size: 10px;
font-weight: bold;
padding: 6px;
border: solid #000000;
border-width: 1px 0 0;
}

.rh-ad {
padding: 10px 0;
}

/* Terms of use on front page */
.tou {
margin: 0 0 0 10px;
}

/* for templates info */
.temp-lh {
float : left;
width : 100px;
margin : 0;
padding : 2px 10px 2px 0;
text-align : left;
}
.temp-rh {
margin : 0;
padding : 2px 0;
text-align : left;
}
.date {
font-size : 10px;
color : #787d63;
background : inherit;
}
.temp-list ul {
font-size : 11px;
margin : 0;
padding : 0;
list-style-type : none;
}
.temp-list {
padding : 0 0 0 15px;
}

/* small*/
small.fsize {
font-size : 9px;
color : #999999;
background : inherit;
}

.code {
color : #663300;
background : #eeeeee;
font-family : verdana, arial, sans-serif;
font-size : 11px;
line-height : 20px;
padding : 4px 10px;
margin : 10px 20px;
border : 1px dashed #999999;
}

/* Search form on front page */

.search-form {
color: #000;
background: #c5c6ac;
padding: 5px;
margin: 0px 0 10px 30px;
border: 1px solid #333333;
width:465px;
text-align: center;
white-space: nowrap;
}

/* Search forms on Search page */

.adv-search {
margin: 0 0 0 15px;
}

/* Tool Tip */
.tip {
cursor : help;
border-bottom : 1px dashed #555555;
}

/* ADVERTISEMENTS */
/* container div is 'id=adspace' */
#adspace {
background: inherit;
}
.ads {
background: inherit;
margin: 5px 0 15px 4px;
font-size: 11px;
padding: 5px;
border: solid #555;
border-width: 1px 0 0 1px;
}
.ads a:link { font-size: 11px; }

place this in the head:
<style type="text/css">

</style>

iRoss

19-01-2005, 07:54 PM

Thanks I Have Done It Now =) :D

Homosexual

19-01-2005, 07:55 PM

Whats the forum/site that its on ? :P

iRoss

19-01-2005, 07:59 PM

i admit , i lied... james is doing it 4 me =D

Want to hide these adverts? Register an account for free!