Change scrollbar colors

[Peggy]

html
{
scrollbar-3dlight-color:#701C46;
scrollbar-arrow-color:#701C46;
scrollbar-base-color:#701C46;
scrollbar-track-color:#701C46;
scrollbar-darkshadow-color:#701C46;
scrollbar-face-color:#701C46;
scrollbar-highlight-color:#701C46;
scrollbar-shadow-color:#701C46
}


Place the above code in the 'Additional CSS Definitions' box at the end of the main css style page. Replace #4169E1 with the colors of your choice.

NOTE: This is supported by IE only. It does not work with Firefox.

[Elsie]

ooh a handy tip :) thanks.


(oh and you have one color in your code and another mentioned in your post - but we forgive you! ;))

[Elsie]

and just a thought..... could yo do a quick rundown to let people know which bit does which? eg which line effects the bit you drag, which effects the top and bottom squares, etc.....

it took me a fair bit of trial and error to get the right bits the right colours! lol

[Elsie]

AND will this code work on any html document? ie for non vb sites?


AND AND to remove it from the styles (should one wish to do so) do you just take out the code again? i assume so......

[Peggy]

wooo weee thank god for multi-quote! lol



ooh a handy tip :) thanks.
(oh and you have one color in your code and another mentioned in your post - but we forgive you! ;))
thank you, lol. I was messing with both colors last night.



and just a thought..... could yo do a quick rundown to let people know which bit does which? eg which line effects the bit you drag, which effects the top and bottom squares, etc.....

it took me a fair bit of trial and error to get the right bits the right colours! lol
I don't know myself yet. I wanted to do this on my styles, so I did a search on colored scrollbars and found this. I put it on one of my new styles and it works. All the numbers are not the same, I just put them in there to show a color. But I'm still messing with it myself to figure out which does what. When I know, you'll know ;)




AND will this code work on any html document? ie for non vb sites?

AND AND to remove it from the styles (should one wish to do so) do you just take out the code again? i assume so......

nope, this code is for vB styles only. The code for regular html pages would be very different, I think.
and yes, to remove it from styles, just remove the code

[Elsie]

thanks! :D

after a bit of trial and error, i came up with this:


html
{
scrollbar-3dlight-color:#A1A1A1;
scrollbar-arrow-color:#000000;
scrollbar-base-color:#A1A1A1;
scrollbar-track-color:#C9C9C9;
scrollbar-darkshadow-color:#A1A1A1;
scrollbar-face-color:#A1A1A1;
scrollbar-highlight-color:#C9C9C9;
scrollbar-shadow-color:#C9C9C9
}

this produces a darker color (both shades of grey as it happens) for the scroll bar itself, and the "ends" which have the arrows (which i've made black), and a lighter shade for the "background" of the scroll bar (the "track").

i'm afraid i can't remember what the other bits are, but it looks right when it's done!! lol

hopefully someone can explain it better in due course, but that's a start.

[Noppid]

Doing this causes the HTML and or CSS to fail validation.

I don't care how cool it is, we shouldn't use IE only tags. But people will and there's not much we can do about it I guess. :/

So here's a tool to help you break your html. :D http://www.nutrocker.co.uk/scrollbarcolor.html

Here's the proof the tags don't exist.

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.nutrocker.co.uk%2Fs crollbarcolor.html

[Peggy]

wow. Oh well, it was a nice thought ;)

[Noppid]

It's up to the publisher. Some people could give a rats behind about validation. They only care that the page renders.

It's not a law. ;)

[Peggy]

yeah but I want to be compliant *straightens my halo* :D

[Elsie]

Doing this causes the HTML and or CSS to fail validation.
can someone explain what this means in practical terms, as it were? preferably in a simple way! lol

and does anyone know how to achieve the same effect so it *will* work in FF?

[Peggy]

no idea how to make it work in FF. This code is good in IE only.
You might try doing a google search. That's how I found this code

[Elsie]

yeah i want to find out how to do it for non VB sites anyway, so will see what else i can find.


some enlightenment on what "validation" is would be handy too...... :)

[Coder1]

There is no such thing as "HTML". There are HTML specifications. The pages you author need to follow a particular specification, or "flavor" of HTML.

You tell the browser which specification you adhere to by using a "doctype". It's a declaration you make just prior to the <html> tag.

The vBulletin system is written to the XHTML 1.0 Transitional doctype/specification. That means, only those tags which are within that specification should be used.

A document that is "valid" is one that adheres to the specification.

Q. What if I don't declare a doctype?
A. The browser will just "guess", and use its own internal defaults. This is very bad news particularly with IE, which is simply screwball about things. You'll wonder why your code "works" in one browser but not another.

Q. What if I use a non-standard tag, or something from another HTML specification (such as <center>)?
A. It will probably render fine. However, the danger is two-fold:

1. You don't really know, as the browser is rendering that tag however it likes, NOT in relation to a published specification.

2. The day is coming when the user will control what to do with non-compliant code, just as they can control whether to render graphics, styles, and scripts today. On that day, millions of pages break because the authors didn't care about validation.

[Elsie]

so am i right to sum that up as saying XHTML will be valid everywhere, but HTML won't?

[Noppid]

so am i right to sum that up as saying XHTML will be valid everywhere, but HTML won't?

No, it means that you need to look at the tag list for the two and see that they are basically the same and code to the subtle differences. If you are coding for vB use XHTML tags fromt he XHTML tags list examples.

Then you point a validator at your page to see if it is correct and it tells you what is not done right.

You can get the tag lists, examples and a place to validate your code here. http://www.w3schools.com/

Use the validator on a page you think is correct and see what it says. Look at the errors and fix them as necessary.

[Coder1]

Again, there isn't "HTML" or "XHTML". There is HTML 4.0 Strict, or XHTML 1.0 Transitional, etc.

Each is comprised of the tags, syntax, and properties which can be used within a document.

Part of the XHTML specification is that everything is lowercase. All HTML tags are uppercase.

So "<BODY>" is valid in an HTML document, invalid in an XHTML document.

XHTML specifications also state that all required properties must be present for any given tag. That means you must have the "alt" attribute in every image tag, for example.

In the context of this dicussion, you can't color the scrollbars in XHTML because there is simply no tags/properties for that in the XHTML specifications.

There aren't any in HTML, either... which is why it's an IE-only trick, and so wouldn't be used by anyone concerned with validation.

[Noppid]

Yeah, right, I know what you are talking about and don't get that. :p

No offense girls, but TG, dumb it down. I'm not trying to teach them the samantics, just where to get the tags they can use with vB and a place to see if they did it right when they use them.

[Peggy]

noppid... no offense taken, I think, lol.


uh Thomas, I hate to disagree with you on one of your points there, but... I have never used uppercase in my html tags. Neither did the instructor in the class I took, nor the html editor that I used when I first started out a few years ago. I've seen uppercase in html tags out there, but I've never used them nor was I taught to use them.

[Noppid]

noppid... no offense taken, I think, lol.


uh Thomas, I hate to disagree with you on one of your points there, but... I have never used uppercase in my html tags. Neither did the instructor in the class I took, nor the html editor that I used when I first started out a few years ago. I've seen uppercase in html tags out there, but I've never used them nor was I taught to use them.

I think dreamweaver code uses those caps in tags and it's usually html 4.01 transitional code. Very forgiving.

[Peggy]

ahha, I see. I've never used Dreamweaver, so I didn't know. Interesting...

[Coder1]

Am I being too technical, again? I didn't think so, but... I mean, the specs are the specs, and either documents conform or don't. That's all I was trying to explain.

[Noppid]

Am I being too technical, again? I didn't think so, but... I mean, the specs are the specs, and either documents conform or don't. That's all I was trying to explain.

You are such a geek. Yeah. Maybe too techy. :)

[Peggy]

But loveable ;)

[Elsie]

oh dumb it down for me, by all means!! i'm no wiser after either explanation tbh! lol

and like peggy i've always used lower case when writing code having been informed that either is acceptable (which i know you're all going to say isn't true!). i chose lower case cos it saves faffing about with caps lock or the shift key! lol

[Peggy]

LOL @ Elsie!

[Coder1]

Lowercase is acceptable, in fact required, in XHTML. The HTML specification(s), on the other hand, all specify uppercase. But, as you've discovered, browsers "forgive" code that isn't exactly right. The problem is, each browser may choose to forgive in a slightly different way, and that's when the problems arise.

[Peggy]

hmmmm... so does that mean that I've been coding xhtml all along and didn't know it?

[Coder1]

Probably not... there's more to it than that. And of course, you specify via the "doctype" what you're trying to do. Here's a great article on doctype (http://alistapart.com/stories/doctype/).

The next step is to memorize the standard itself, so you know which elements and attributes you can use. (Not Really.)

XHTML basically has these features:

1. lowercase

2. every tag must have a matching closing tag, or must "self-close".

This gives you tags like "<br />" for a line-break. The extra slash "closes" the tag, since having "<br></br>" just doesn't make any sense. One thing I had to learn was that paragraphs had to have a closing tag, something I never bothered with before:

<p>My paragraph... </p>


3. XHTML excludes style-related tags found in HTML, such as "<center>" and "<font>". You have to use CSS for all of that.

4. Tags must be complete. For example, you have to have a "<title>My Title</title>" element in the head section, the "<img>" tag has to have a "src" and an "alt", etc.

The best way to learn is to code your document, then validate it against an official validator, such as http://validator.w3.org/.

[Peggy]

oh wow... other than my doctype being outdated, I use all the rest of this code.

[Elsie]

i reckon i'm about half way there too :)

css is still a bit alien to me tho.

[Peggy]

css is fun! :D

[Elsie]

oh i don't doubt it - i just have no idea about it at the mo! lol

[Peggy]

There a couple of great tuts that I've been going over, I'd be glad to share if you'd like. I'll post them in a new sticky thread in the graphics discussion forum

[Elsie]

that'd be handy, thanks :)