MozillaZine

How to change the urlbar richtext results colors?

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

Post Posted June 29th, 2015, 7:35 am

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

ShareBird

User avatar
 
Posts: 2740
Joined: December 8th, 2004, 7:09 am
Location: Berlin | Made in Brasil

Post Posted June 29th, 2015, 9:51 am

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

Post Posted June 29th, 2015, 10:04 am

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

Post Posted June 29th, 2015, 12:34 pm

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

User avatar
 
Posts: 2740
Joined: December 8th, 2004, 7:09 am
Location: Berlin | Made in Brasil

Post Posted June 29th, 2015, 1:53 pm

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

Post Posted June 29th, 2015, 2:19 pm

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

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted June 29th, 2015, 3:20 pm

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/

ShareBird

User avatar
 
Posts: 2740
Joined: December 8th, 2004, 7:09 am
Location: Berlin | Made in Brasil

Post Posted June 29th, 2015, 3:31 pm

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.

Frank Lion

User avatar
 
Posts: 20159
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted June 29th, 2015, 3:39 pm

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;}
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

avada
 
Posts: 1818
Joined: February 10th, 2008, 6:30 am
Location: Hungary

Post Posted June 29th, 2015, 4:02 pm

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

avada
 
Posts: 1818
Joined: February 10th, 2008, 6:30 am
Location: Hungary

Post Posted June 29th, 2015, 4:36 pm

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

Frank Lion

User avatar
 
Posts: 20159
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted June 29th, 2015, 4:52 pm

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.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted June 29th, 2015, 5:09 pm

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

Post Posted June 30th, 2015, 1:46 am

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

User avatar
 
Posts: 2740
Joined: December 8th, 2004, 7:09 am
Location: Berlin | Made in Brasil

Post Posted June 30th, 2015, 2:27 am

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.

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 1 guest