Changing home-button, back-button, forward-button colours

[LuvKomputrs]

Wanted to tweak the appearance of my Firefox 57 further.
Did not like the flat appearance of the home and the dull grey of the back and forward buttons.

I added this to my userChrome.css

Code: Select all

#home-button
{
  fill: brown !important;
}
#back-button {
fill: green !important;
}
#forward-button {
fill: green !important;
}

You can change the colour depending on the theme or theme(originally called Persona) that you are using.

https://s8.postimg.org/3kqrhmtmt/luvkom ... tweaks.png

[therube]

+1+1
(I was just going to, +1, but the board said it was too few characters, to I +1+1'd it.)

[BuddhaNature]

Thanks very much for that, LuvKomputrs. Have applied to my own FF now.

However, you need to edit the code you have posted. There is a missing } bracket. That should be the last line of the code you posted. (When I first pasted your code in my userChrome.css file and then relaunched FF all of my other code seemed not to work - then I noticed the missing }.)

Also for those of us that still use the "reload" button the following code works:

Code: Select all

#reload-button {
  fill: red !important;
}

[LuvKomputrs]

+1+1
(I was just going to, +1, but the board said it was too few characters, to I +1+1'd it.)

Thank You.

[LuvKomputrs]

Thanks very much for that, LuvKomputrs. Have applied to my own FF now.

However, you need to edit the code you have posted. There is a missing } bracket. That should be the last line of the code you posted. (When I first pasted your code in my userChrome.css file and then relaunched FF all of my other code seemed not to work - then I noticed the missing }.)

You're Most Welcome!

Added the } bracket to the last line of code and edited my post.

Thanks!

[hch]

LuvK ... thank you. That adds some well needed color.

[BuddhaNature]

For a list of colours that it might be possible to use see this page: CSS Colors

[LuvKomputrs]

For a list of colours that it might be possible to use see this page: CSS Colors

Some CSS colours are different when applied to XUL coding as opposed to HTML coding.
e.g. The colour red. CSS colour code is #BF0040 this can be used easily in HTML, but, in XUL you may need to type in the word red for the colour.

[BuddhaNature]

I was kind of wondering about that myself. I've tried typing in some of the colour-names in the userChrome.css file and it worked fine for every colour I tried. Haven't tried the corresponding hex codes at all. In any case, I've got my FF the way I want it now and am happy with the result.

Thanks for the additional information, LuvKomputrs.

[flaneurb]

I use hex codes for colors in my userChrome.css without any issue.

[LuvKomputrs]

I was kind of wondering about that myself. I've tried typing in some of the colour-names in the userChrome.css file and it worked fine for every colour I tried. Haven't tried the corresponding hex codes at all. In any case, I've got my FF the way I want it now and am happy with the result.

Thanks for the additional information, LuvKomputrs.

You're Most Welcome!

I'd also recommend using the hex codes here for the colours.

[LuvKomputrs]

I use hex codes for colors in my userChrome.css without any issue.

Good to know. However some hex codes for colours are better than others.
The shorter hex codes are the best(IMHO personal and professional opinion)when adding hex codes in XUL in a userChrome.css file.
e.g The hex codes here at the forums are excellent.

[therube]

48 65 78 20 69 73 20 6d 79 20 66 61 76 6f 72 69 74 65 20 74 6f 6f 2c 20 75 6e 6c 65 73 73 20 79 6f 75 20 67 65 74 20 68 65 78 65 64 21

[Ed1]

Thanks for all of these postings!

Does anyone know the code to change the color of any of these toolbar buttons: Addons, Options, Bookmarks, Sidebar, Search and what looks like a shelf of books button to "View History, Saved Bookmarks and more"? (With the examples posted above, perhaps all that is needed would be the first line of code for any of these buttons.)

[Frank Lion]

Does anyone know the code to change the color of any of these toolbar buttons

You do.

Put chrome://browser/skin/browser.css in the addressbar and press Enter. All the internal IDs for all the toolbarbuttons are there. Just do Ctrl + F down the file searching for # or toolbarbutton, etc.

For example, you already know from above that #reload-button is for the Reload button, see?