Changing sidebar border size using userChrome.css?

[wowtip]

Is there any way to change the size of the border between the sidebar frame and the "browser" frame (or remove it completely)?

I have tried several ways, with no success so far.

Code: Select all

#browser { direction: ltr !important;}
#sidebar-box { direction: ltr !important; border: 0px !important!}
#appcontent { direction: ltr !important; }
#sidebar {
   max-width: 250px !important;
   width: 90px !important;
   min-width: 90px !important;
   border: 0px !important;
}

Both "border: 0px !important" are my additions. I searched the forums and google, but no luck. Is there any proper documentation of what can be done with userChrome.css somewhere?

[Unarmed]

Code: Select all

#sidebar-splitter { min-width: 0px !important; max-width: 0px !important; }

The DOM Inspector is the best tool I've found to figure out where to set things. File -> Inspect a Window -> (current browser window), then click the "Find a node to inspect by clicking on it" pointer button on the far left, and click what I want to modify.

[wowtip]

Thanks a lot, I'll look more into the DOM Inspector, it seems like a quite powerful tool.

Now I must just figure out how to change the height of #sidebar-box to make it the same height as the tab-bar. How did you find out what CSS parameters #sidebar-splitter and other #thingies accept?

[Unarmed]

You probably want sidebarheader instead, since the height of #sidebar-box is the full height of the sidebar (varies depending on the size of your browser window).

Code: Select all

sidebarheader { height: 30px; }

Most common CSS attributes apply just fine.

[wowtip]

Ah, ok. Thanks again.

If you want to modify a DOM node without a specific DOM id, you use the nodeName, without the #?

I tried changing the #sidebarheader attributes, and such to no avail.

[Unarmed]

A DOM node without a specific ID is specified without #, correct. The caveat here is that the style rule will affect <em>all</em> DOM nodes with that element name. Fortunately in this case, there's only one sidebarheader element.

[wowtip]

Got to look more into this, interresting stuff.

Last question for tonight if you bear with me. If I want to set attributes for a sub node that doesn't have an id, but have a class name/value, how would I refer to it? Ie, hbox -> vbox -> sidebarheader -> toolbarbutton, which have class name/value "tabs-closebutton"?

Would it be something like "sidebarheader .tabs-closebutton {stuff}"?

[Unarmed]

Yes, that'd work. The English equivalent of that rule would be "Apply this to all elements with the class 'tabs-closebutton' beneath any sidebarheader element."

[wowtip]

Very nice. Now maybe I can stop asking stupid UserChrome.css related questions here and maybe soon start answering stupid UserChrome.css related questions instead.

The DOM Inspector is the best tool I've found to figure out where to set things. File -> Inspect a Window -> (current browser window), then click the "Find a node to inspect by clicking on it" pointer button on the far left, and click what I want to modify.

That quote should really be a top item/sticky in any discussion regarding UserChrome.css.

Thanks a lot!