how do I change the color of the navigation bar and active tab? - firefox

What I'm trying to do is relatively simple. Once upon a time before v44 of firefox, the nav bar and active tab were colored with a grdient spanning from grey to transparent. They turned that to a rather unappealing grey at one of the updates and I managed to solve it using Stylish. Now that Stylish has updated, the code no longer works, and my knowledge of CSS is very basic. So- what do I need to do to color it with a gradient? I hate it as it is now and it just bugs me...
I added a pic to show what I want. The desired effect is the version labeled "old". what I see now is the "new".
Thank you!
1600 x 667 - 251K

Comments

  • What is the rule you were using before? You might be able to transplant it directly into a userChrome.css file to get the previous appearance. (userChrome.css is a style sheet that Firefox reads at startup and applies to the user interface.)

    Are you running Firefox 52 (Extended Support Release) or Firefox 56?

    For Firefox 52, you should roll Stylish back: https://addons.mozilla.org/firefox/addon/stylish/versions/

    For Firefox 56, tough call, Firefox 57 is due out next week and the tab bar coloring may look quite different, so I'm not sure whether to wait for the change or go ahead and implement what you've been using up until now.
  • Well, I've been using this:
    #nav-bar {
    background-image: linear-gradient(rgba(255,255,255,.4), transparent) !important;
    }
    #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar) {
    background-image: none;

    Its something quick I managed to find at the time. It used to work.
    I'm currently using v56. maybe I'll wait for 57 then, if its due soon....
  • edited November 9 Firefox
    In Firefox 58 ("Nightly") it helps to also clear the background color from the bars:
    #nav-bar {
    background-color: transparent !important;
    background-image: linear-gradient(rgba(255,255,255,.4), transparent) !important;
    }
    #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar) {
    background-color: transparent !important;
    background-image: none;
    }
    Edit: To avoid applying the modification to the built-in themes (light, dark, default):
    #main-window[lwtheme="true"]:not([style*="defaultthemes"]) #nav-bar {
    background-color: transparent !important;
    background-image: linear-gradient(rgba(255,255,255,.4), transparent) !important;
    }
    #main-window[lwtheme="true"]:not([style*="defaultthemes"]) #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar) {
    background-color: transparent !important;
    background-image: none;
    }
  • Am I supposed to put this in a UserCrome.css file? I tried searching for one in my ff user profile folder and found nothing, so as the ff guide suggests, I made a chrome folder and added a new usercrome file in it. pasted this there and refreshed the browser. Nothing happens.
  • Did you include an "h" in the file name? userChrome.css (all lower case except the C)

    In case it helps: https://userchrome.org/how-create-userchrome-css.html
  • That did it!! That was lack of attention on my part, thank you for all the help!! :)
    Do you happen to know the designated name of the bookmark bar beneath the url bar? Where one can put folders and pages for easy access. That must have another name because it stayed a rather opaque grey while the bar above is now the desired gradient.
  • Bookmarks are on the

    #PersonalToolbar

    But the second rule (the one with all the "nots" in it) is supposed to cover that bar.

    Maybe it's necessary to add !important to that last bit:
    #main-window[lwtheme="true"]:not([style*="defaultthemes"]) #nav-bar {
    background-color: transparent !important;
    background-image: linear-gradient(rgba(255,255,255,.4), transparent) !important;
    }
    #main-window[lwtheme="true"]:not([style*="defaultthemes"]) #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar) {
    background-color: transparent !important;
    background-image: none !important;
    }
  • Yup, that solved it. It looks great now! Thank you very much for all the help and the patience!
Sign In or Register to comment.