How Do I Change the Address Bar Colors?

User Help for Mozilla Firefox
User avatar
koolx
Posts: 532
Joined: July 11th, 2014, 7:37 pm

How Do I Change the Address Bar Colors?

Post by koolx »

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: 1504
Joined: October 1st, 2014, 3:25 pm

Re: How Do I Change the Address Bar Colors?

Post by barbaz »

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.
User avatar
koolx
Posts: 532
Joined: July 11th, 2014, 7:37 pm

Re: How Do I Change the Address Bar Colors?

Post by koolx »

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: 1504
Joined: October 1st, 2014, 3:25 pm

Re: How Do I Change the Address Bar Colors?

Post by barbaz »

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.
User avatar
koolx
Posts: 532
Joined: July 11th, 2014, 7:37 pm

Re: How Do I Change the Address Bar Colors?

Post by koolx »

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: 1504
Joined: October 1st, 2014, 3:25 pm

Re: How Do I Change the Address Bar Colors?

Post by barbaz »

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.
User avatar
koolx
Posts: 532
Joined: July 11th, 2014, 7:37 pm

Re: How Do I Change the Address Bar Colors?

Post by koolx »

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: 1504
Joined: October 1st, 2014, 3:25 pm

Re: How Do I Change the Address Bar Colors?

Post by barbaz »

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...
[img]/img]


... look like this -
[img]/img]
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.
Last edited by barbaz on October 7th, 2017, 10:19 am, edited 1 time in total.
User avatar
koolx
Posts: 532
Joined: July 11th, 2014, 7:37 pm

Re: How Do I Change the Address Bar Colors?

Post by koolx »

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: 1504
Joined: October 1st, 2014, 3:25 pm

Re: How Do I Change the Address Bar Colors?

Post by barbaz »

(wrong info deleted)
Last edited by barbaz on March 17th, 2017, 3:33 pm, edited 1 time in total.
User avatar
koolx
Posts: 532
Joined: July 11th, 2014, 7:37 pm

Re: How Do I Change the Address Bar Colors?

Post by koolx »

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: 1504
Joined: October 1st, 2014, 3:25 pm

Re: How Do I Change the Address Bar Colors?

Post by barbaz »

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.)
User avatar
koolx
Posts: 532
Joined: July 11th, 2014, 7:37 pm

Re: How Do I Change the Address Bar Colors?

Post by koolx »

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: 1504
Joined: October 1st, 2014, 3:25 pm

Re: How Do I Change the Address Bar Colors?

Post by barbaz »

You're welcome, and thanks for the kind words. 8-)
User avatar
koolx
Posts: 532
Joined: July 11th, 2014, 7:37 pm

Re: How Do I Change the Address Bar Colors?

Post by koolx »

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
Post Reply