How Do I Change the Address Bar Colors?
- koolx
- Posts: 532
- Joined: July 11th, 2014, 7:37 pm
How Do I Change the Address Bar Colors?
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?
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?
3) How do I change the color of the icon at the beginning of the address bar circled in red?
Again, I need just the css code to do these things. Thanks!
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?
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?
3) How do I change the color of the icon at the beginning of the address bar circled in red?
Again, I need just the css code to do these things. Thanks!
-
- Posts: 1504
- Joined: October 1st, 2014, 3:25 pm
Re: How Do I Change the Address Bar Colors?
For #2, try this -
Adjust colors to your liking.
I don't think I can help with #1 or #3, sorry.
Code: Select all
#PopupAutoCompleteRichResult .ac-url-text {
color: #A0F !important;
}
/* for the "active" item .....*/
#PopupAutoCompleteRichResult richlistitem:hover .ac-url-text {
color: #F00 !important;
}
I don't think I can help with #1 or #3, sorry.
- koolx
- Posts: 532
- Joined: July 11th, 2014, 7:37 pm
Re: How Do I Change the Address Bar Colors?
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.barbaz wrote:For #2, try this -.Code: Select all
#PopupAutoCompleteRichResult .ac-url-text { color: #A0F !important; }
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;}
-
- Posts: 1504
- Joined: October 1st, 2014, 3:25 pm
Re: How Do I Change the Address Bar Colors?
Try changing your pre-existing code to
I see that I made a small mistake in the second CSS code above. Try this instead -
It still needs the change to the pre-existing code.
Code: Select all
#PopupAutoCompleteRichResult .autocomplete-richlistitem description:last-child:not(.ac-url-text) {
color: white !important;}
Code: Select all
/* for the "active" item .....*/
#PopupAutoCompleteRichResult richlistitem[selected="true"] .ac-url-text {
color: #F00 !important;
}
- koolx
- Posts: 532
- Joined: July 11th, 2014, 7:37 pm
Re: How Do I Change the Address Bar Colors?
barbaz wrote:Try changing your pre-existing code toI see that I made a small mistake in the second CSS code above. Try this instead -Code: Select all
#PopupAutoCompleteRichResult .autocomplete-richlistitem description:last-child:not(.ac-url-text) { color: white !important;}
It still needs the change to the pre-existing code.Code: Select all
/* for the "active" item .....*/ #PopupAutoCompleteRichResult richlistitem[selected="true"] .ac-url-text { color: #F00 !important; }
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?
I tried using 'placesContentTitle' for question #1 but that doesnt work. Hope you can help.
-
- Posts: 1504
- Joined: October 1st, 2014, 3:25 pm
Re: How Do I Change the Address Bar Colors?
You're welcome!koolx wrote:Hi barbaz.. you the man! Thanks dude! Appreciate it a million.
This should make the headers black with white text -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)?
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);
}
Does this work?koolx wrote:2) How do I change the background color of the right click menu popup window (in the middle of the screen shot)?
Code: Select all
menupopup {
-moz-appearance: none !important;
background-color: #000;
color: #FFF;
}
menupopup > menu:not([disabled="true"]), menuitem:not([disabled="true"]) {
color: #FFF;
}
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.koolx wrote:3) How do I increase font size for all fonts?
- koolx
- Posts: 532
- Joined: July 11th, 2014, 7:37 pm
Re: How Do I Change the Address Bar Colors?
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!barbaz wrote:You're welcome!koolx wrote:Hi barbaz.. you the man! Thanks dude! Appreciate it a million.
.
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.
-
- Posts: 1504
- Joined: October 1st, 2014, 3:25 pm
Re: How Do I Change the Address Bar Colors?
Well, for those specific header bars, yes. The other two codes are to make these things...koolx wrote: I only had to use one of your codes to change the background color of the header bars.
[img]/img]
... look like this -
[img]/img]
Try starting with this and playing around with the colors.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.
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;
}
Last edited by barbaz on October 7th, 2017, 10:19 am, edited 1 time in total.
- koolx
- Posts: 532
- Joined: July 11th, 2014, 7:37 pm
Re: How Do I Change the Address Bar Colors?
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.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; }
-
- Posts: 1504
- Joined: October 1st, 2014, 3:25 pm
Re: How Do I Change the Address Bar Colors?
(wrong info deleted)
Last edited by barbaz on March 17th, 2017, 3:33 pm, edited 1 time in total.
- koolx
- Posts: 532
- Joined: July 11th, 2014, 7:37 pm
Re: How Do I Change the Address Bar Colors?
But thats what I did before. And it doesn't work.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; }
-
- Posts: 1504
- Joined: October 1st, 2014, 3:25 pm
Re: How Do I Change the Address Bar Colors?
sigh, my bad. Scratch what I wrote before, that can only restyle the background.
Does this restyle the text? -
(This code, too, requires closing and re-opening affected stuff.)
Does this restyle the text? -
Code: Select all
treechildren::-moz-tree-cell-text(selected),
treechildren::-moz-tree-cell-text(hover) {
color: #FFF !important;
}
- koolx
- Posts: 532
- Joined: July 11th, 2014, 7:37 pm
Re: How Do I Change the Address Bar Colors?
Ahhh... finally! Thanks a million dude. You know your stuff! Talk to you soon bro.. have a good one.barbaz wrote:sigh, my bad. Scratch what I wrote before, that can only restyle the background.
Does this restyle the text? -(This code, too, requires closing and re-opening affected stuff.)Code: Select all
treechildren::-moz-tree-cell-text(selected), treechildren::-moz-tree-cell-text(hover) { color: #FFF !important; }
-
- Posts: 1504
- Joined: October 1st, 2014, 3:25 pm
Re: How Do I Change the Address Bar Colors?
You're welcome, and thanks for the kind words.
- koolx
- Posts: 532
- Joined: July 11th, 2014, 7:37 pm
Re: How Do I Change the Address Bar Colors?
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?
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?
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?
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?