How to change the urlbar richtext results colors?

[avada]

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.

[ShareBird]

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;
}

[avada]

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.

[avada]

Well, I ran out of ideas.
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]

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;
}

[avada]

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]

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");

[ShareBird]

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]

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;}

[avada]

Thanks for the tips!
I'll try them out.

[avada]

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.

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]

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.

[patrickjdempsey]

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).

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.

[avada]

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]

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).