How to change the urlbar richtext results colors?
-
- Posts: 1934
- Joined: February 10th, 2008, 6:30 am
- Location: Hungary
How to change the urlbar richtext results colors?
Hello!
I'd like to change the urlbar colors especially the ugly blue highlight which doesn't fit well with the colors I have in my theme. The url's are also blue, which I don't like.
I'd like to change the urlbar colors especially the ugly blue highlight which doesn't fit well with the colors I have in my theme. The url's are also blue, which I don't like.
- ShareBird
- Posts: 2740
- Joined: December 8th, 2004, 7:09 am
- Location: Berlin | Made in Brasil
- Contact:
Re: How to change the urlbar richtext results colors?
for the urls (and also the searchbar if you want):
Code: Select all
#urlbar html|*.autocomplete-textbox::-moz-selection,
#searchbar html|*.autocomplete-textbox::-moz-selection {
background-color: someColor;
color: someColor;
}
-
- Posts: 1934
- Joined: February 10th, 2008, 6:30 am
- Location: Hungary
Re: How to change the urlbar richtext results colors?
ShareBird wrote:for the urls (and also the searchbar if you want):Code: Select all
#urlbar html|*.autocomplete-textbox::-moz-selection,
#searchbar html|*.autocomplete-textbox::-moz-selection {
background-color: someColor;
color: someColor;
}
Thanks for the tip. Meanwhile I found these worked for me:
Code: Select all
.autocomplete-richlistitem {
}
.autocomplete-richlistitem:hover, .autocomplete-richlistitem[selected="true"]{
}
.ac-url-text{
}
What I would really like to know now is how can I use the the color that's given by the system (windows 8). AKA the color of the titlebar, which changes when my desktop wallpaper changes.
I'm hoping there's a special -moz-Something color for this (like -moz-Dialog).
I could work around this when I was toying with the sidebar and tabs by by going up the hierarchy and setting the parents' colors' to transparent until I reached this color. But apparently whatever is on top here is colored black or something dark colored.
-
- Posts: 1934
- Joined: February 10th, 2008, 6:30 am
- Location: Hungary
Re: How to change the urlbar richtext results colors?
Well, I ran out of ideas.
Someone suggested:
or
It works on #urlbar for example but for some reason not for the elements I want to change (.autocomplete-richlistitem, .autocomplete-richlistitem[selected="true"])
Someone suggested:
Code: Select all
-moz-appearance: -moz-window-titlebar
or
Code: Select all
-moz-appearance: -moz-win-borderless-glass
It works on #urlbar for example but for some reason not for the elements I want to change (.autocomplete-richlistitem, .autocomplete-richlistitem[selected="true"])
- ShareBird
- Posts: 2740
- Joined: December 8th, 2004, 7:09 am
- Location: Berlin | Made in Brasil
- Contact:
Re: How to change the urlbar richtext results colors?
This is the code I'm using:
Code: Select all
#urlbar html|*.autocomplete-textbox::-moz-selection,
#searchbar html|*.autocomplete-textbox::-moz-selection {
background-color: Highlight;
color: HighlightText;
}
-
- Posts: 1934
- Joined: February 10th, 2008, 6:30 am
- Location: Hungary
Re: How to change the urlbar richtext results colors?
ShareBird wrote:This is the code I'm using:Code: Select all
#urlbar html|*.autocomplete-textbox::-moz-selection,
#searchbar html|*.autocomplete-textbox::-moz-selection {
background-color: Highlight;
color: HighlightText;
}
But how? That doesn't seem to be valid here. The html part specifically. Something about an invalid namespace prefix. (The error is localized for me)
- patrickjdempsey
- Posts: 23686
- Joined: October 23rd, 2008, 11:43 am
- Location: Asheville NC
- Contact:
Re: How to change the urlbar richtext results colors?
If you are building a theme based on the default theme, then the CSS file that contains those should already be correctly namespaced. If you are attempting to override the default theme or attempting to build from scratch, then you need to make sure that the CSS files are correctly namespaced at the top:
Code: Select all
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
- ShareBird
- Posts: 2740
- Joined: December 8th, 2004, 7:09 am
- Location: Berlin | Made in Brasil
- Contact:
Re: How to change the urlbar richtext results colors?
patrickjdempsey wrote:If you are building a theme based on the default theme, then the CSS file that contains those should already be correctly namespaced. If you are attempting to override the default theme or attempting to build from scratch, then you need to make sure that the CSS files are correctly namespaced at the top:Code: Select all
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
That's it
- Frank Lion
- Posts: 21177
- Joined: April 23rd, 2004, 6:59 pm
- Location: ... The Exorcist....United Kingdom
- Contact:
Re: How to change the urlbar richtext results colors?
avada wrote:But how? That doesn't seem to be valid here. The html part specifically. Something about an invalid namespace prefix. (The error is localized for me)
Just put the following (or your variation of) above the namespace line in your userChrome.css -
Code: Select all
/*Franks override OS selected text...*/
::-moz-selection {
-moz-appearance:none !important;
background:#6B7E8F;
color: white;}
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
.
-
- Posts: 1934
- Joined: February 10th, 2008, 6:30 am
- Location: Hungary
Re: How to change the urlbar richtext results colors?
Thanks for the tips!
I'll try them out.
I'll try them out.
-
- Posts: 1934
- Joined: February 10th, 2008, 6:30 am
- Location: Hungary
Re: How to change the urlbar richtext results colors?
ShareBird wrote:This is the code I'm using:Code: Select all
#urlbar html|*.autocomplete-textbox::-moz-selection,
#searchbar html|*.autocomplete-textbox::-moz-selection {
background-color: Highlight;
color: HighlightText;
}
Okay, now it works. But I think there's a misunderstanding, I have problems with changing change the the highlight/background colors of the results.
Frank Lion wrote:Just put the following (or your variation of) above the namespace line in your userChrome.css -Code: Select all
/*Franks override OS selected text...*/
::-moz-selection {
-moz-appearance:none !important;
background:#6B7E8F;
color: white;}
This works also. (I see this way it also affects other selected text, which might be good) Though My main problem.
PS:
Okay, sorry I wasn't clear enough in my first post.
The colors of the urlbar [url]results[/url] are my main problem.
I actually managed to change them with the CSS I posted in my second post. Which brought up my other big problem:
I want to base the colors on the system color or whatever the name of the color of the titlebar is in windows. Which the default theme uses on some level. I could also set other UI elements (tabs, sidbar) to depend on this color by making them and their parents transparent. But this approach didn't work with the urlbar results, they just got black.
So the problem I can't solve is how get this "titlebar color" or whatever to the urlbar results.
For clarity this how my UI colors looks:
(The sidebar, the normal tabs' color, and urlbar background color I made (semi)transparent to get a sort of unified look)
- Frank Lion
- Posts: 21177
- Joined: April 23rd, 2004, 6:59 pm
- Location: ... The Exorcist....United Kingdom
- Contact:
Re: How to change the urlbar richtext results colors?
avada wrote:This works also. (I see this way it also affects other selected text, which might be good)
Yep, that's how it works. I started by coding it to be url/searchbar specific and then realised that if an OS selected background/text colour is crap (most are) then really they should all be changed, so that's what I did.
However, I can see now that wasn't your main problem, next time I'm in Firefox I'll have a look at how I've done all that, it's not hard to do, as I recall.
But, I don't really *do* native OS effects in my stuff, I override everything. So a more 'native' look themer will probably be able to advise you better on your particular requirements.
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
.
- patrickjdempsey
- Posts: 23686
- Joined: October 23rd, 2008, 11:43 am
- Location: Asheville NC
- Contact:
Re: How to change the urlbar richtext results colors?
avada wrote:I want to base the colors on the system color or whatever the name of the color of the titlebar is in windows.
There you are out of luck. There is a very old bug out on getting "Aero" colors which no Mozilla folks (or anyone else apparently judging by online discussions) could figure out. I figured out how to do the maths to extract the colors a few years ago, but now no-one can be bothered to build a patch for it (because below).
avada wrote:Which the default theme uses on some level.
Nope. What the default theme does is apply transparencies on top of the titlebar itself. Because they think that's especially clever, they won't bother to to actually extract the real color.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
-
- Posts: 1934
- Joined: February 10th, 2008, 6:30 am
- Location: Hungary
Re: How to change the urlbar richtext results colors?
patrickjdempsey wrote:There you are out of luck. There is a very old bug out on getting "Aero" colors which no Mozilla folks (or anyone else apparently judging by online discussions) could figure out. I figured out how to do the maths to extract the colors a few years ago, but now no-one can be bothered to build a patch for it (because below).
Nope. What the default theme does is apply transparencies on top of the titlebar itself. Because they think that's especially clever, they won't bother to to actually extract the real color.
Ouch. That's rather sad.
So I'm guessing you can channel the color to the urlbar results is because they're not "on" the window but overlaid over other ui elements.
(I'm guessing this color extraction of yours wasn't in the JS, CSS realm, but in the C/C++ source. AKA I can't use an addon/userscript/userstyle to get it.)
- ShareBird
- Posts: 2740
- Joined: December 8th, 2004, 7:09 am
- Location: Berlin | Made in Brasil
- Contact:
Re: How to change the urlbar richtext results colors?
I use for the titlebar the native appearance on Windows. Have a look on one of my themes (I'm at work now, can't figure out the code).