MozillaZine

SOLVED: FF57: Change Google's background color?

User Help for Mozilla Firefox
Flycaster

User avatar
 
Posts: 843
Joined: November 19th, 2008, 12:13 pm
Location: Boynton Beach, FL

Post Posted January 18th, 2018, 7:52 am

I am now trying to customize FF57. I have been able to move the tab toolbar to below the navigation bar. I am also using ColorfulTabs to add a little color. The problem is that the tab bar is white (as are the tabs not in use) and any site that has a white background will cause the the tabs and tabbar to meld into the background. Luckily, most sites are not all white and there is no problem discerning the tab bar from the site; however an often used site - Google, has a white background and I would like to selectively change Google's background color. BTW, changing Google's background color in Google Chrome, doesn't effect its color in Firefox...still white.
Last edited by Flycaster on January 20th, 2018, 11:39 am, edited 1 time in total.
Windows 10 H 64-bit, Firefox The Latest, IE11, Thunderbird The Latest, Avast Pro

siffemoz
 
Posts: 112
Joined: January 29th, 2016, 4:36 pm

Post Posted January 19th, 2018, 10:52 pm

Install the Stylus extension (https://addons.mozilla.org/en-US/firefox/addon/styl-us/) .

Click the toolbar icon and choose Manage > Write a new style. Enter a name for the Style, then enter this in the Code box:

body {background-color: Silver !important;}

If you don't like Silver, find more colors at http://www.w3schools.com/colors/colors_names.asp and use whatever you want.

Click Save, and you're done. You may have to refresh the Google page.

Brummelchen
 
Posts: 3576
Joined: March 19th, 2005, 10:51 am

Post Posted January 20th, 2018, 1:40 am

The problem is that the tab bar is white

Windows 10, Win8 is grey.
correction: Windows 10 is dark grey (firefox 58)
and any site that has a white background will cause the the tabs and tabbar to meld into the background.

thats one of your installed extension, maybe colorfulcrap. or try a new profile. i can not confirm.

concerning stylish/stylus - such styles are only valid for webpages, not firefox, firefox need userchrome.css (mandatory)
Last edited by Brummelchen on January 20th, 2018, 11:15 am, edited 1 time in total.

siffemoz
 
Posts: 112
Joined: January 29th, 2016, 4:36 pm

Post Posted January 20th, 2018, 1:47 am

He said "Google, has a white background and I would like to selectively change Google's background color." I understood that to mean he's talking about google dot com. In which case, what I suggested works.

Brummelchen
 
Posts: 3576
Joined: March 19th, 2005, 10:51 am

Post Posted January 20th, 2018, 2:15 am

thats right, ofc. i think he has a general problem with "white" pages. thats why i answered to the tab bar issue.

google on firefox with logged in google-account should work, but i wont work with the default startpage within firefox (about:home, google search) which is NOT a google page, its internal.

to find colour entries -> open page, right click "Inspect element" -> look for "body" or "html" on right side (css)
example (medium grey)
@-moz-document domain("www.google.de"), domain("www.google.com") {

html, body {
background-color: #666666 !important;
}

}

but this would only match the search results, not the header above!

maybe he should use a pre-defined one:
https://userstyles.org/styles/browse?se ... gle%20dark

Flycaster

User avatar
 
Posts: 843
Joined: November 19th, 2008, 12:13 pm
Location: Boynton Beach, FL

Post Posted January 20th, 2018, 9:11 am

Haven't tried either tweak as I'm not quite sure what to do. I think Brummelchen is correct in saying that the white background within the tab toolbar is due to my using ColorfulTabs...which probably overrides any Firefox setting for the toolbar??? However, if this is correct, I don't feel like giving it up until someone comes out with a new TMP. So, then this would leave me with having to control any website white backgrounds. And as Google has a white background and is very frequently used, having to set it's background to another color is OK with me. So, Brummelchen, will the code you entered globally change all website backgrounds to a stated color?

Also, as I now look at the pre-defined Googles, although most are black (which is no good for me,) I do see several that are not black and not white. Not sure how to use, but I think I would first have to dl Styles (https://addons.mozilla.org/en-US/firefox/addon/styl-us/) and then place a Google that I liked from this (https://userstyles.org/styles/browse?se ... gle%20dark) into styles??? But as i haven't done anything with Styles for very long time, as this point I really don't know how to set it up...if this is the way to go?
Windows 10 H 64-bit, Firefox The Latest, IE11, Thunderbird The Latest, Avast Pro

Frank Lion

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

Post Posted January 20th, 2018, 9:46 am

Flycaster wrote:Haven't tried either tweak as I'm not quite sure what to do.

Now that you have, as I remember, your chrome folder and userChrome.css file in the right place and working, it's time for action in the userContent.css file - viewtopic.php?p=13807241#p13807241

Hopefully, you already have that in the chrome folder, alongside the userChrome.css one. If not then just create a blank file, paste this in at the top -

Code: Select all
@namespace url(http://www.w3.org/1999/xhtml);


...and save the file as exactly userContent.css in your chrome folder. You're done.

For your Google page stuff then just use something like this, pasted below that html namespace line, and adjust the colours as required (it'll understand red, yellow, etc not just the fancy hex stuff - #E0E1ED that I normally use) -

Code: Select all
/*Franks Google non-white page fix...*/
@-moz-document domain("www.google.co.uk"),
domain("www.google.com")  {

html, body {
background-color: #E0E1ED !important;
}
.sfbgg {
background-color: #B7B8C2 !important;}}


Save, restart Firefox, you're done.
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.)

Flycaster

User avatar
 
Posts: 843
Joined: November 19th, 2008, 12:13 pm
Location: Boynton Beach, FL

Post Posted January 20th, 2018, 10:26 am

Frank, I saved the code. First along with my other css codes, and then after deleting it from there, I saved it as a new file. But in either case, there was no change in the Google background???
Windows 10 H 64-bit, Firefox The Latest, IE11, Thunderbird The Latest, Avast Pro

Frank Lion

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

Post Posted January 20th, 2018, 10:53 am

Flycaster wrote: First along with my other css codes

Your other codes are in your userChrome.css file, so yeah, it wouldn't work there. That file is for changing stuff on the UI. Here, you want to change a website.

I saved it as a new file. But in either case, there was no change in the Google background???

In which case, your new file is not named as userContent.css, or is in the wrong place i.e. not in the chrome folder or you didn't add the html namespace line to your file.

One of the advantages of me writing the code I'm putting here, as opposed to copying it from someone, is that I can eliminate that immediately, as I already know that it will work if put in the right place.
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.)

Flycaster

User avatar
 
Posts: 843
Joined: November 19th, 2008, 12:13 pm
Location: Boynton Beach, FL

Post Posted January 20th, 2018, 11:37 am

Perfecto! Code works beautifully. My problem was that I didn't know one had to put the code into a userContent file and not the userChrome file. I just love tweaking FF, but specific tweaks are only made once or twice, and usually there is quite a bit of time between tweaks; thus, I usually don't remember what I did. Using userContent and userChome is a prime example of my forgetfulness. Thanks again for sticking with me.
Windows 10 H 64-bit, Firefox The Latest, IE11, Thunderbird The Latest, Avast Pro

Flycaster

User avatar
 
Posts: 843
Joined: November 19th, 2008, 12:13 pm
Location: Boynton Beach, FL

Post Posted January 20th, 2018, 6:33 pm

Say Frank, I just discovered that when viewing YouTube, there is a white clash between YT and my tab toolbar. I'm thinking that with just a minor modification, I can use your code to change YT's background color, but I don't know what this should be changed to:
@namespace url(http://www.w3.org/1999/xhtml);
/*Franks Google non-white page fix...*/
@-moz-document domain("www.google.co.uk"),
domain("www.google.com")
Windows 10 H 64-bit, Firefox The Latest, IE11, Thunderbird The Latest, Avast Pro

Frank Lion

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

Post Posted January 21st, 2018, 4:57 am

Flycaster wrote:Say Frank, I just discovered that when viewing YouTube, there is a white clash between YT and my tab toolbar.

There's a pre-made userContent.css for YouTube here - viewtopic.php?p=13807241#p13807241 But, for your purposes you only really need the ("youtube.com") part, with a comma before it, added to your original stuff, i.e.

/*Franks Google non-white page fix...*/
@-moz-document domain("www.google.co.uk"),
domain("www.google.com"),("youtube.com")

It strikes me that you are going to keep coming across this white tab/white website page a lot, so here's one for your userChrome.css -

Code: Select all
   #TabsToolbar,.tabbrowser-strip {
      border-bottom: 1px  #A4AAB3 solid !important;}

    /*tab{ border-bottom: 1px  red solid !important;}*/
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.)

Flycaster

User avatar
 
Posts: 843
Joined: November 19th, 2008, 12:13 pm
Location: Boynton Beach, FL

Post Posted January 21st, 2018, 6:25 am

Obviously, I'm speaking too soon about my getting the hang of using css code as I have failed to get either of your codes to work. I entered them into their appropriate files and saved. Here is how my userContent.css looks after adding the youtube domain:
@namespace url(http://www.w3.org/1999/xhtml);
/*Franks Google non-white page fix...*/
@-moz-document domain("www.google.co.uk"),
domain("www.google.com"),("youtube.com") {

html, body {
background-color: #E0E1ED !important;
}
.sfbgg {
background-color: #B7B8C2 !important;}}

And, as for the addition to userChrome, as I wasn't sure which namespace to use, I used this one:
@namespace url(http://www.w3.org/1999/xhtml);

I tried doing a little reading about namespace, but just couldn't wrap my head around it. Unfortunate, as I have the feeling that is where my present problem is. BTW, read your previous post on userChrome/Content and agree with you about one should learn how to do this stuff rather than lean on someone else's knowledge. However, at 79 this is becoming a more difficult task, though not impossible. Nonetheless, I do appreciate your guidance and I know that I am learning enough to become at least partially "independent."
Windows 10 H 64-bit, Firefox The Latest, IE11, Thunderbird The Latest, Avast Pro

Frank Lion

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

Post Posted January 21st, 2018, 7:36 am

Flycaster wrote: Here is how my userContent.css looks after adding the youtube domain:

That one was my fault, I forgot to add domain to it....mainly because I was busy doing something else. I've rewritten this and made it better. The following is all your userContent.css should contain (tested and working) -

Code: Select all
@namespace url(http://www.w3.org/1999/xhtml);

 /*Franks non-white Google and YT fix...*/
@-moz-document domain("www.google.co.uk"),
domain("www.google.com"),domain("youtube.com")  {

html, body,#hdtb,#hdtbSum,#appbar {
background-color: #E0E1ED !important;
}

.sfbgg,#yt-masthead-container {
background: -moz-linear-gradient(top, #B7B8C2, #E0E1ED) !important;
/*background-color: #B7B8C2 !important;*/
}}



I tried doing a little reading about namespace, but just couldn't wrap my head around it.

The namespace line only appears once in each file at the head of the file.

userContent.css - @namespace url(http://www.w3.org/1999/xhtml);
userChrome.css - @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

That's why people often post snippets without a namespace line here, just because they know you'll already have it in the file. So, to get that #TabsToolbar snippet to work just paste it, as it is, into your userChrome.css file.

However, at 79 this is becoming a more difficult task, though not impossible. Nonetheless, I do appreciate your guidance and I know that I am learning enough to become at least partially "independent."

No problem.

I'll leave you to learn now. ;)
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.)

LIMPET235
Moderator

User avatar
 
Posts: 38336
Joined: October 19th, 2007, 1:53 am
Location: The South Coast of N.S.W. Oz.

Post Posted January 21st, 2018, 7:47 am

Darn it all to Hxxx.

I don't know how many times I read this & your code, Frank & I still missed the missing "domain" entry.
Image

All same as the old Stylish stuff.
eg; > ,domain(forums.malwarebytes.org)
Ancient Amateur Astronomer
Win-7-HP/Intel® DualCore-2.0GHz/500G HDD/4 Gig Ram/550Watt PSU/350WattUPS/Firefox-20.0-57.0/T-bird-2.0.0.24/SnagIt-v10.0.1/MWP-7.11.0.
RadioYachting. (Always choose the "Custom" Install.)

Return to Firefox Support


Who is online

Users browsing this forum: No registered users and 3 guests