MozillaZine

How Do I Change the Address Bar Colors?

User Help for Mozilla Firefox
koolx

User avatar
 
Posts: 390
Joined: July 11th, 2014, 7:37 pm

Post Posted March 11th, 2017, 12:37 pm

Hi guys. I got 3 questions about how to theme my FF's address bar. I need code for 'userChrome.css' to complete my theming. Here are my questions:

1) How do I change the font color in the address bar? Look at the attachment. The URL in the address bar shows grey and white font color. How do I change only the grey font color to another color?

Image

2) The drop down list shows the name of the webpage followed by the URL. How do I just change the color of the URL part?

Image

3) How do I change the color of the icon at the beginning of the address bar circled in red?

Image


Again, I need just the css code to do these things. Thanks!

barbaz
 
Posts: 1524
Joined: October 1st, 2014, 3:25 pm

Post Posted March 15th, 2017, 9:37 pm

For #2, try this -
Code: Select all
#PopupAutoCompleteRichResult .ac-url-text {
  color: #A0F !important;
}

/* for the "active" item .....*/
#PopupAutoCompleteRichResult richlistitem:hover .ac-url-text {
  color: #F00 !important;
}

Adjust colors to your liking.

I don't think I can help with #1 or #3, sorry.
*Always* check the changelogs BEFORE updating that important software!

koolx

User avatar
 
Posts: 390
Joined: July 11th, 2014, 7:37 pm

Post Posted March 16th, 2017, 12:05 am

barbaz wrote:For #2, try this -
Code: Select all
#PopupAutoCompleteRichResult .ac-url-text {
  color: #A0F !important;
}

.


Hi barbaz, Your 1st code kinda works if I omit a pre-existing code. As a result, it renders the ‘URL part’ a different color. But sadly, makes the ‘description part’ black. See screen shot.

Image


The code below is the pre-existing code I was talking about. This code makes the description and URL part white without your code. Let me know what we can do. Thanks!

Code: Select all
#PopupAutoCompleteRichResult .autocomplete-richlistitem description:last-child {
    color: white !important;}


.

barbaz
 
Posts: 1524
Joined: October 1st, 2014, 3:25 pm

Post Posted March 16th, 2017, 7:52 am

Try changing your pre-existing code to
Code: Select all
#PopupAutoCompleteRichResult .autocomplete-richlistitem description:last-child:not(.ac-url-text) {
    color: white !important;}


I see that I made a small mistake in the second CSS code above. Try this instead -
Code: Select all
/* for the "active" item .....*/
#PopupAutoCompleteRichResult richlistitem[selected="true"] .ac-url-text {
  color: #F00 !important;
}

It still needs the change to the pre-existing code.
*Always* check the changelogs BEFORE updating that important software!

koolx

User avatar
 
Posts: 390
Joined: July 11th, 2014, 7:37 pm

Post Posted March 16th, 2017, 3:11 pm

barbaz wrote:Try changing your pre-existing code to
Code: Select all
#PopupAutoCompleteRichResult .autocomplete-richlistitem description:last-child:not(.ac-url-text) {
    color: white !important;}


I see that I made a small mistake in the second CSS code above. Try this instead -
Code: Select all
/* for the "active" item .....*/
#PopupAutoCompleteRichResult richlistitem[selected="true"] .ac-url-text {
  color: #F00 !important;
}

It still needs the change to the pre-existing code.



Hi barbaz.. you the man! Thanks dude! Appreciate it a million. Now I got just a few questions regarding the Library window. Look at the attached screen shot please. Here are my questions:

1) How do I change the background color of the bar headers, 'Name' and 'Most Recent Visit' (circled in red in top of the image)?
2) How do I change the background color of the right click menu popup window (in the middle of the screen shot)?
3) How do I increase font size for all fonts?

Image

I tried using 'placesContentTitle' for question #1 but that doesnt work. Hope you can help.

barbaz
 
Posts: 1524
Joined: October 1st, 2014, 3:25 pm

Post Posted March 16th, 2017, 4:14 pm

koolx wrote:Hi barbaz.. you the man! Thanks dude! Appreciate it a million.

You're welcome! 8-)

koolx wrote:1) How do I change the background color of the bar headers, 'Name' and 'Most Recent Visit' (circled in red in top of the image)?

This should make the headers black with white text -
Code: Select all
treecol {
  -moz-appearance: none !important;
  background-color: #000;
  color: #FFF;
}

treecolpicker {
  -moz-appearance: none !important;
  background-color: #000;
  color: #FFF;
}

.tree-columnpicker-icon {
  filter: contrast(0) brightness(2);
}


koolx wrote:2) How do I change the background color of the right click menu popup window (in the middle of the screen shot)?

Does this work?
Code: Select all
menupopup {
  -moz-appearance: none !important;
  background-color: #000;
  color: #FFF;
}
menupopup > menu:not([disabled="true"]), menuitem:not([disabled="true"]) {
  color: #FFF;
}


koolx wrote:3) How do I increase font size for all fonts?

I have no idea how to do this inside Firefox. I usually handle font size with OS settings, and I'm not familiar with Windows 10, sorry.
*Always* check the changelogs BEFORE updating that important software!

koolx

User avatar
 
Posts: 390
Joined: July 11th, 2014, 7:37 pm

Post Posted March 16th, 2017, 11:29 pm

barbaz wrote:
koolx wrote:Hi barbaz.. you the man! Thanks dude! Appreciate it a million.

You're welcome! 8-)
.


Barbaz, thank you. I only had to use one of your codes to change the background color of the header bars. Thank you for that!

But in order for all the codes to work I had to delete the inverted color code. Everything works but an issue remains. Look at the screen shot. I need to change the color of the 3 highlights:

1) The one with 'February';
2) The search result you click on that stays by default ('Information mozille forums');
3) The other where you hover with the mouse.

Image

barbaz
 
Posts: 1524
Joined: October 1st, 2014, 3:25 pm

Post Posted March 17th, 2017, 9:14 am

koolx wrote: I only had to use one of your codes to change the background color of the header bars.

Well, for those specific header bars, yes. The other two codes are to make these things...
Image


... look like this -
Image

koolx wrote:1) The one with 'February';
2) The search result you click on that stays by default ('Information mozille forums');
3) The other where you hover with the mouse.

Try starting with this and playing around with the colors.
Code: Select all
treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected) {
  background-color: #B00000 !important;
}
treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, focus) {
  background-color: #00CC00 !important;
}

treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover) {
  background-color: #A0A !important;
}


For some reason, those codes seem to require closing and re-opening whatever is affected. So keep that in mind when editing it.
*Always* check the changelogs BEFORE updating that important software!

koolx

User avatar
 
Posts: 390
Joined: July 11th, 2014, 7:37 pm

Post Posted March 17th, 2017, 11:03 am

barbaz wrote:
Code: Select all
treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, focus) {
  background-color: #00CC00 !important;
}

treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover) {
  background-color: #A0A !important;
}


Hi barbaz. Thanks for the codes. We're getting very close. One small thing still needs fixing. Your code for the highlights work. But if you look at the screen shot I've attached you'll notice the font is black on the pre-selected items. If we could get that fixed everything will fall into place perfectly.


Image

barbaz
 
Posts: 1524
Joined: October 1st, 2014, 3:25 pm

Post Posted March 17th, 2017, 1:36 pm

(wrong info deleted)
Last edited by barbaz on March 17th, 2017, 3:33 pm, edited 1 time in total.
*Always* check the changelogs BEFORE updating that important software!

koolx

User avatar
 
Posts: 390
Joined: July 11th, 2014, 7:37 pm

Post Posted March 17th, 2017, 2:29 pm

barbaz wrote:Oops, forgot about that. Just add "color: #FFF !important;" where the text isn't white -
Code: Select all
treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected) {
  background-color: #B00000 !important;
  color: #FFF !important;
}
treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, focus) {
  background-color: #00CC00 !important;
  color: #FFF !important;
}


But thats what I did before. And it doesn't work.

barbaz
 
Posts: 1524
Joined: October 1st, 2014, 3:25 pm

Post Posted March 17th, 2017, 3:33 pm

sigh, my bad. Scratch what I wrote before, that can only restyle the background.

Does this restyle the text? -
Code: Select all
treechildren::-moz-tree-cell-text(selected),
treechildren::-moz-tree-cell-text(hover) {
  color: #FFF !important;
}


(This code, too, requires closing and re-opening affected stuff.)
*Always* check the changelogs BEFORE updating that important software!

koolx

User avatar
 
Posts: 390
Joined: July 11th, 2014, 7:37 pm

Post Posted March 17th, 2017, 4:20 pm

barbaz wrote:sigh, my bad. Scratch what I wrote before, that can only restyle the background.

Does this restyle the text? -
Code: Select all
treechildren::-moz-tree-cell-text(selected),
treechildren::-moz-tree-cell-text(hover) {
  color: #FFF !important;
}


(This code, too, requires closing and re-opening affected stuff.)


Ahhh... finally! Thanks a million dude. You know your stuff! Talk to you soon bro.. have a good one.

barbaz
 
Posts: 1524
Joined: October 1st, 2014, 3:25 pm

Post Posted March 17th, 2017, 4:24 pm

You're welcome, and thanks for the kind words. 8-)
*Always* check the changelogs BEFORE updating that important software!

koolx

User avatar
 
Posts: 390
Joined: July 11th, 2014, 7:37 pm

Post Posted March 20th, 2017, 1:54 am

Hi barbaz,

I ran into an issue with the menu popup. Please look at the screen shot. You will see there are white separator lines. I tried to use 'display: none'. But that messes up other elements. What code do you recommend to change their color?

Image

Also, see the screen shot below. is there a way to change the background color of the fields in the bookmark panel? And to the change the color of the borders around 'Done', 'Remove Bookmark' and the two buttons above it to the right?

Image

Return to Firefox Support


Who is online

Users browsing this forum: Bing [Bot], Google Adsense [Bot] and 12 guests