X
Tippen Sie hierhin, um die Version dieser Website für Mobilgeräte aufzurufen.

Hilfeforum

Changing the appearance (not the position!) of the tabs

Veröffentlicht

I raised this (and it was off-topic, so my apologies) in the recent thread about getting the tabs back to below the address bar following the update to 71.0. Having successfully done the move - and thanks to everyone for the help - I'd now like to restore the appearance of the tabs and the tab bar to what I had before the update. I suspect that that was thanks to installing a theme, but I'm afraid I no longer have the details.

I'm attaching a pic of what I'd like to achieve.

Cor-el kindly gave me this for my UserChrome.css file:

.tabbrowser-tab:not([selected]) .tab-content { background-color: #99EEFF !important; }

and that goes some way. But I'd still like to generate a vertical gap between the tabs, round off their top corners, and change the background colour. Despite searching around I haven't yet found the specific coding to do this: if anyone can point me in the right direction I'd be very grateful. Many thanks.

I raised this (and it was off-topic, so my apologies) in the recent thread about getting the tabs back to below the address bar following the update to 71.0. Having successfully done the move - and thanks to everyone for the help - I'd now like to restore the appearance of the tabs and the tab bar to what I had before the update. I suspect that that was thanks to installing a theme, but I'm afraid I no longer have the details. I'm attaching a pic of what I'd like to achieve. Cor-el kindly gave me this for my UserChrome.css file: .tabbrowser-tab:not([selected]) .tab-content { background-color: #99EEFF !important; } and that goes some way. But I'd still like to generate a vertical gap between the tabs, round off their top corners, and change the background colour. Despite searching around I haven't yet found the specific coding to do this: if anyone can point me in the right direction I'd be very grateful. Many thanks.
Angefügte Screenshots

Geändert am von mail226

Zitieren

Mehr Details zum System

Installierte Plugins

  • Shockwave Flash 32.0 r0

Anwendung

  • User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:71.0) Gecko/20100101 Firefox/71.0

Weitere Informationen

cor-el
  • Top 10 Contributor
  • Moderator
17687 Lösungen 159999 Antworten
Veröffentlicht

Do you still have a copy of your previous userChrome.css because it is likely that you lost the code for the rounded tabs and other appearance changes you had made ?

It is possible that you still have the previous code in userChrome.css, but that this code is no longer compatible with the current Firefox release.

Do you still have a copy of your previous userChrome.css because it is likely that you lost the code for the rounded tabs and other appearance changes you had made ? It is possible that you still have the previous code in userChrome.css, but that this code is no longer compatible with the current Firefox release.
Hat Ihnen das weitergeholfen?
Zitieren

Fragesteller

Cor-el, thanks for that. I still have several earlier versions of the userChrome.css file. I haven't had time yet to go through them properly and determine which of them was the latest, but a quick glance at one revealed this:

/* Generates white horizontal lines between toolbars: */

toolbar {

 -moz-appearance: none !important;
 border-left: 0px !important;
 border-right: 0px !important;
 border-bottom: 0px !important;
 border-top: 1px solid white !important;

}

which is definitely one of the effects I want to restore. Interesting that the label "toolbar" seems to relate to the tabs rather than the bar as a whole.

I'm now going to paste that code into my current css file and see what happens.

LATER...

Sadly, it had no effect. I know that css can be tricky about precedence so I tried inserting it in different places in the file, but the location made no difference. I'll keep trying. .

Cor-el, thanks for that. I still have several earlier versions of the userChrome.css file. I haven't had time yet to go through them properly and determine which of them was the latest, but a quick glance at one revealed this: /* Generates white horizontal lines between toolbars: */ toolbar { -moz-appearance: none !important; border-left: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-top: 1px solid white !important; } which is definitely one of the effects I want to restore. Interesting that the label "toolbar" seems to relate to the tabs rather than the bar as a whole. I'm now going to paste that code into my current css file and see what happens. LATER... Sadly, it had no effect. I know that css can be tricky about precedence so I tried inserting it in different places in the file, but the location made no difference. I'll keep trying. .

Geändert am von mail226

Hat Ihnen das weitergeholfen?
Zitieren
cor-el
  • Top 10 Contributor
  • Moderator
17687 Lösungen 159999 Antworten
Veröffentlicht

Code for the Tab bar usually begins with #tab or .tab, so maybe look for such a selector.

Code for the Tab bar usually begins with #tab or .tab, so maybe look for such a selector.
Hat Ihnen das weitergeholfen?
Zitieren

Fragesteller

Cor-el, as a quick test I tried prefacing "toolbar {" first with . and then with # but neither had any effect.

I'll experiment more tomorrow. Good night.

Cor-el, as a quick test I tried prefacing "toolbar {" first with . and then with # but neither had any effect. I'll experiment more tomorrow. Good night.
Hat Ihnen das weitergeholfen?
Zitieren

Fragesteller

An update. I've made a small advance with this, but one particular css code is still eluding me: how to change the colour of the tabs themselves, as opposed to the tab bar background. Adding background: aqua !important; to #TabsToolbar makes both the tabs and the background that colour. And curiously, adding the same command to #tabbrowser-tabs has exactly the same effect.

An update. I've made a small advance with this, but one particular css code is still eluding me: how to change the colour of the tabs themselves, as opposed to the tab bar background. Adding '''background: aqua !important;''' to''' #TabsToolbar''' makes both the tabs and the background that colour. And curiously, adding the same command to '''#tabbrowser-tabs''' has exactly the same effect.

Geändert am von mail226

Hat Ihnen das weitergeholfen?
Zitieren
cor-el
  • Top 10 Contributor
  • Moderator
17687 Lösungen 159999 Antworten
Veröffentlicht

Hilfreiche Antwort

toolbar is the name of an element and not an Id or ClassName, so you shouldn't use a prefix in this case (i.e. only use toolbar for the selector). The selector for a toolbar in the navigator toolbox could be:

    1. navigator-toolbox toolbar

A selector for a specific toolbar would be:

  • #toolbar-menubar
  • #TabsToolbar
  • #nav-bar
  • #PersonalToolbar

Code for the Tab bar:

#TabsToolbar {
 border-top: 1px dotted #444 !important;
}
''toolbar'' is the name of an element and not an Id or ClassName, so you shouldn't use a prefix in this case (i.e. only use ''toolbar'' for the selector). The selector for a toolbar in the navigator toolbox could be: *#navigator-toolbox toolbar A selector for a specific toolbar would be: * #toolbar-menubar * #TabsToolbar * #nav-bar * #PersonalToolbar ---- Code for the Tab bar: <pre><nowiki>#TabsToolbar { border-top: 1px dotted #444 !important; }</nowiki></pre>

Geändert am von cor-el

Hat Ihnen das weitergeholfen? 1
Zitieren

Fragesteller

Cor-el, many thanks. I'll try again.

Later:

Interesting results so far: inserting the relevant line of your sample code into the existing #TabToolbar codes had no effect at all, and neither did adding the whole thing as a separate item. But putting it into the #tabbrowser-tabs codes did work. Which has given me a good line on how to proceed. Thanks. .

Cor-el, many thanks. I'll try again. Later: Interesting results so far: inserting the relevant line of your sample code into the existing #TabToolbar codes had no effect at all, and neither did adding the whole thing as a separate item. But putting it into the #tabbrowser-tabs codes ''did'' work. Which has given me a good line on how to proceed. Thanks. .

Geändert am von mail226

Hat Ihnen das weitergeholfen?
Zitieren
jscher2000
  • Top 10 Contributor
8837 Lösungen 72222 Antworten
Veröffentlicht

Hilfreiche Antwort

Hi mail226, if you aren't already using the Browser Toolbox to "inspect" your toolbars to find selectors, and to edit your userChrome.css code in real time, you could give it a try. It can be slow to load and unload (especially if you have a lot of bookmarks), but it's probably faster than restarting Firefox over and over.

https://developer.mozilla.org/docs/Tools/Browser_Toolbox

Hi mail226, if you aren't already using the Browser Toolbox to "inspect" your toolbars to find selectors, and to edit your userChrome.css code in real time, you could give it a try. It can be slow to load and unload (especially if you have a lot of bookmarks), but it's probably faster than restarting Firefox over and over. https://developer.mozilla.org/docs/Tools/Browser_Toolbox
Hat Ihnen das weitergeholfen? 1
Zitieren

Fragesteller

Jscher2000, thanks. I've never used the Browser Toobox even back when I was confident enough with css to write a couple of websites from scratch; I'll take a look at it.

Jscher2000, thanks. I've never used the Browser Toobox even back when I was confident enough with css to write a couple of websites from scratch; I'll take a look at it.
Hat Ihnen das weitergeholfen?
Zitieren
jscher2000
  • Top 10 Contributor
8837 Lösungen 72222 Antworten
Veröffentlicht

Hi mail226, it's similar to the Page Inspector, which you can experiment with by right-clicking something in a page and using Inspect Element.

There's a little icon to activate click-to-select which you can use in either Inspector (you'll definitely need it in the Browser Toolbox to drill down on the tabs bar).

Hi mail226, it's similar to the Page Inspector, which you can experiment with by right-clicking something in a page and using Inspect Element. There's a little icon to activate click-to-select which you can use in either Inspector (you'll definitely need it in the Browser Toolbox to drill down on the tabs bar).
Hat Ihnen das weitergeholfen?
Zitieren

Fragesteller

I'm having a problem enabling the Browser Toolbox. The instructions in the link say

Beginning with Firefox 62, the icon to open Developer Tools settings has been moved into a menu accessed by clicking/touching ... (the elipsis) on the right of the tab. but which tab? Sorry to ask such a basic question but I'm obviously overlooking something obvious.

I'm having a problem enabling the Browser Toolbox. The instructions in the link say ''Beginning with Firefox 62, the icon to open Developer Tools settings has been moved into a menu accessed by clicking/touching ... (the elipsis) on the right of the tab. '' but which tab? Sorry to ask such a basic question but I'm obviously overlooking something obvious.

Geändert am von mail226

Hat Ihnen das weitergeholfen?
Zitieren
cor-el
  • Top 10 Contributor
  • Moderator
17687 Lösungen 159999 Antworten
Veröffentlicht

You need to enable the Browser Toolbox via the developer tools settings page.

To enable the Browser Toolbox:

You need to enable the Browser Toolbox via the developer tools settings page. To enable the Browser Toolbox: *select "Enable remote debugging" in the developer tools settings *https://developer.mozilla.org/en-US/Tools/Settings
Hat Ihnen das weitergeholfen? 1
Zitieren

Fragesteller

Cor-el I think we overlapped. Where are the developer tools settings options? How do I get to them?

...the icon to open Developer Tools settings has been moved into a menu accessed by clicking/touching ... (the elipsis) on the right of the tab." I don't see an elipsis on the right of any tabs.

Cor-el I think we overlapped. Where are the developer tools settings options? How do I get to them? ''...the icon to open Developer Tools settings has been moved into a menu accessed by clicking/touching ... (the elipsis) on the right of the tab." I don't see an elipsis on the right of any tabs.

Geändert am von mail226

Hat Ihnen das weitergeholfen?
Zitieren
cor-el
  • Top 10 Contributor
  • Moderator
17687 Lösungen 159999 Antworten
Veröffentlicht

You can open any of the developer tools (Inspector, Web Console) and press the F1 key or click the cogwheel button to open the settings page like explained in the linked MDN article. If you do not see the three-dot backup then try tp make the window wider.

You can open any of the developer tools (Inspector, Web Console) and press the F1 key or click the cogwheel button to open the settings page like explained in the linked MDN article. If you do not see the three-dot backup then try tp make the window wider. *https://developer.mozilla.org/en-US/Tools/Settings

Geändert am von cor-el

Hat Ihnen das weitergeholfen? 1
Zitieren

Fragesteller

Cor-el thanks. I'm already running Firefox at full screen width so I couldn't get to the elipsis that way, but opening the element inspector and then pressing F1 did the trick.

I have to break off now for a while but I'll get back to things later.

Cor-el thanks. I'm already running Firefox at full screen width so I couldn't get to the elipsis that way, but opening the element inspector and then pressing F1 did the trick. I have to break off now for a while but I'll get back to things later.
Hat Ihnen das weitergeholfen?
Zitieren

Fragesteller

OK, I've gone to Developer Tools Settings/Advanced settings and ticked Enable browser chrome and add-on debugging toolboxes and Enable remote debugging. But unfortunately I still can't open the Browser Toobox: "the menu button new fx menu" still isn't at all evident and the alternative Ctrl + Shift + Alt + 1 keypress still does nothing.

And to cap it all, when I closed the Developer Tools that tab went completely blank (to white) and froze. I couldn't back out of it or refresh it and had to close it and start again. .

OK, I've gone to Developer Tools Settings/Advanced settings and ticked ''Enable browser chrome and add-on debugging toolboxes'' and ''Enable remote debugging''. But unfortunately I still can't open the Browser Toobox: "the menu button new fx menu" still isn't at all evident and the alternative Ctrl + Shift + Alt + 1 keypress still does nothing. And to cap it all, when I closed the Developer Tools that tab went completely blank (to white) and froze. I couldn't back out of it or refresh it and had to close it and start again. .

Geändert am von mail226

Hat Ihnen das weitergeholfen?
Zitieren
jscher2000
  • Top 10 Contributor
8837 Lösungen 72222 Antworten
Veröffentlicht

Hi mail226, it's Ctrl+Alt+Shift+i (i as in inspector).

I have a boring demo on how it is supposed to work in this older video:

https://vimeo.com/242513527#t=346s (starting at 5:46)

Hi mail226, it's Ctrl+Alt+Shift+i (i as in inspector). I have a boring demo on how it is supposed to work in this older video: https://vimeo.com/242513527#t=346s (starting at 5:46)
Hat Ihnen das weitergeholfen? 1
Zitieren

Fragesteller

Success! The crucial step, which I didn't know about, was Menu / Web Developer (I'd seen a reference to Developer but hadn't made the connection) - that took me to a menu which includes the Browser Toolbox. I haven't played around with it yet: I wanted to say thank you first.

Incidentally, it was Ctrl + Shift + Alt + i which I was pressing - the "1" in my earlier post was a typo. The correct combination didn't work then and it still doesn't work now.

Later...

Making changes to userChrome.css does indeed have an almost immediate effect without restarting Firefox: much better than what I'd been doing, so many thanks.

I've still not been able to determine the correct terms for the changes I'd like to make, though.

Success! The crucial step, which I didn't know about, was ''Menu / Web Developer'' (I'd seen a reference to Developer but hadn't made the connection) - that took me to a menu which includes the Browser Toolbox. I haven't played around with it yet: I wanted to say thank you first. Incidentally, it ''was'' Ctrl + Shift + Alt + i which I was pressing - the "1" in my earlier post was a typo. The correct combination didn't work then and it still doesn't work now. Later... Making changes to userChrome.css does indeed have an almost immediate effect without restarting Firefox: much better than what I'd been doing, so many thanks. I've still not been able to determine the correct terms for the changes I'd like to make, though.

Geändert am von mail226

Hat Ihnen das weitergeholfen?
Zitieren

Fragesteller

Almost there. I've succeeded in getting back to very nearly the appearance I had before the latest update: screenshot attached. Many thanks to everyone, especially Cor-el and Jscher200.

One thing is still eluding me: I changed the colour of the "hovered over" tab but the change is applied not only to the tab but to its section of the tab bar background. I can't find any way of preventing this, and all the posted tab-hovering codes that I've tried all have the same effect.

This is the code I'm using:

#TabsToolbar:not(:-moz-lwtheme) .tabs-newtab-button:hover,
#TabsToolbar:not(:-moz-lwtheme) .tabbrowser-tab:hover 
.tab-content:not([selected="true"]) {
  background-color: yellow;
}

The yellow is just for testing purposes. I'd be grateful for any pointers in the right direction.

Almost there. I've succeeded in getting back to very nearly the appearance I had before the latest update: screenshot attached. Many thanks to everyone, especially Cor-el and Jscher200. One thing is still eluding me: I changed the colour of the "hovered over" tab but the change is applied not only to the tab but to its section of the tab bar background. I can't find any way of preventing this, and all the posted tab-hovering codes that I've tried all have the same effect. This is the code I'm using: <pre> #TabsToolbar:not(:-moz-lwtheme) .tabs-newtab-button:hover, #TabsToolbar:not(:-moz-lwtheme) .tabbrowser-tab:hover .tab-content:not([selected="true"]) { background-color: yellow; } </pre> The yellow is just for testing purposes. I'd be grateful for any pointers in the right direction.

Geändert am von mail226

Hat Ihnen das weitergeholfen?
Zitieren
cor-el
  • Top 10 Contributor
  • Moderator
17687 Lösungen 159999 Antworten
Veröffentlicht

Note that it is best to always use the !important flag.

Does this code what you want to achieve ?

#TabsToolbar:not(:-moz-lwtheme)
 .tabbrowser-tab:not([selected="true"]):hover
 .tab-content {
  background-color: yellow !important;
}

/* NEWTAB button */
#new-tab-button,
#tabs-newtab-button{
  fill:red !important;
}
#new-tab-button:hover,
#tabs-newtab-button:hover{
  fill: white !important;
  background-color: rgba(255,0,0,.7) !important;
  border-radius: 4px;
}
Note that it is best to always use the !important flag. Does this code what you want to achieve ? <pre><nowiki> #TabsToolbar:not(:-moz-lwtheme) .tabbrowser-tab:not([selected="true"]):hover .tab-content { background-color: yellow !important; } /* NEWTAB button */ #new-tab-button, #tabs-newtab-button{ fill:red !important; } #new-tab-button:hover, #tabs-newtab-button:hover{ fill: white !important; background-color: rgba(255,0,0,.7) !important; border-radius: 4px; }</nowiki></pre>

Geändert am von cor-el

Hat Ihnen das weitergeholfen?
Zitieren
Stellen Sie eine Frage

Sie müssen sich mit Ihrem Benutzerkonto anmelden, um auf Beiträge zu antworten. Bitte stellen Sie eine neue Frage, wenn Sie noch kein Benutzerkonto haben.