AddOn Genie

Legacy AddOns fixed to work on current versions of Firefox and lots of awesome goodies!

  • Fixed AddOns
  • Forums
  • BlazingFox

userChrome.css Tweaks for ColorfulTabs in Firefox Quantum and later

Home › Forums › ColorfulTabs › userChrome.css Tweaks for ColorfulTabs in Firefox Quantum and later

Tagged: metro, own color, Tabs

  • This topic has 21 replies, 10 voices, and was last updated 1 year, 7 months ago by Thalon.
Viewing 15 posts - 1 through 15 (of 21 total)
1 2 →
  • Author
    Posts
  • January 30, 2018 at 9:26 am #20154
    Shivanand Sharma
    Keymaster

    As everyone may know, Firefox Quantum is a different Firefox from the one we've known for years now. Many extensions are dead. However there are ways to customize the look and feel of Firefox using userChrome.css file.

    This topic intends to provide userChrome.css tweaks for users of ColorfulTabs. Anything that makes life better is welcome.

    • This topic was modified 5 years, 2 months ago by Shivanand Sharma.
    January 30, 2018 at 9:52 am #20156
    Shivanand Sharma
    Keymaster

    To edit userChrome.css do the following:

    1. Click on the Firefox Menu on the top right of the Firefox window.
    2. Click on Help.
    3. Click on Troubleshooting Information.
    4. Click on Show in Finder or Open Folder
    5. Open the Chrome folder. Create it if it doesn't exist.
    6. Edit the file named userChrome.css (create if it doesn't exist).

    Attachments:
    You must be logged in to view attached files.
    January 30, 2018 at 9:53 am #20162
    Shivanand Sharma
    Keymaster

    Preventing colorfulTabs from changing the ToolBar color:

    toolbar {
      background: initial !important;
    }
    January 30, 2018 at 11:44 am #20166
    Thalon
    Participant

    Tried this fix with my custom CSS (see the other thread below) to obtain a dark grey background (selecting the appropriate option in the CSS), but it doesn't work (i see that color for just a second after FF startup, then it reverts back to its usual light grey color).

    February 13, 2018 at 4:36 pm #20174
    FluxApex
    Participant

    Thanks for this. Glad I can use Color Tabs and still theme FF. Instead of 'initial' I have just used contrasting colors for 'background' and 'color'. I'm not that big a fan of 'Metro' colors in the newer apps, but contrasting metro colors would work well here.
    What I'm using atm:

    
    toolbar {
      background: #263238 !important;
      color: #ECEFF1 !important;
    }
    
    February 15, 2018 at 2:08 am #20175
    dave phillips
    Participant

    I want the option to have each tab be a different color like in the past.Is there a way to do it in Firefox Quantum ?

    February 15, 2018 at 10:46 am #20176
    EchoingWolfcry
    Participant

    Hi,

    At first I have to say how much I appreciate your work on this addons. It should be a must-have for any browser in my opinion. (It is so sad the Mozilla Foundation do not think the same about that.)

    But despite of the description and the code written above (that I used) I can not colorize the inactive, white tabs and I couldn't remove the color of the tool-bar background, so I can't observe any change in colors of UI, and it looks like before.

    I created the userChrome.css file in my home directory of Firefox 58.0.2 (64 bit) on Linux Mint 18.3 Xfce, and I can not see any change at the colors of the tabs or toolbar background. (If more tabs are open only the active one is colored and the color of the toolbar background is identical with that color, but the other tabs are uncolored (just white).

    The code wich I wrote in userChrome.css is:

    #  Customization of UI of Firefox Quantum
    
    toolbar {
      background: initial !important;
    }
    
    toolbar {
      background: #263238 !important;
      color: #ECEFF1 !important;
    }

    So if I failed the CSS file, please forgive me, but I'm not versed at all in CSS-coding.
    It would be useful the exact list of the code-lines (or the relevant part) of a userChrome.css file which it could be used as a template to make ColorfulTabs work as the good old version of it.
    Thank you any help in anticipation.

    February 15, 2018 at 3:21 pm #20177
    FluxApex
    Participant

    It is not in the home directory, but in a sub directory named "Chrome" so the file would be located @

    "%appdata%\Mozilla\Firefox\Profile.*******\Chrome\userChrome.css"

    in your appropriate Profile directory. He did state in the OP that if the "Chrome" folder doesn't exist you must create it.

    • This reply was modified 5 years, 1 month ago by FluxApex.
    • This reply was modified 5 years, 1 month ago by FluxApex.
    February 15, 2018 at 3:31 pm #20180
    FluxApex
    Participant

    And for your reference the second

    background: #<hex color>

    will override the first

    background: initial

    and therefore the first becomes redundant and no longer needed.

    February 23, 2018 at 11:45 am #20181
    EchoingWolfcry
    Participant

    @ FluxApex,

    Thanks, I had forgotten to make the chrome directory, indeed.
    So I made it and took the userChrome.css file there (into the Chrome directory). . . But it doensn't work.
    I use Linux not Windows, so the right path for my Chrome directory is:
    /home/"user-name"/.mozilla/firefox/"name_of_profile_directory".default/Chrome/userChrome.css

    I don't know where is the problem, but I will try to investigate it.
    Maybe the name of the "Chrome" directory have to change to "chrome", because Linux is sensitive for letters and makes diference between capitals and non-capitals.

    On the other hand, you are right, I make a redundancy in my userChrome.css so I made a correction for this reason.
    Thanks again.

    ------------------------------------------------------------

    Update:

    I made a directory in my profile directory of Firefox named "chrome", too. I copied the userChrome.css file to that.
    So I have to directories with this css file, one named "Chrome" and another named "chrome". Nothing happened after restarting of Firefox (version 58.0.2 , 64bit on Linux Mint 18.3 Xfce) .

    What could be the root of this issue ?

    • This reply was modified 5 years, 1 month ago by EchoingWolfcry.
    • This reply was modified 5 years, 1 month ago by EchoingWolfcry.
    February 23, 2018 at 12:09 pm #20184
    EchoingWolfcry
    Participant

    I would say before:

    "On the other hand, you are right, I had MADE a redundancy in my userChrome.css, so I made a correction after your reply."

    Sorry, my English is not too good.
    I hope you could understand the essence of my message, even so.

    Regards,
    E.W.

    P.S.
    The problem persists, so I would be thankful if you or someone other expert can share with me some tips & tricks to fix it.

    February 25, 2018 at 4:52 pm #20185
    FluxApex
    Participant

    I use Linux as well (several distros), but I haven't messed with it much lately and have been developing Windows utilities so it's been a while, but you may find good information here:

    Ubuntu - Userchrome css tweaks for firefox quantum and later

    It seams you might have to add:
    @namespace xul url(https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

    to the top of your userChrome.css file

    • This reply was modified 5 years, 1 month ago by FluxApex.
    March 1, 2018 at 2:58 pm #20190
    Thalon
    Participant

    Still trying to tweak my custom CSS: trying to use this trick to emulate the addon bar at the bottom: it works, the only drawback is that the new addon bar is influenced by colorfultabs and has the same color of the active tab.
    I need to have it the same color of the address bar (light gray in my case): any info about the lines of code I need to add to my CSS to make it so?
    Thanks in advance for any help.

    April 27, 2018 at 8:50 pm #20206
    Jay Palmquist
    Participant

    Does anyone have a code that will automatically open a link into a new tab?

    Otherwise, I'm always having to right-click on 'Open in new tab.'

    May 22, 2018 at 11:05 pm #20207
    Raviv L
    Participant

    how you create userChrome.css file

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 21 total)
1 2 →
  • You must be logged in to reply to this topic.
Log In
Login With:
Facebook Google
Log In
Login With:
Facebook Google

Categories

AddOns Usage Disclaimer

All addons are experimental and do not come with any guarantee of any sort. They are not tested and may not be compatible with your version of Firefox. Use at your own risk!
  • About AddOn Genie

Copyright © 2023 — AddOn Genie • All Rights Reserved • Powered by Lander .Framework on Genesis.