X
Tap here to go to the mobile version of the site.

ஆதரவு மன்றம்

change new tab button color

  • 3 replies
  • 1 இந்த பிரச்சனை உள்ளது
  • Last reply by dmdbdd
பதிவிடப்பட்டது

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

தீர்வு தேர்ந்தெடுக்கப்பட்டது

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.

Read this answer in context 0
மேற்கோள்

Additional System Details

நிறுவப்பட்ட நிரல்கள்

  • Shockwave Flash 32.0 r0

பயன்பாடு

  • User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:66.0) Gecko/20100101 Firefox/66.0

கூடுதல் தகவல்

Wesley Branton
  • Top 10 Contributor
582 தீர்வுகள் 4953 பதில்கள்
பதிவிடப்பட்டது

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.
இது உங்களுக்கு பயனுள்ளதாக இருந்ததா?
மேற்கோள்
cor-el
  • Top 10 Contributor
  • Moderator
17424 தீர்வுகள் 157436 பதில்கள்
பதிவிடப்பட்டது

தீர்வு தேர்ந்தெடுக்கப்பட்டது

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

cor-el மூலமாக திருத்தப்பட்டது

இது உங்களுக்கு பயனுள்ளதாக இருந்ததா?
மேற்கோள்
பதிவிடப்பட்டது

கேள்வியின் உரிமையாளர்

Thank you!

Regards,

D.M. De Haven

Thank you! Regards, D.M. De Haven
இது உங்களுக்கு பயனுள்ளதாக இருந்ததா?
மேற்கோள்
கேள்வி எழுப்பு

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.