MozillaZine

Customizing scrollbars. Can this be done in userchrome?

Discuss application theming and theme development.
blazin
 
Posts: 11
Joined: June 19th, 2008, 11:46 am

Post Posted August 13th, 2008, 11:50 pm

I've been searching around the forums, and cant quite find an answer. Is it possible to customize the scrollbars in FF3 by editing the userchrome?

I've seen threads showing how to customize scrollbars, but the code only seems to work for bookmarks/history sidebar scrollbar and a few others in the userchrome. I'm specifically interested in customizing the web page browser scrollbars. I listed a screen shot below showing exactly the scrollbars I'm looking to customize.

Any help is greatly appreciated. Thank in advance.

EDIT: Below is the code I'm currently trying in the userchrome, but seems to just work for sidebar scrollbars.

Code: Select all
thumb {
-moz-appearance: none !important;
background:  url("filename")  no-repeat center center!important; }

scrollbar>scrollbarbutton[sbattr="scrollbar-down-bottom"] {
-moz-appearance: none !important;
background:  url("filename") no-repeat center center!important;
}

scrollbar>scrollbarbutton[sbattr="scrollbar-up-top"]  {
background:  url("filename")
no-repeat center center!important;
}

slider {
-moz-appearance: none !important;
background: #000000 !important;
}


Image

Euchre

User avatar
 
Posts: 2804
Joined: April 16th, 2006, 12:48 pm

Post Posted August 14th, 2008, 1:09 am

Based on the information in this thread, you might want to try using something like this in your userContent.css file:
Code: Select all
scrollbar[orient="vertical"] scrollbarbutton, scrollbar[orient="vertical"] slider, scrollbar[orient="horizontal"] scrollbarbutton, scrollbar[orient="horizontal"] slider
{
width: 14px !important;
}

You should be able to use the normal CSS parameters for the elements to modify them to your liking.
Gecko
One Rendering Engine to rule them all.

blazin
 
Posts: 11
Joined: June 19th, 2008, 11:46 am

Post Posted August 14th, 2008, 11:26 am

Thanks for your response. I tried your suggestion and stuck the listed code with my userContent.css , unfortunately it did not work for me.

I'm very curious if customizing those particular scrollbars can only be accomplished upon editing the scrollbar.css and repacking a skin, or if it can also be accomplished in the userchrome.

Frank Lion

User avatar
 
Posts: 19825
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted August 14th, 2008, 1:39 pm

blazin wrote:I'm very curious if customizing those particular scrollbars can only be accomplished upon editing the scrollbar.css and repacking a skin, or if it can also be accomplished in the userchrome.

Can be achieved either way.

Curiosity satisfied. ;)
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

blazin
 
Posts: 11
Joined: June 19th, 2008, 11:46 am

Post Posted August 14th, 2008, 3:12 pm

Frank Lion wrote:Curiosity satisfied. ;)


Uhh, not quite. I've tried placing the code in my original post into the userchrome, but just the bookmark/history pane scrollbars change, the tab window scrollbars remain the same (screenshot below). If the tab window scrollbars can be changed in the userchrome, please list the proper code. Thanks.

Image

ehume

User avatar
 
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post Posted August 15th, 2008, 4:20 pm

I think you are not done with your code. If you look at the structure of scrollbars.css, you will see a section that starts ' @media print { '

then has what amounts to an entire set scrollbar code, then - after all the intervening curly brackets have been closed - a final ' } '

You might try that in userChrome.css.
Firefox: Sic transit gloria mundi.

alta88
 
Posts: 980
Joined: January 28th, 2006, 3:08 pm

Post Posted August 19th, 2008, 10:56 am

styling scrollbars in chrome/content via userchrome.css or usercontent.css is no longer possible (some, not all, sidebar chrome is a deceptive exception, merely showing inconsistency in fx dev land). this is due to a completely incompetent fix for an already silly problem - see bug 424184

the workaround is to use Stylish and modify it to apply css as an AGENT_SHEET. you can search the stylish forum for more. note that themes are applied as AGENT and are not affected, just css in usercontent/chrome, which is applied as USER.

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 1 guest