How to change the urlbar richtext results colors?

Discuss application theming and theme development.
avada
Posts: 1932
Joined: February 10th, 2008, 6:30 am
Location: Hungary

How to change the urlbar richtext results colors?

Post by 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.
Image
User avatar
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?

Post by 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;
}
Silvermel - A Theme for Firefox and Thunderbird
YATT - Yet Another Theme Tutorial
Don't give a man a fish. Teach him how to fish instead.
avada
Posts: 1932
Joined: February 10th, 2008, 6:30 am
Location: Hungary

Re: How to change the urlbar richtext results colors?

Post by avada »

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.
avada
Posts: 1932
Joined: February 10th, 2008, 6:30 am
Location: Hungary

Re: How to change the urlbar richtext results colors?

Post by 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"])
User avatar
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?

Post by 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;
}
Silvermel - A Theme for Firefox and Thunderbird
YATT - Yet Another Theme Tutorial
Don't give a man a fish. Teach him how to fish instead.
avada
Posts: 1932
Joined: February 10th, 2008, 6:30 am
Location: Hungary

Re: How to change the urlbar richtext results colors?

Post by avada »

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)
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: How to change the urlbar richtext results colors?

Post by 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");
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/
User avatar
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?

Post by ShareBird »

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 ;-)
Silvermel - A Theme for Firefox and Thunderbird
YATT - Yet Another Theme Tutorial
Don't give a man a fish. Teach him how to fish instead.
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

Re: How to change the urlbar richtext results colors?

Post by Frank Lion »

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.)
.
avada
Posts: 1932
Joined: February 10th, 2008, 6:30 am
Location: Hungary

Re: How to change the urlbar richtext results colors?

Post by avada »

Thanks for the tips!
I'll try them out.
avada
Posts: 1932
Joined: February 10th, 2008, 6:30 am
Location: Hungary

Re: How to change the urlbar richtext results colors?

Post by avada »

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)
Image
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

Re: How to change the urlbar richtext results colors?

Post by Frank Lion »

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.)
.
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: How to change the urlbar richtext results colors?

Post by patrickjdempsey »

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/
avada
Posts: 1932
Joined: February 10th, 2008, 6:30 am
Location: Hungary

Re: How to change the urlbar richtext results colors?

Post by avada »

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.)
User avatar
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?

Post by 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).
Silvermel - A Theme for Firefox and Thunderbird
YATT - Yet Another Theme Tutorial
Don't give a man a fish. Teach him how to fish instead.
Post Reply