Stylish or userChrome code to change Fx tab bar background

Discussion of features in Mozilla Firefox
phkhgh
Posts: 845
Joined: January 25th, 2007, 2:49 pm
Location: So. U.S.A.

Stylish or userChrome code to change Fx tab bar background

Post by phkhgh »

I've searched userstyles.org & a good bit on the web for info on how to change the background color behind the tabs in <b>Fx (18, 19)</b>. I believe that would be:
tabbrowser-tab, then background. I'm tired of using themes & dealing w/ back & forth issues of not working w/ new Fx releases or other addons.

If I set about:config entry, "browser.display.use_system_colors" = True (using Vista), it will show a decent 2- color gradiant - BUT ONLY when some menu item is open, like Options, or Style Editor. (see attached screen) As soon as those menus close, & a web page displayed, the tabs background returns to solid, dark gray.

So, need either a stylish code or one for userChrome.css, that will either allow something a bit fancier than a solid color (though other colors would be better than dark gray). I haven't found anything to allow using a 2 - 3 color gradient, or using a png image (in Stylish or userChrome). Many themes use images for various colors, but they are referenced from the theme.

I'm not sure how to code it to use an image (where would the image be stored, in this case).
Image
voodoo_tomato
Posts: 5
Joined: February 7th, 2013, 6:36 pm

Re: Stylish or userChrome code to change Fx tab bar backgrou

Post by voodoo_tomato »

You probably want to change the background on #main-window. Just remember if doing a gradient, it extends all the way to the bottom of the browser, so your gradient stops need to take that into consideration.

For example, for solid red:

Code: Select all

#main-window {
    background-color: rgb(255, 0, 0);
}


Or a simple gradient:

Code: Select all

#main-window {
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 5%);
}


If you want to use an image with userChrome.css, just put the image in the same directory and give the image name as the url.
phkhgh
Posts: 845
Joined: January 25th, 2007, 2:49 pm
Location: So. U.S.A.

Re: Stylish or userChrome code to change Fx tab bar backgrou

Post by phkhgh »

Thanks, VT.
I'm no coder, & some theme addon devs say Fx / Tbird changes force them to constantly change their products to make them work. This isn't new, but has sped up in last couple yrs. What the name of a browser window object was called in the past may now be completely different.
I tried your code (in Stylish) & it had no effect in Fx 18 (Vista).
#main-window {
background-color: rgb(0, 100, 0);
}

I've not seen it suggested that the background color behind the tabs, that extends to R & L (when tabs are on top), is called the main window. I may be completely wrong. If it is, & extends to bottom of browser, your code provides no way to stop it, above the address bar / search bar (w/ tabs on top).

Would you have any idea how those "stops" would be specified? You may not know that - it's OK, I certainly don't.

Using code I found mentioned numerous places, it colors area directly behind the tabs, but doesn't extend under the window sizing buttons, or the menu button - With tabs on TOP.
.tabbrowser-tabs
{background: #9edbee;
}

I tried several other things w/ this code (mimicking code from themes), but didn't solve the issue, shown in attached screen.
If showing a tool bar (menu bar), above tabs, then the specified color DOES extend almost to R end, & tabs themselves are shifted to far L screen border. But, the toolbar(menu bar) background (where File, Edit, etc., are shown) is a diff color. Not a big deal for me, as I rarely show the menu bar (always have it hidden).
Image
phkhgh
Posts: 845
Joined: January 25th, 2007, 2:49 pm
Location: So. U.S.A.

Re: Stylish or userChrome code to change Fx tab bar backgrou

Post by phkhgh »

However, your comment drove me (I'm obsessed) to look at more examples from Noia4. I found this, that DIDN'T work in Fx 18:
#main-window:not(:-moz-lwtheme)[inFullscreen=true] #TabsToolbar {
-moz-appearance: none;
background: linear-gradient(#bce3f4,#f0f9fc,#c9e7ff) !important;
}

On a hunch (just a monkey imitating - don't really know what I'm doing), decided to trim it down to this, which DOES work:
#TabsToolbar {
-moz-appearance: none;
background: linear-gradient(#bce3f4,#f0f9fc,#c9e7ff) !important;
}

DOM Inspector (in Fx 18, 19): for life of me, can't figure out how to get it to show object names of Fx UI elements, like parts of tool bar / TabsToolbar. Is it not completely up to date w/ latest Fx versions?
Read several tutorials for it, but mostly can even get it to show the browser tool bar area. Nor does the "blink selected elements" work, etc. It will show elements (& jump to the code) for a WEB PAGE. But not for the browser UI, itself. I definitely need a better manual / tutorial for DOM Inspector than I've found.
Image
voodoo_tomato
Posts: 5
Joined: February 7th, 2013, 6:36 pm

Re: Stylish or userChrome code to change Fx tab bar backgrou

Post by voodoo_tomato »

phkhgh wrote:Thanks, VT.
I'm no coder, & some theme addon devs say Fx / Tbird changes force them to constantly change their products to make them work. This isn't new, but has sped up in last couple yrs. What the name of a browser window object was called in the past may now be completely different.
I tried your code (in Stylish) & it had no effect in Fx 18 (Vista).
#main-window {
background-color: rgb(0, 100, 0);
}

I've not seen it suggested that the background color behind the tabs, that extends to R & L (when tabs are on top), is called the main window. I may be completely wrong. If it is, & extends to bottom of browser, your code provides no way to stop it, above the address bar / search bar (w/ tabs on top).

Would you have any idea how those "stops" would be specified? You may not know that - it's OK, I certainly don't.

Using code I found mentioned numerous places, it colors area directly behind the tabs, but doesn't extend under the window sizing buttons, or the menu button - With tabs on TOP.
.tabbrowser-tabs
{background: #9edbee;
}

I tried several other things w/ this code (mimicking code from themes), but didn't solve the issue, shown in attached screen.
If showing a tool bar (menu bar), above tabs, then the specified color DOES extend almost to R end, & tabs themselves are shifted to far L screen border. But, the toolbar(menu bar) background (where File, Edit, etc., are shown) is a diff color. Not a big deal for me, as I rarely show the menu bar (always have it hidden).
Image


It looks like you need to give the css rules rules an !important flag. So

Code: Select all

#main-window {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 5%)  !important;
}


should work.
phkhgh
Posts: 845
Joined: January 25th, 2007, 2:49 pm
Location: So. U.S.A.

Re: Stylish or userChrome code to change Fx tab bar backgrou

Post by phkhgh »

Yes & no. It looks good when the menu bar is displayed, BUT... does a lot of other strange stuff. Like completely hiding Vista's task bar & start button; unable to drag / resize Fx window, when not in full screen. Other things like that. Too strange, but had no other styles applied.

Overlooking those (impossible), if NOT showing the menu bar (File, Edit), that bar (sans the menu items) isn't colored by your code - still gray. I believe that's called "#titlebar."

Why the code I posted for "#TabsToobar" colors the entire area behind tabs & the title bar - & has no unintended side effects, dunno.
Did you test that code in Windows Fx stable release, v18 or 19?
Figured must be some sites w/ neato gradient schemes or generators - was right. I'm sure there're many. A very cool one, that allows starting w/ pre cofig'd schemes & modifying just about any way you want is Colorzilla.com. Or you can create your own.

This is what I came up w/ in ~ 5 min. The code I picked for Fx from the online interactive generator, was for: /* FF3.6+ */ (it lists equivalent codes for other browsers). I didn't worry about coloring the
#TabsToolbar {
background: -moz-linear-gradient(top, rgba(124,208,249,1) 0%,
rgba(97,153,199,1) 15%, rgba(58,132,195,1) 51%, rgba(65,154,214,1) 59%,
rgba(75,184,240,1) 71%, rgba(58,139,194,1) 84%, rgba(38,85,139,1) 100%)
!important
}

Image

Sorry - you post ahead of me. I have no idea why it affected those things. Doesn't seem possible. Only way to disable the code was kill Fx in task mgr, & before reloading session, go into addons / Stylish - & disable that style (let me do that w/o Fx completely loaded). When disabled your last code in Stylish, all problems went away. No idea (except for changes in nightlies or what elements are now called) why my code doesn't color up to top of bar, for you.
?? Are you using the Fx default theme? I am. Could be when I upgrade to v19, it won't work at all!

I also use tabmixplus, but doubt it'd control coloring background (who knows). That's why some theme devs have recently said they question the sanity in continuing to try & make constant revisions, just so it'll work w/ latest Fx. I DEFINITELY see their point. This stuff will drive you crazy. Image
Last edited by phkhgh on February 23rd, 2013, 12:13 pm, edited 2 times in total.
voodoo_tomato
Posts: 5
Joined: February 7th, 2013, 6:36 pm

Re: Stylish or userChrome code to change Fx tab bar backgrou

Post by voodoo_tomato »

phkhgh wrote:Yes & no. It looks good when the menu bar is displayed, BUT... does a lot of other strange stuff. Like completely hiding Vista's task bar & start button; unable to drag / resize Fx window, when not in full screen. Other things like that. Too strange, but had no other styles applied.

Overlooking those (impossible), if NOT showing the menu bar (File, Edit), that bar (sans the menu items) isn't colored by your code - still gray. I believe that's called "#titlebar."

Why the code I posted for "#TabsToobar" colors the entire area behind tabs & the title bar - & has no unintended side effects, dunno.
Did you test that code in Windows Fx stable release, v18 or 19?


I'm not sure how changing the background color or image could cause those sorts of issues. Tested on 18.0.2/19/nightly, didn't see any sort of issues. You'll probably want to use a fixed pixel number for the gradient stops if using the main-window, as resizing the window will cause it to move around otherwise.

Its odd because when I try setting it using your css, it doesn't color the titlebar.

http://i.imgur.com/zCs1i1n.png

Setting background image on #main-window:

http://i.imgur.com/uJDaRlp.png
phkhgh
Posts: 845
Joined: January 25th, 2007, 2:49 pm
Location: So. U.S.A.

Re: Stylish or userChrome code to change Fx tab bar backgrou

Post by phkhgh »

How exactly does one find the CURRENT GUI element names (for CSS code) in Fx / Tbird? Dom Inspector may not work for this anymore, or I may be too ignorant. I definitely can't get it to show elements for the browser UI. For web pages - yes.

Image
morat
Posts: 6406
Joined: February 3rd, 2009, 6:29 pm

Re: Stylish or userChrome code to change Fx tab bar backgrou

Post by morat »

Does this routine work in Firefox 18.0? It works for me in Firefox ESR 17.0.

* Tools > Web Developer > Dom Inspector
* File > Inspect Chrome Document > chrome://browser/content/browser.xul
* click the Inspect button
* click the "Find a node to inspect by clicking on it" button
* click the tabs toolbar to find the toolbar id
* search for the TabsToolbar string

http://mxr.mozilla.org/mozilla-release/
http://mxr.mozilla.org/mozilla-release/search?string=TabsToolbar&find=css
phkhgh
Posts: 845
Joined: January 25th, 2007, 2:49 pm
Location: So. U.S.A.

Re: Stylish or userChrome code to change Fx tab bar backgrou

Post by phkhgh »

Good info. Thanks. You almost got me to the solution.
No, because there is no "chrome://browser/content/browser.xul"

in "inspect chrome document", only "chrome://inspector/content/viewers/dom/dom.xul or /domnode/domnode.xul
Consequently, the tab bar never appears in the DOMi anywhere. The "normal" firefox tool menu appears (File, Edit...), but trying your instructions on either one of the options I mentioned exist (for me), clicking even on the menu bar doesn't "jump to" or open anything in the DOM inspector window.

Is it possible the "browser/content/browser.xul" would only appear in running in an admin acct? Oops...
One thing the tutorials I looked at forgot to mention. Under View, "Show accessible node" MUST be checked, for the browser/content/browser.xul to appear.
It was UNchecked, by default in my install of latest DOMi ver. d/l from MAO.

After checking that, the full browser UI appears, as you describe (blink element still doesn't work, but probably another setting I'm missing)
EDIT: and then... after doing it once, closing DOMi & reopening it, no browser.xul to be seen, even after unchecking / rechecking Show Accessible Node.
Maybe if I restart Fx. Me thinks there's a few bugs in DOMi.
Restarted Fx - no change; looked in about:config to see if settings were consistent w/ DOMi UI prefs - seemed to be. ONLY way could get chrome://browser/content/browser.xul" back (after 1st time it appeared, then closed DOMi), was copy / paste that string into DOMi's URL box. It was NOT a choice from menus.

But, in DOMi clicking on the the blank area beside tabs (gradient med & dk blue, in my shot) does NOT jump to the id "TabsToolbar" id name.
It jumps to several levels below TabsToolbar, to a line that shows no id at all - only a class name. If I didn't already know what TabsToolbar was / did, I would have to work my way up or down the tree in DOMi, to figure out exactly what I'm looking for.

Then following your link to mxr.mozilla site & entering id name, gives dizzying list of results. :)
But, at least I can get the element name. What I (personally) can / can't do w/ that is another matter. It's seriously odd how the code like one I posted that colors entire area behind TabsToolbar, works for me (knowing v. little about CSS) but doesn't work well for Voodoo T, nor his for me. I've known a few programmers who always seemed irritable - now, it makes sense why. :D
Last edited by phkhgh on February 23rd, 2013, 3:32 pm, edited 1 time in total.
Scipio
Posts: 188
Joined: August 21st, 2006, 6:17 pm
Location: New York

Re: Stylish or userChrome code to change Fx tab bar backgrou

Post by Scipio »

Dom Inspector should have added a right click menu item named Inspect that will open DomI to whatever UI element you right clicked on.
morat
Posts: 6406
Joined: February 3rd, 2009, 6:29 pm

Re: Stylish or userChrome code to change Fx tab bar backgrou

Post by morat »

phkhgh wrote:there is no "chrome://browser/content/browser.xul"

* File > Inspect Chrome Document > Stylish or userChrome code to change Fx tab bar background • mozillaZine Forums - Mozilla Firefox

That should open the "chrome://browser/content/browser.xul" document.

* File > Inspect Chrome Document > Stylish or userChrome code to change Fx tab bar background • mozillaZine Forums - DOM Inspector

That should open the "chrome://inspector/content/inspector.xul" document.

http://oi46.tinypic.com/33ykk5v.jpg
Scipio
Posts: 188
Joined: August 21st, 2006, 6:17 pm
Location: New York

Re: Stylish or userChrome code to change Fx tab bar backgrou

Post by Scipio »

My mistake. I forgot I have Inspect Context installed with Dom Inspector.https://addons.mozilla.org/en-us/firefox/addon/inspect-context/?src=search
phkhgh
Posts: 845
Joined: January 25th, 2007, 2:49 pm
Location: So. U.S.A.

Re: Stylish or userChrome code to change Fx tab bar backgrou

Post by phkhgh »

Hee, hee. Why didn't you say so, Morat? :) Thanks. I guess that's been changed since the tutorials I read were written.
Does the blink element work for you? Even if I R click on the browser element id >Blink element, it doesn't.

If trying to color background of what are 3 separate elements in the toolbar - above the TabsToolbar are the toobar-menubar & titlebar - does it make any difference in Stylish if you put them in one style or 3 separate ones?

Reason I ask, if code for one element wasn't correct, you could comment it out (or change it), or if in separate styles, just disable incorrect ones.

Image
morat
Posts: 6406
Joined: February 3rd, 2009, 6:29 pm

Re: Stylish or userChrome code to change Fx tab bar backgrou

Post by morat »

phkhgh wrote:dizzying list of results

browser/base/content/browser.css
browser/themes/gnomestripe/browser.css = Linux theme (ignore this file)
browser/themes/pinstripe/browser.css = Mac theme (ignore this file)
browser/themes/winstripe/browser-aero.css = Windows Aero theme (ignore if using classic)
browser/themes/winstripe/browser.css = Windows Classic theme (ignore if using aero)

It is easier for me to search the omni.ja archive, then use mxr.mozilla.org.

phkhgh wrote:Why didn't you say so, morat?

I wasn't in verbose mode. :P

phkhgh wrote:Does the blink element work for you?

Yes, it works but it doesn't always *blink* *blink* *blink*, it just puts a red box around the element.

I don't use the stylish extension, best to ask in the forum.
Post Reply