scrollbar background

bugmenot123bugmenot123
edited July 2007 in Style Reviews
How can I make the scrollbar background have this type of pattern - http://userstyles.org/styles/1586#review-2755
? (in the screenshot)
«1

Comments

  • JasonBarnabeJasonBarnabe
    Are you sure that there's really a pattern there and it's not an artifact of the image being resized?
  • bugmenot123bugmenot123
    No, I'm pretty sure that's a pattern in the scrollbar background...
  • JasonBarnabeJasonBarnabe
    I don't see it..
  • ChoGGiChoGGi
    edited July 2007
    scrollbar>slider{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEWzs6f///++XK1+AAAAGUlEQVR4XnXIMQ0AAACDMPyb3gxA0qswVX1+vw/xW46qyAAAAABJRU5ErkJggg==")!important}
  • bugmenot123bugmenot123
    Thanks Choggi, that's exactly what I was looking for
  • bugmenot123bugmenot123
    Is there any way to change the bar color and the color of the 2 arrow buttons also?
  • ChoGGiChoGGi
    scrollbar>scrollbarbutton,scrollbar>slider>thumb{-moz-appearance:none!important} scrollbar>scrollbarbutton[sbattr="scrollbar-up-top"]{background:red!important} scrollbar>scrollbarbutton[sbattr="scrollbar-up-top"]:hover{background:#FFCCCC!important} scrollbar>scrollbarbutton[sbattr="scrollbar-up-top"]:active{background:darkred!important} scrollbar>scrollbarbutton[sbattr="scrollbar-down-bottom"]{background:green!important} scrollbar>scrollbarbutton[sbattr="scrollbar-down-bottom"]:hover{background:lightgreen!important} scrollbar>scrollbarbutton[sbattr="scrollbar-down-bottom"]:active{background:#339999!important} scrollbar>slider>thumb{background:blue!important} scrollbar>slider[curpos="0"]>thumb{background:lightblue!important} scrollbar>slider:hover>thumb{background:#CCFFFF!important} scrollbar>slider:active>thumb{background:darkblue!important}
  • bugmenot123bugmenot123
    edited July 2007
    Is there any way to get the arrows back on the two buttons and still be able to change the color of them?
  • ChoGGiChoGGi
    i could use imgs to add arrows. are there some icons you want me to use or what colour do you want?
  • bugmenot123bugmenot123
    I just want it like the default Firefox arrows (dark grey or black)
  • ChoGGiChoGGi
    then what colour do you want the background?
  • bugmenot123bugmenot123
    How about black background with white arrows
  • ChoGGiChoGGi
    edited July 2007
    scrollbar>scrollbarbutton{-moz-appearance:none!important} /*left*/ scrollbar>scrollbarbutton[sbattr="scrollbar-up-top"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQAAAAB+DmFKAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGElEQVR4nGNggAEmBgY2BgY+MGIDc2EAAANSAC3dD9LgAAAAAElFTkSuQmCC")!important} scrollbar>scrollbarbutton[sbattr="scrollbar-up-top"][disabled="true"]{background-image:url("data:image/gif;base64,R0lGODdhDAAMAIACAAAAAH9/fywAAAAADAAMAAACEYSPqcsaDcJjcq4KJYy7+1QAADs=")!important} /*right*/ scrollbar>scrollbarbutton[sbattr="scrollbar-down-bottom"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQAAAAB+DmFKAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGElEQVR4nGNggAEWBgY2BgZ2MGIDc2EAAAKZACNae8QFAAAAAElFTkSuQmCC")!important} scrollbar>scrollbarbutton[sbattr="scrollbar-down-bottom"][disabled="true"]{background-image:url("data:image/gif;base64,R0lGODdhDAAMAIACAAAAAH9/fywAAAAADAAMAAACEISPqcsZbcJrcq5K7YW8twIAOw==")!important} /*up*/ scrollbar[orient="vertical"]>scrollbarbutton[sbattr="scrollbar-up-top"]{background-image:url("data:image/gif;base64,R0lGODdhDAAMAIABAAAAAP///ywAAAAADAAMAAACD4SPqcvNERqEa06Hs96nAAA7")!important} scrollbar[orient="vertical"]>scrollbarbutton[sbattr="scrollbar-up-top"][disabled="true"]{background-image:url("data:image/gif;base64,R0lGODdhDAAMAIACAAAAAH9/fywAAAAADAAMAAACD4SPqcvNERqEa06Hs96nAAA7")!important} /*down*/ scrollbar[orient="vertical"]>scrollbarbutton[sbattr="scrollbar-down-bottom"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQAAAAB+DmFKAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFElEQVR4nGNgQAXyDQz8DAxsKGIADWMAtXO0bMkAAAAASUVORK5CYII=")!important} scrollbar[orient="vertical"]>scrollbarbutton[sbattr="scrollbar-down-bottom"][disabled="true"]{background-image:url("data:image/gif;base64,R0lGODdhDAAMAIACAAAAAH9/fywAAAAADAAMAAACD4SPqcvNERqEa06Hs96nAAA7")!important}
  • bugmenot123bugmenot123
    edited July 2007
    ♣
  • ChoGGiChoGGi
    @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); scrollbar>scrollbarbutton,scrollbar>slider>thumb{-moz-appearance:none!important} /*left*/ scrollbar>scrollbarbutton[sbattr="scrollbar-up-top"],scrollbar>scrollbarbutton[sbattr="scrollbar-up-bottom"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAWklEQVR4Xo3PwQnAIBBEUW9pxVY8pYb0kHrSgQVYQGqwEyEgTJY5jLJ4cOWf3sJiCFi/HajoloPD4nBBcOFDJTQuCMacyDO8goIooN9IutEGMEH0kPBY+x/0/V+XsrZaOH+gAAAAAElFTkSuQmCC")!important} scrollbar>scrollbarbutton[sbattr="scrollbar-up-top"][disabled="true"],scrollbar>scrollbarbutton[sbattr="scrollbar-up-bottom"][disabled="true"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAAAAABzHgM7AAAARklEQVR4XoXHMQ2AQBBFwdfgYl1sgQEMoIT6WkoMrIoLId8g2fwepht+1FMYC5Jwt7ukiWhq63CuzhkOe0piYnQCI4/k0wvbMRjCr08AhgAAAABJRU5ErkJggg==")!important} /*right*/ scrollbar>scrollbarbutton[sbattr="scrollbar-down-bottom"],scrollbar>scrollbarbutton[sbattr="scrollbar-down-top"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAWElEQVR4XpXPwQmAQBBD0bnZyrYyJ2uwB+uxAwuwAGtIJwuC8IUF3WEQxOT4DiFmvPcbnAXPUDBaMtQHnDkCFDbu7BFWRnoCGLWBOJg6KIwP+Yc40a+DuReu4rK2sNhcnQAAAABJRU5ErkJggg==")!important} scrollbar>scrollbarbutton[sbattr="scrollbar-down-bottom"][disabled="true"],scrollbar>scrollbarbutton[sbattr="scrollbar-down-top"][disabled="true"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAAAAABzHgM7AAAARklEQVR4Xn3HMQ2AMBBA0b/goi5uwAAGUMLMyoiBU9EQ8g2ScOnatz3m4oiRhjrSUWOv2C7Vu3Kuqlboms/2J1FZKOSbzH08dRjCj+3BUwAAAABJRU5ErkJggg==")!important} /*up*/ scrollbar[orient="vertical"]>scrollbarbutton[sbattr="scrollbar-up-top"],scrollbar[orient="vertical"]>scrollbarbutton[sbattr="scrollbar-up-bottom"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAU0lEQVR4XpXPsQmAMAAF0XSuklVSOYM7OI8bOIADOEM2CQjCsxFCIoJy5XF8fghe+CB2TE8xg8PQiwRyWyQqchULFWdfbEalKW6i9fkjKu2C/88vrNeytvNKkG4AAAAASUVORK5CYII=")!important} scrollbar[orient="vertical"]>scrollbarbutton[sbattr="scrollbar-up-top"][disabled="true"],scrollbar[orient="vertical"]>scrollbarbutton[sbattr="scrollbar-up-bottom"][disabled="true"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAAAAABzHgM7AAAAQ0lEQVR4XoWLsQkAIAwE07iFW1i4gAs4ibWtpQs4RRD5BRXk04lX3fGJfOhI5hmYjhGAYXpglhuLS4tqh+KrmCpfnmw8ShjCQsdTpgAAAABJRU5ErkJggg==")!important} /*down*/ scrollbar[orient="vertical"]>scrollbarbutton[sbattr="scrollbar-down-bottom"],scrollbar[orient="vertical"]>scrollbarbutton[sbattr="scrollbar-down-top"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAU0lEQVR4Xo3PwQmAMBQE0dxsJa14sgZ7sB47sAALsIZ0EhCE5zGYL+jucRjYTcl7v0BWASUa2dYbI9hNKkoDqxau3gBPo8ES5y7gNMRVB+bfB2NvPHiytperyDsAAAAASUVORK5CYII=")!important} scrollbar[orient="vertical"]>scrollbarbutton[sbattr="scrollbar-down-bottom"][disabled="true"],scrollbar[orient="vertical"]>scrollbarbutton[sbattr="scrollbar-down-top"][disabled="true"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAAAAABzHgM7AAAARUlEQVR4Xn2NuwkAIRQEL7ELu3iBDVwDVmJsamgDVvEQmQYF8Rc50S7LsN8Tq0A5Na4kkJzOKTBoa+GS5PY9VLNb5n+/d85JGMKr8U+VAAAAAElFTkSuQmCC")!important}
  • eartherearther
    Very timely discussion. I gave the Gutsy live disk a run last night (to take a peek before upgrading) and the Firefox slider took on a different color from my custom theme than Feisty does. So I'll want to do a little adjustment once I finally do the upgrade (hopefully soon . . . need to build up the courage to take the leap).
  • SuPeRHeRoSuPeRHeRo
    how can i auto-hide scrollbars of all? i am looking for here and google but nothing to figure out!
  • ChoGGiChoGGi
    this?
    @namespace url(http://www.w3.org/1999/xhtml); *{overflow:hidden!important}
  • bugmenot123bugmenot123
    This stopped working a long time ago. I just never really cared enough until now.

    It still works in my old Stylish Manage Styles box.

    How do I fix it so that it works on the main Firefox window again?
    I did the "replace USER_SHEET with AGENT_SHEET" thing.
  • ChoGGiChoGGi
    I did the "replace USER_SHEET with AGENT_SHEET" thing.
    you don't need to do that on stylish 1.*
    which version of stylish/firefox do you use?

    this is what i use on ff3 (should work on any scrollbars)
    http://userstyles.org/styles/1038
  • bugmenot123bugmenot123
    I use Stylish 0.5.9 on FF 3.0.11

    scrollbar>slider{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAQMAAABJtOi3AAAABlBMVEWzs6f///++XK1+AAAAHklEQVR4Xq2MsQkAAACC/P/p6oMaQnASQaFrzd4/A+29P8F48EaAAAAAAElFTkSuQmCC")!important}

    scrollbar>scollbarbutton,scrollbar>slider>thumb{-moz-appearance:none!important}

    scrollbar>slider>thumb{background:black!important}
    scrollbar>slider[curpos="0"]>thumb{background:black!important}
    scrollbar>slider:active>thumb{background:darkorange!important}

    scrollbar>scrollbarbutton{-moz-appearance:none!important}
    /*left*/
    scrollbar>scrollbarbutton[sbattr="scrollbar-up-top"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQAAAAB+DmFKAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGElEQVR4nGNggAEmBgY2BgY+MGIDc2EAAANSAC3dD9LgAAAAAElFTkSuQmCC")!important}
    scrollbar>scrollbarbutton[sbattr="scrollbar-up-top"][disabled="true"]{background-image:url("data:image/gif;base64,R0lGODdhDAAMAIACAAAAAH9/fywAAAAADAAMAAACEYSPqcsaDcJjcq4KJYy7+1QAADs=")!important}
    /*right*/
    scrollbar>scrollbarbutton[sbattr="scrollbar-down-bottom"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQAAAAB+DmFKAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGElEQVR4nGNggAEWBgY2BgZ2MGIDc2EAAAKZACNae8QFAAAAAElFTkSuQmCC")!important}
    scrollbar>scrollbarbutton[sbattr="scrollbar-down-bottom"][disabled="true"]{background-image:url("data:image/gif;base64,R0lGODdhDAAMAIACAAAAAH9/fywAAAAADAAMAAACEISPqcsZbcJrcq5K7YW8twIAOw==")!important}
    /*up*/
    scrollbar[orient="vertical"]>scrollbarbutton[sbattr="scrollbar-up-top"]{background-image:url("data:image/gif;base64,R0lGODdhDAAMAIABAAAAAP///ywAAAAADAAMAAACD4SPqcvNERqEa06Hs96nAAA7")!important}
    scrollbar[orient="vertical"]>scrollbarbutton[sbattr="scrollbar-up-top"][disabled="true"]{background-image:url("data:image/gif;base64,R0lGODdhDAAMAIACAAAAAH9/fywAAAAADAAMAAACD4SPqcvNERqEa06Hs96nAAA7")!important}
    /*down*/
    scrollbar[orient="vertical"]>scrollbarbutton[sbattr="scrollbar-down-bottom"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQAAAAB+DmFKAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFElEQVR4nGNgQAXyDQz8DAxsKGIADWMAtXO0bMkAAAAASUVORK5CYII=")!important}
    scrollbar[orient="vertical"]>scrollbarbutton[sbattr="scrollbar-down-bottom"][disabled="true"]{background-image:url("data:image/gif;base64,R0lGODdhDAAMAIACAAAAAH9/fywAAAAADAAMAAACD4SPqcvNERqEa06Hs96nAAA7")!important}
  • ChoGGiChoGGi
    that works fine for me (stylish 5.9 ff3.0.11)
  • bugmenot123bugmenot123
    hmmm...
    I wonder why it only works on the Manage Styles window for me.
    I dont have anything interfering. For any other window, its just just the plain default scrollbar
  • ChoGGiChoGGi
    if you did the "replace USER_SHEET with AGENT_SHEET" thing then it should work fine (you do need to open a new window)
  • bugmenot123bugmenot123
    Ok. I did it again, and it worked after a browser restart.
    I just realized I posted this same thread exactly a year ago. LOL http://forum.userstyles.org/comments.php?DiscussionID=1369
    I must be losing my memory.
    So, it works, but its a lot smaller. How can I make it the same size (width) as the default scrollbar.
  • ChoGGiChoGGi
    :)
    i've only tested it on the default theme. it doesn't make any size difference that i can see
    want to post a screenshot and do you use another theme?
  • bugmenot123bugmenot123
    Im not using any theme.
    But for me, compared to the default scrollbar, this one is slightly skinnier and the Up/Down, Left/Right Buttons are smaller. I want it to be the size to be a little wider so that its the same as the default scrollbar.
  • ChoGGiChoGGi
    it shouldn't change the size, could you post before/after screenshots?
  • bugmenot123bugmenot123
    edited June 2009
    Image and video hosting by TinyPic Image and video hosting by TinyPic Sorry about the tab bar in the After pic. That has no effect on the size, so exclude that.
  • ChoGGiChoGGi
    is that how the scroll bar normally looks under vista or something else?

    i'd guess this is what does it, but you need it to change the bg
    scrollbar>scollbarbutton,scrollbar>slider>thumb{-moz-appearance:none!important}
    you could try this
    scrollbar>scrollbarbutton{background-repeat:repeat!important} scrollbar{width:20px!important}
Sign In or Register to comment.