MozillaZine

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

Discussion of general topics about Mozilla Firefox
LuvKomputrs

User avatar
 
Posts: 622
Joined: June 9th, 2010, 8:15 am

Post Posted November 20th, 2017, 1:54 pm

Wanted to tweak the appearance of my Firefox 57 further. :wink:
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/luvkomputrs.FF57.css.tweaks.png
Last edited by LuvKomputrs on November 21st, 2017, 6:02 pm, edited 2 times in total.

therube

User avatar
 
Posts: 19913
Joined: March 10th, 2004, 9:59 pm
Location: Maryland USA

Post Posted November 20th, 2017, 10:01 pm

+1+1
(I was just going to, +1, but the board said it was too few characters, to I +1+1'd it.)
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.19) Gecko/20110420 SeaMonkey/2.0.14 Pinball CopyURL+ FetchTextURL FlashGot NoScript

BuddhaNature

User avatar
 
Posts: 333
Joined: January 3rd, 2008, 9:44 am
Location: Scotland

Post Posted November 21st, 2017, 1:56 pm

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;
}
Last edited by BuddhaNature on January 20th, 2018, 6:59 am, edited 3 times in total.
OS: Windows 7 Pro. SP1 x64

LuvKomputrs

User avatar
 
Posts: 622
Joined: June 9th, 2010, 8:15 am

Post Posted November 21st, 2017, 2:30 pm

therube wrote:+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

User avatar
 
Posts: 622
Joined: June 9th, 2010, 8:15 am

Post Posted November 21st, 2017, 2:32 pm

BuddhaNature wrote: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! :D

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

Thanks! :)

hch
 
Posts: 105
Joined: July 24th, 2008, 2:45 pm

Post Posted November 21st, 2017, 8:03 pm

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

BuddhaNature

User avatar
 
Posts: 333
Joined: January 3rd, 2008, 9:44 am
Location: Scotland

Post Posted December 3rd, 2017, 11:01 am

For a list of colours that it might be possible to use see this page: CSS Colors
OS: Windows 7 Pro. SP1 x64

LuvKomputrs

User avatar
 
Posts: 622
Joined: June 9th, 2010, 8:15 am

Post Posted December 3rd, 2017, 5:21 pm

BuddhaNature wrote: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

User avatar
 
Posts: 333
Joined: January 3rd, 2008, 9:44 am
Location: Scotland

Post Posted December 4th, 2017, 5:22 am

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.
OS: Windows 7 Pro. SP1 x64

flaneurb
 
Posts: 622
Joined: December 10th, 2011, 3:50 am

Post Posted December 4th, 2017, 5:52 am

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

LuvKomputrs

User avatar
 
Posts: 622
Joined: June 9th, 2010, 8:15 am

Post Posted December 4th, 2017, 11:34 am

BuddhaNature wrote: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

User avatar
 
Posts: 622
Joined: June 9th, 2010, 8:15 am

Post Posted December 4th, 2017, 11:35 am

flaneurb wrote: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. :wink:

therube

User avatar
 
Posts: 19913
Joined: March 10th, 2004, 9:59 pm
Location: Maryland USA

Post Posted December 4th, 2017, 7:33 pm

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
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.19) Gecko/20110420 SeaMonkey/2.0.14 Pinball CopyURL+ FetchTextURL FlashGot NoScript

Ed1
 
Posts: 942
Joined: January 30th, 2005, 2:33 pm

Post Posted December 6th, 2017, 4:31 pm

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

User avatar
 
Posts: 20354
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted December 6th, 2017, 5:11 pm

Ed1 wrote: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?
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

Return to Firefox General


Who is online

Users browsing this forum: No registered users and 5 guests