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

Hilfeforum

change new tab button color

Veröffentlicht

I want to change the "+" color on the new tab icon

I was able to do this for the close tab "X' icon with the following css code in my userChrome.css file.

.tabbrowser-tab .close-icon:hover {

  fill: white !important;
  background-color: red !important;
  border-radius: 4px;
}

I think this code should work for the new tab icon, however I don't know the name of the new tab icon.

Please help,

Thank you

I want to change the "+" color on the new tab icon I was able to do this for the close tab "X' icon with the following css code in my userChrome.css file. .tabbrowser-tab .close-icon:hover { fill: white !important; background-color: red !important; border-radius: 4px; } I think this code should work for the new tab icon, however I don't know the name of the new tab icon. Please help, Thank you

Ausgewählte Lösung

Its selector is:

.tabs-newtab-button{
  fill:red !important;
}

.tabs-newtab-button:hover{
  fill: white !important;
  background-color: rgba(255, 0, 0, 0.8) !important;
  border-radius: 4px;
}

I tested it in the Browser Toolbox and in userChrome.css and it works for me.

Diese Antwort im Kontext lesen 0
Zitieren
Wesley Branton
  • Top 25 Contributor
595 Lösungen 5020 Antworten
Veröffentlicht

The new tab button CSS selector is:

.tabs-newtab-button {
     /* YOUR CSS RULES */
}

For future reference, if you open chrome://browser/content/browser.xul in Firefox, you can see the layout of the browser and use the developer tools to navigate through the hierarchy to find IDs and classes of elements that you want to modify.

Hope this helps.

The new tab button CSS selector is: <pre><nowiki>.tabs-newtab-button { /* YOUR CSS RULES */ }</nowiki></pre> For future reference, if you open <code>chrome://browser/content/browser.xul</code> in Firefox, you can see the layout of the browser and use the developer tools to navigate through the hierarchy to find IDs and classes of elements that you want to modify. Hope this helps.
Hat Ihnen das weitergeholfen?
Zitieren
cor-el
  • Top 10 Contributor
  • Moderator
17482 Lösungen 157978 Antworten
Veröffentlicht

Ausgewählte Lösung

Its selector is:

.tabs-newtab-button{
  fill:red !important;
}

.tabs-newtab-button:hover{
  fill: white !important;
  background-color: rgba(255, 0, 0, 0.8) !important;
  border-radius: 4px;
}

I tested it in the Browser Toolbox and in userChrome.css and it works for me.

Its selector is: <pre><nowiki>.tabs-newtab-button{ fill:red !important; } .tabs-newtab-button:hover{ fill: white !important; background-color: rgba(255, 0, 0, 0.8) !important; border-radius: 4px; } </nowiki></pre> I tested it in the Browser Toolbox and in userChrome.css and it works for me. *https://developer.mozilla.org/en-US/Tools/Browser_Toolbox

Geändert am von cor-el

Hat Ihnen das weitergeholfen?
Zitieren
Veröffentlicht

Fragesteller

Thank you!

Regards,

D.M. De Haven

Thank you! Regards, D.M. De Haven
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.