How can I increase the width of the scrollbar in FireFox ?

Discussion of general topics about Mozilla Firefox
Locked
tnek
Posts: 5
Joined: November 21st, 2005, 5:47 am

How can I increase the width of the scrollbar in FireFox ?

Post by tnek »

The scrollbar in my FireFox is so narrow it's tough to grab. Is there an easy setting I can add to one of the config files to set the width wider ?
GameController
Posts: 470
Joined: October 1st, 2004, 9:13 pm
Location: Sunny California

Post by GameController »

Paste this code in userContent.css and adjust the sizes

Code: Select all

/* Change width of VERTICAL SCROLLBAR */
scrollbar[orient="vertical"], scrollbar[orient="vertical"] thumb, scrollbar[orient="vertical"] scrollbarbutton { max-width: 15px !important; -moz-appearance: none !important; }

/* Change width of HORIZONTAL SCROLLBAR */
scrollbar[orient="horizontal"], scrollbar[orient="horizontal"] thumb, scrollbar[orient="horizontal"] scrollbarbutton { max-height: 15px !important; -moz-appearance: none !important; }
tnek
Posts: 5
Joined: November 21st, 2005, 5:47 am

Post by tnek »

I pasted those into my userContent.css changed { max-width: 60px ....} . When I restarted FireFox nothing had changed.
Is there any other switch or something I need to change ? Any setting that might be over riding this ?
I even tried pasting it into UserChrome.css to no avail.
User avatar
Monimonika
Posts: 1067
Joined: July 27th, 2005, 12:49 pm

Post by Monimonika »

Did you close Firefox before doing the pasting? Did you go to the .css files in your profile folder (not the one in the program folder)?

http://kb.mozillazine.org/Profile_folde ... _folder.3F
tnek
Posts: 5
Joined: November 21st, 2005, 5:47 am

Post by tnek »

I just checked the file. Mine is located at
C:\Documents and Settings\Kent\Application Data\Mozilla\Firefox\Profiles\32hr4kz8.default\chrome\UserContent.css

Currently, that file contains:
marquee {
-moz-binding: none;
}
/* Change width of VERTICAL SCROLLBAR */
scrollbar[orient="vertical"], scrollbar[orient="vertical"] thumb, scrollbar[orient="vertical"] scrollbarbutton { max-width: 60px !important; -moz-appearance: none !important; }

/* Change width of HORIZONTAL SCROLLBAR */
scrollbar[orient="horizontal"], scrollbar[orient="horizontal"] thumb, scrollbar[orient="horizontal"] scrollbarbutton { max-height: 60px !important; -moz-appearance: none !important; }

I don't what it is or how that Marquee thing got in there but it was already there so I pasted your stuff after it. I have verified it's there.

I have even restarted my computer and restarted FireFox but there is no change.
Should perhaps I be entering { min-width: 60px ... ?
User avatar
dickvl
Posts: 54145
Joined: July 18th, 2005, 3:25 am

Post by dickvl »

tnek wrote:I pasted those into my userContent.css changed { max-width: 60px ....} . When I restarted FireFox nothing had changed.
Is there any other switch or something I need to change ? Any setting that might be over riding this ?
I even tried pasting it into UserChrome.css to no avail.
You want to incease the default so you must use min-width and min-heigth

Code: Select all

/* Increase width of VERTICAL SCROLLBAR */
scrollbar[orient="vertical"], scrollbar[orient="vertical"] thumb, scrollbar[orient="vertical"] scrollbarbutton { min-width: 35px !important; -moz-appearance: none !important; }

/* Increase width of HORIZONTAL SCROLLBAR */
scrollbar[orient="horizontal"], scrollbar[orient="horizontal"] thumb, scrollbar[orient="horizontal"] scrollbarbutton { min-height: 35px !important; -moz-appearance: none !important; }

You can try without the -moz-appearance: none !important; to see what you like best.

You can put the same code in userChrome.css to make it work in chrome windows too (e.g. Extensions Manager)
User avatar
dickvl
Posts: 54145
Joined: July 18th, 2005, 3:25 am

Post by dickvl »

Does anybody know why deceasing the scroll bar width in Fx 1.5 and 1.5.0.1 does work (userContent.css): the slider and thumbs are smaller, but the track doesn't change width? (works in Fx 1.0.7 and trunk versions).
I see nothing in the 'classic.jar\skin\classic\global\xulscrollbars.css' file indicating this.
Could it be caused by scrollcorner { background:url("chrome://global/skin/scrollbar/corner.png") no-repeat;}
not being resized.

I always work full screen with autohide extension and don't want the vertical scroll to take much space (causes appearance of a horizontal scroll bar sometimes) and I put the mouse cursor to the far right of the screen to operate the scrollbar.
Last edited by dickvl on February 16th, 2006, 5:27 pm, edited 3 times in total.
tnek
Posts: 5
Joined: November 21st, 2005, 5:47 am

Post by tnek »

Thanks, it's working now. Only problem I have now is that I have been using the Noia theme. Now, the scrollbar is wider but the theme is still showing the narrow scrollbar. It works but doesn't look good.
User avatar
Kupfel
Posts: 416
Joined: December 18th, 2005, 10:03 pm

Post by Kupfel »

well, you cant expect it to look good if you widen the scrollbar with css code..

if you are so depending on using scrollbars (no scrollwheel? on a tablet pc?) then you could try scrollbar anywhere:

http://www.extensionsmirror.nl/index.php?showtopic=194

which lets you scroll anywhere on the page, or grab and drag:

http://www.extensionsmirror.nl/index.php?showtopic=4349

which lets you scroll by dragging the page acrobat-style
paulfox
Posts: 1510
Joined: May 8th, 2004, 1:38 pm

Post by paulfox »

@dickvl: Thank you for fixing that in a hurry - I'm using it as of 15 seconds ago. Excellent! First ones above no workie, at least for me. Cheers. I'll play with measurements.

I have a question since you da scrollbar man! What is the "grippie/gripper/slider button CALLED and why can't I seem to change its color from the default drab? I've done the background but can't find "code word" for the actual thing you drag.
PentiumIII/W2K, Toshiba AMD laptop/Vista. FX 3 on both.
User avatar
dickvl
Posts: 54145
Joined: July 18th, 2005, 3:25 am

Post by dickvl »

This is the code of the scroolbar:

Code: Select all

/* ::::: scrollbar ::::: */

scrollbar {
  -moz-appearance: scrollbartrack-horizontal;
  -moz-binding: url("chrome://global/content/bindings/scrollbar.xml#scrollbar");
  cursor: default;
  background: url("chrome://global/skin/scrollbar/slider.gif") scrollbar;
}
So to change the slider how have to replace 'slider.gif'
paulfox
Posts: 1510
Joined: May 8th, 2004, 1:38 pm

Post by paulfox »

I'm diggin' this! Just noticed that I had scrollbar COLOR stylish script transferred to userChrome, but it has to go in userContent AND userChrome, or you get it sometimes and not others (like this forum). I'll play with this new thing above/GIF image - used it before but replace with rgb(xxx,xxx,xxx) and it works fine.

So far,

scrollbar {
-moz-appearance: scrollbartrack-horizontal;
-moz-binding: url("chrome://global/content/bindings/scrollbar.xml#scrollbar");
cursor: default;
background: url("chrome://global/skin/scrollbar/CC33FF") scrollbar;
}

isn't doing it, but I'll work on it. Cheers and thank you Sir.
PentiumIII/W2K, Toshiba AMD laptop/Vista. FX 3 on both.
User avatar
dickvl
Posts: 54145
Joined: July 18th, 2005, 3:25 am

Post by dickvl »

I think the gif is for the scrollbar background and Fx uses the windows default for the thumb color and that's why it doesn't work.
Locked