Title: Color Scrollbars
Last modified: August 18, 2016

---

# Color Scrollbars

 *  [nieceye](https://wordpress.org/support/users/nieceye/)
 * (@nieceye)
 * [20 years, 12 months ago](https://wordpress.org/support/topic/color-scrollbars/)
 * I know tis question has been asked before but nothing helped me out. Where do
   I put the scrollbar code?
 * And when I put my scrollbar code in the header.php and removed the “DOC” tag,
   and then added a code to the end of my style sheet, it worked. But then it through
   off my stylesheet, and made my text look crazy. And then I switched the code 
   around (only having it in the header,then only having it in the stylesheet) and
   then nothing else worked. Can someone please help me?

Viewing 14 replies - 1 through 14 (of 14 total)

 *  [Lorelle](https://wordpress.org/support/users/lorelle/)
 * (@lorelle)
 * [20 years, 12 months ago](https://wordpress.org/support/topic/color-scrollbars/#post-222049)
 * Are you talking about changing the color in an iframe, div with overflow, or 
   in the browser itself?
 * All styles are kept in the `style.css` except if you are using a Theme that has
   styles related to the header only in the top of the `header.php` template file.
 *  Thread Starter [nieceye](https://wordpress.org/support/users/nieceye/)
 * (@nieceye)
 * [20 years, 12 months ago](https://wordpress.org/support/topic/color-scrollbars/#post-222059)
 * huh? I dont get it, I am talking about the scrollbar in my index file. But when
   I put my color scrollbar their it either doesn’t work or changes my text.
 *  [vkaryl](https://wordpress.org/support/users/vkaryl/)
 * (@vkaryl)
 * [20 years, 12 months ago](https://wordpress.org/support/topic/color-scrollbars/#post-222063)
 * A color scrollbar will only work in IE in any case…. as to where it belongs, 
   I think I’ve seen the color setup in CSS. I don’t think you need to include anything
   anywhere else, though I certainly could be wrong about that!
 *  [Lorelle](https://wordpress.org/support/users/lorelle/)
 * (@lorelle)
 * [20 years, 12 months ago](https://wordpress.org/support/topic/color-scrollbars/#post-222066)
 * And as a rule, `index.php` template files do not feature scroll bars. WordPress
   Themes that use iframes in their design do. Also, most browsers have scroll bars
   and there are ways to control the color of a browser’s scroll bar if you wanted
   to do so, though it is highly NOT recommended.
 * Please open your `index.php` template file in the theme you are using, and look
   to see if the area you are referring to is in a DIV or CLASS or IFRAME. Then 
   we might be able to help you more specifically.
 *  [merf425](https://wordpress.org/support/users/merf425/)
 * (@merf425)
 * [20 years, 12 months ago](https://wordpress.org/support/topic/color-scrollbars/#post-222068)
 * If you just want the colored scrollbar on a page (not in an iframe or set-height
   div layer), then you have to put the code in the html class in your stylesheet.
 * At least that’s what I had to do when I was using iframes with WP a while ago.
 *  Thread Starter [nieceye](https://wordpress.org/support/users/nieceye/)
 * (@nieceye)
 * [20 years, 12 months ago](https://wordpress.org/support/topic/color-scrollbars/#post-222073)
 * What html class in my style sheet? I didnt see anything about HTML class.
 * And in my index files their are tables and divs. But I am not trying to change
   the scroll bars on any of them, because the template stretches when needed. I
   am trying to change the regular scrollbar, like the one you see to the right 
   of this page.
 *  [kickass](https://wordpress.org/support/users/kickass/)
 * (@kickass)
 * [20 years, 12 months ago](https://wordpress.org/support/topic/color-scrollbars/#post-222076)
 * I think you need to learn about css styles and how they work. The change needs
   to be made in the style.css file (or whatever the .css file is called in the 
   theme you’re using.)
 *  Thread Starter [nieceye](https://wordpress.org/support/users/nieceye/)
 * (@nieceye)
 * [20 years, 12 months ago](https://wordpress.org/support/topic/color-scrollbars/#post-222081)
 * I already know how to use stylesheets, and I have been using them for about a
   year now, and I have not ran into anything called “html class”. And I know how
   style sheets work. All I am asking “how do I make my scrollbars color”. If I 
   am supposed to be putting it on the stylesheet, would you mind telling me where?
 *  [vkaryl](https://wordpress.org/support/users/vkaryl/)
 * (@vkaryl)
 * [20 years, 12 months ago](https://wordpress.org/support/topic/color-scrollbars/#post-222085)
 * The one style.css that I saw with this included had it right after the body element.
   That’s all I really know about it…. I have no clue whether it worked or not, 
   since it only shows in IE and I never use IE.
 * By “html class”, I think the poster was meaning this element included in some
   stylesheets: `html, body {}`
 *  [oriecat](https://wordpress.org/support/users/oriecat/)
 * (@oriecat)
 * [20 years, 12 months ago](https://wordpress.org/support/topic/color-scrollbars/#post-222089)
 * [http://www.javascriptkit.com/howto/scrollbarcolor.shtml](http://www.javascriptkit.com/howto/scrollbarcolor.shtml)
 *  [jonimueller](https://wordpress.org/support/users/jonimueller/)
 * (@jonimueller)
 * [20 years, 12 months ago](https://wordpress.org/support/topic/color-scrollbars/#post-222106)
 * I usually put the code in an embedded style in the document, not in the stylesheet.
   But either way, the code is the same:
 * **Embedded in the HTML page**
 * `<STYLE TYPE="text/css">
    <!-- body { scrollbar-face-color: #999; scrollbar-shadow-
   color: #000; scrollbar-highlight-color: #fff; scrollbar-3dlight-color: #fff; 
   scrollbar-darkshadow-color: #999; scrollbar-track-color: #999; scrollbar-arrow-
   color: #000; } --> </STYLE>
 * **In the HTML class in a stylesheet**
 * `html {
    scrollbar-face-color: #999; scrollbar-shadow-color: #000; scrollbar-
   highlight-color: #fff; scrollbar-3dlight-color: #fff; scrollbar-darkshadow-color:#
   999; scrollbar-track-color: #999; scrollbar-arrow-color: #000; }
 * Here’s an entire [scrollbar tutorial](http://www.webdevelopersnotes.com/tips/html/colored_custom_scrollbar_tutorial.php3).
 *  [merf425](https://wordpress.org/support/users/merf425/)
 * (@merf425)
 * [20 years, 12 months ago](https://wordpress.org/support/topic/color-scrollbars/#post-222130)
 * Yes, what I meant was to put something like this in your stylesheet/doc head:
   `
   body, html { scrollbar-face-color: #color; scrollbar-track-color: #color; scrollbar-
   arrow-color: #color; scrollbar-highlight-color: #color; scrollbar-3dlight-color:#
   color; scrollbar-shadow-color: #color; scrollbar-darkshadow-color: #color; }
 *  Thread Starter [nieceye](https://wordpress.org/support/users/nieceye/)
 * (@nieceye)
 * [20 years, 12 months ago](https://wordpress.org/support/topic/color-scrollbars/#post-222179)
 * ^Thank you I got it to work 😀
 *  Thread Starter [nieceye](https://wordpress.org/support/users/nieceye/)
 * (@nieceye)
 * [20 years, 10 months ago](https://wordpress.org/support/topic/color-scrollbars/#post-222723)
 * thanks i got it to work 😉

Viewing 14 replies - 1 through 14 (of 14 total)

The topic ‘Color Scrollbars’ is closed to new replies.

## Tags

 * [scrollbars](https://wordpress.org/support/topic-tag/scrollbars/)

 * 14 replies
 * 7 participants
 * Last reply from: [nieceye](https://wordpress.org/support/users/nieceye/)
 * Last activity: [20 years, 10 months ago](https://wordpress.org/support/topic/color-scrollbars/#post-222723)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics
