Is that the entire script? Something like:
document.body.appendChild(css);
seems to be missing.
Edit: Oh, I see, it's added to the head section. The end of the body may override more preexisting styles.
Anyway, to make all other text white, you could try listing some other common elements:
div, p, td, li, span {color:white !important;}
document.body.style.color = 'whatever color';
Also, it might be a good idea to do this with stylish if you just want to change how website looks like.
Anyway, to make all other text white, you could try listing some other common elements:
div, p, td, li, span {color:white !important;}
Hi Jefferson. I copy and pasted your code to the end of my code and it doens't work. What do you suggest please?
document.body.style.color = 'whatever color';
Hi, JixunMoe. I also added your code to the end of my code but it doesn't change the fonts to white. Btw, I can't use Stylish because I'm using this code on a browser on my android phone called, Habit Browser, which only uses user scripts. Please let me know what you suggest next. Thank you.
The code above will work on every website, is that what you want? Sounds mad to me but here:
// ==UserScript==
// @name Userscript to Change Color of Font
// @namespace ThisIsMaddness
// @author Tommy Smith
// @description Userscript for a browser for your Android phone.
// @include *
// @version 0.2
// @grant none
// ==/UserScript==
var css = document.createElement('style');
css.type = "text/css";
css.innerHTML = "* { color: white !important; } * { background-color: darkgray !important; } a { color: aqua !important; }";
document.head.appendChild(css);
The code above will work on every website, is that what you want? Sounds mad to me but here:// ==UserScript==
// @name Userscript to Change Color of Font
// @namespace ThisIsMaddness
// @author Tommy Smith
// @description Userscript for a browser for your Android phone.
// @include *
// @version 0.2
// @grant none
// ==/UserScript==
var css = document.createElement('style');
css.type = "text/css";
css.innerHTML = "* { color: white !important; } * { background-color: darkgray !important; } a { color: aqua !important; }";
document.head.appendChild(css);
Hi, TimidScript. Thank you for the code! It worked perfectly on google. But it doesn't work so well on yahoo. I attached 2 pics showing with and without the code. In the attached pic, the blue links on that site (yahoo.com) doesn't show under the code.
Also, if you visit one of the links on the site, it shows that the blue links with their images don't show. I attached 2 more pics showing with and without the code. Here's the link:
http://sports.yahoo.com/blogs/mlb-big-league-stew/fan-in-critical-condition-after-beating-in-angel-stadium-parking-lot-friday-205024890.html
It's the best code so far. Great job so far! Please help me in fixing these issues.. Thank you. I look forward to your next reply!
The reason this occurs is because it makes all element have a gray background, including transparent overlays. For a complex site like yahoo, a lot of time trying is needed to fix the styling. There is no simple solution for such a request.
Below is a starting fix to get you on your way. Hope it helps.
css.innerHTML = "* { color: white !important; } *:not([class*='overlay']) { background-color: darkgray !important; } a { color: aqua !important; }"
The reason this occurs is because it makes all element have a gray background, including transparent overlays. For a complex site like yahoo, a lot of time trying is needed to fix the styling. There is no simple solution for such a request.
Below is a starting fix to get you on your way. Hope it helps.css.innerHTML = "* { color: white !important; } *:not([class*='overlay']) { background-color: darkgray !important; } a { color: aqua !important; }"
Hi, TimidScript. Thank you for replying. I got a few questions, please...
1) Where do I put this script at? Do I add it to the bottom of the previous script?
2) As I said before, the previous script works in Google. But when I go to Google maps, the map doesn't show. Is there a code to make it show?
3) When I go to a site, the page turns white normally before the code renders it in dark grey. How do we turn this white page dark before it transitions to dark grey?
Hi TimidScript. Please help me with the above questions. I'd hugely appreciate your help. Thanks.
I guess you'd replace it with the current innerHTML... so
// ==UserScript==
// @name Userscript to Change Color of Font
// @author Tommy Smith
// @description Userscript for a browser for your Android phone.
// @version 0.3
// @include *
// ==/UserScript==
var css = document.createElement('style');
css.type = "text/css";
css.innerHTML = "* { color: white !important; } *:not([class*='overlay']) { background-color: darkgray !important; } a { color: aqua !important; }";
document.getElementsByTagName('body')[0].appendChild(css);
document.getElementsByTagName("body")[0].setAttribute("bgcolor", "darkgray");
document.getElementsByTagName("body")[0].setAttribute("text", "white");
document.getElementsByTagName("body")[0].setAttribute("alink", "aqua");
document.getElementsByTagName("body")[0].setAttribute("link", "aqua");
document.getElementsByTagName("body")[0].setAttribute("vlink", "aqua");
As per request, I also replaced the head tag with body tag to overwrite more styles.
Make sure you're uninstalling previous versions of the scripts before installing new ones!
@koolxx
1) What Tommy Smith Said
2) The code cannot work on every site. Some site use AJAX and the code is too simple to work on complex sites. You are really using the wrong tool for styling your webpage. You should be using something like Stylish. If you use Stylish then all you need to do is learn CSS which is a lot easier than JS.
3) The page needs to load first before the styles are added. In other words the script runs after the page is fully loaded. There's no *easy* way to fix it. This shouldn't be an issue with stylish though I could be wrong as I do not use it ^_^.
You really need to learn CSS as what you are asking for is something that you will constantly need to update and change as you come across new sites. There cannot be a simple easy generic CSS for your needs. It's impossible.
Few useful CSS pages:
http://www.w3schools.com/cssref/default.asp
http://www.w3.org/TR/css3-selectors/#selectors
I would encourage you to look into stylish as it is more suited to your needs. I believe it is meant for styling web pages the way you want, and thus it should overcome many issues that GM script above has. Someone here who knows more might give more information on it.
Best of luck on your script
@koolxx
I would encourage you to look into stylish as it is more suited to your needs. I believe it is meant for styling web pages the way you want, and thus it should overcome many issues that GM script above has. Someone here who knows more might give more information on it.
Best of luck on your script
Hi, TimidScript. Thanks for the feedback. As for Stylish, I want to use it. But it's not compatible with my android browser, which is called Habit. I use Stylish on my PC. I just wish the dev used it in Habit also.
I don't know if you know user styles. But I'm having one similar issue on my PC. As I said, I'm using Stylish on it. When I go to a site, the page turns white before the code renders it dark grey. Can I make the page turn dark grey instead of white? I know you answered this question for Habit browser. Maybe there's a fix to this on my PC. Please let me know!
I guess you'd replace it with the current innerHTML... so
// ==UserScript==
// @name Userscript to Change Color of Font
// @author Tommy Smith
// @description Userscript for a browser for your Android phone.
// @version 0.3
// @include *
// ==/UserScript==
var css = document.createElement('style');
css.type = "text/css";
css.innerHTML = "* { color: white !important; } *:not([class*='overlay']) { background-color: darkgray !important; } a { color: aqua !important; }";
document.getElementsByTagName('body')[0].appendChild(css);
document.getElementsByTagName("body")[0].setAttribute("bgcolor", "darkgray");
document.getElementsByTagName("body")[0].setAttribute("text", "white");
document.getElementsByTagName("body")[0].setAttribute("alink", "aqua");
document.getElementsByTagName("body")[0].setAttribute("link", "aqua");
document.getElementsByTagName("body")[0].setAttribute("vlink", "aqua");
As per request, I also replaced the head tag with body tag to overwrite more styles.
Make sure you're uninstalling previous versions of the scripts before installing new ones!
Hey Tommy! Thank you for this code. I appreciate it. Maybe you can still help some, if you don't mind.
1) When I go to the Images tab in Google and click on an image to see just that image, the image appears for 4 secs then disappears. Any fix to this?
2) On wiki, the page remains white. The only way I can render it to the code is if I refresh the page. Can you force it to turn dark grey?
3) On CNN the videos appear before I play them then disappear. Again, is there a fix to this to force the video to show?
Thanks again for the help. Hope to hear from you soon!
I don't know if you know user styles. But I'm having one similar issue on my PC. As I said, I'm using Stylish on it. When I go to a site, the page
turns white before the code renders it dark grey. Can I make the page turn dark grey instead of white? I know you answered this question for Habit browser. Maybe there's a fix to this on my PC. Please let me know!
By turn white I assume you mean it renders normally before your dark gray styling is applied. This is normal as the page needs to load first before styling is applied. If that isn't the case and the actual page flashes white in an abnormal fashion, I have no clue what that could be as I am unable to reproduce it using the script above and even if I could there's nothing one can do as it has to do with the browser engine.
If you really must have instant gray as document loads then you would need to add styling on document-start rather than document-end and continue to re-add the styling as your styling is being over-written or gets lower precedence. You would need to use interval timer. As soon as the header is added you would need to re-adding styling as yours are overwritten. This will continue until page is fully loaded.
You need to say the browser for you other questions.
1) Can't reproduce on FF. Works fine
2) Can't reproduce on FF. Works fine
3) Can't reproduce on FF. Works fine
But I would guess it is something to do with overlays but I could be wrong.
This is normal as the page needs to load first before styling is applied. I am unable to reproduce it using the script above and even if I could there's nothing one can do as it has to do with the browser engine.
I don't know if you know user styles. But I'm having one similar issue on my PC. As I said, I'm using Stylish on it. When I go to a site, the page
turns white before the code renders it dark grey. Can I make the page turn dark grey instead of white? I know you answered this question for Habit browser. Maybe there's a fix to this on my PC. Please let me know!
If you really must have instant gray as document loads then you would need to add styling on document-start rather than document-end and continue to re-add the styling as your styling is being over-written. You would need to use interval timer. As soon as the header is added you would need to re-add styling as yours are overwritten. This will continue until page is fully loaded.
But I would guess it is something to do with overlays but I could be wrong.
Hi, TimidScript. Thanks again for the input. I did forget to mention my browser for my PC, which is Opera. You said I'd need to add styling to document-start to my code to render automatic page load in grey. And use an interval timer. How do I do that?
@koolxx, why don't you use Opera's built-in mode to always show pages with your custom colors?
P.S. you may want to uncheck "My style sheet" checkbox, I can't remember what it does exactly.
...and here's the font color button.
@koolxx, why don't you use Opera's built-in mode to always show pages with your custom colors?
P.S. you may want to uncheck "My style sheet" checkbox, I can't remember what it does exactly.
Hi, wOxxOm. I tried what you suggested a while ago. It works on some styles I got in Stylish on my PC. But some styles still show that white flash. For example, I got a style for Craigslist that shows that white flash. I've tried installing different styles for Craigslist. And no matter what style I install, I still get the white flash. So it could be the Craigslist website doing this. If this is so, is there a code to turn the pre-load page grey?
@koolxx, what Stylish and styles are you talking about? I suggested you to use Opera's built-in feature as you can see on the screenshots.
Anyway, I think there won't be a universal solution and you'll have to manually adjust many sites in Opera's per site preferences. Back in the 90s when web page layouts were simple such a global override could have worked but not now.
@koolxx, what Stylish and styles are you talking about? I suggested you to use Opera's built-in feature as you can see on the screenshots.
Anyway, I think there won't be a universal solution and you'll have to manually adjust many sites in Opera's per site preferences. Back in the 90s when web page layouts were simple such a global override could have worked but not now.
Hi, wOxxOm. The style I use for Craigslist is attached. But as I said, I tried other CL styles and still get the white flash. And as I said also, I've tweaked Opera's site preferences. It works on most of my styles except for the style for CL.
Very importantly, going back to our previous talk about the code for my android browser (Habit), I got issues with google images and youtube. For example, in google images I click an image to view it. It appears for a sec then disappears. When I go to YT, the image of the video shows up for a sec then disappears.
Can you come up with a code that can fix these 2 issues? Thank you for your time!
Sorry, I can't help you with this and probably any solution would be just temporary until the CL site slightly changes something inside CSS/html layout.
Sorry, I can't help you with this and probably any solution would be just temporary until the CL site slightly changes something inside CSS/html layout.
I think youre confused. When I asked about a solution to my google images and YT, I was referring to the issue on my android browser, not the CL issue on my PC.
You said I'd need to add styling to document-start to my code to render automatic page load in grey. And use an interval timer. How do I do that?
You have to read on it. What you are asking is something you need to be able to maintain all the time by yourself. You must admit it is a very unique request that need to work on all sites you browse.
You need to use "setInterval" and use an id for style elements you add. With each loop you need to remove the old css and add the new one. To me it sound really silly and I am not sure how it would behave.
The white flash sounds like something you can't escape as it must be something to do with the Browser engine. What normally should happen is the page loads in default colours and the styles are applied. That does not sound like the "white flash" you are describing
Another way is to use a mutation observer and parse through all elements and change the colours. MO can cause some real problems though.
You really need to learn basic JS and CSS. Given the code above and the hints here you should be able to learn enough to amend the code and maintain it for a new site that you come across.
You need to use "setInterval" and use an id for style elements you add. With each loop you need to remove the old css and add the new one. To me it sound really silly and I am not sure how it would behave.
The white flash sounds like something you can't escape as it must be something to do with the Browser engine.
Another way is to use a mutation observer and parse through all elements and change the colours. MO can cause some real problems though.
HI, TimidScript. Ok, Here's what I did. I changed the User Agent for Yahoo from Android to PC and it now works well. As for CNN and Youtube, the image of the video still appears for a sec then disappears. Sadly, changing the User Agent for those sites doens't work.
The issue in Google images gallery where clicking an image to view it disappears, isn't the result of the code. It's an issue with the browser that I emailed the dev to fix. Hopefully, he'll provide an update.
As for the white "flash" preload, I also sent a request to the dev to update the browser to fix this issue. I doubt he'll fix it since I'm sure I'm the only user of his browser complaining of this issue.
You really need to learn basic JS and CSS.
I just know limited basics of CSS. The problem is that this android browser doesn't use CSS. It only uses user scripts. Maybe ther's a converter that can convert CSS to user script?
Thank you and the rest of the guys for your help. I hugely apprecaite the time and dedicated effort.
> I just know limited basics of CSS. The problem is that this android browser doesn't use CSS. It only uses user scripts. Maybe ther's a converter that can convert CSS to user script?
CSS is just styling script, that is used to define the layout of the html. All browsers utilise CSS. The js script above inserts CSS into the document page.
Maybe you should consider getting FireFox or Chrome for your Andriod device?
It will take a week or two to learn everything you need to maintain your desired script.
CSS is just styling script, that is used to define the layout of the html. All browsers utilise CSS. The js script above inserts CSS into the document page.
Hi, TimidScript.. But that doesn't any make sense. I actually put in a CSS code into Habit browser. And it fails to work. Can you explain this?
Maybe you should consider getting FireFox or Chrome for your Andriod device?
No way! I love Habit browser. It's the best in the world. This is a superior browser. Beats all them completely.
You may still help me with an issue. When I turn off the script in Habit browser, paragraphs are automatically fitted in the page. And when I zoom in, text gets big and is still automatically fitted. But, when I turn on the script, paragraphs aren't fitted automatically and I got to scroll back and forth to read the entire paragraph. It's VERY annoying. Is there a code I can add to the script to automatically fit the page? This happens on many sites, but not all.
Below are 2 images showing how the text looks with the script on and off. Please let em know.. Thanks !!!!!!
Someone should start a Habit browser forum. It's very difficult to find information about it, and its UI goes on for miles...
Someone should start a Habit browser forum. It's very difficult to find information about it, and its UI goes on for miles...
Hi Jefferson. The area to input user scripts in Habit is found in Settings > Content > User Script.
If you, TimidScript or anyone else here can post a code to allow text wrap, I'd greatly appreciate it.
If you, TimidScript or anyone else here can post a code to allow text wrap, I'd greatly appreciate it.
Hi the guy who takes quoting so SRSLY. The answer to your question is there. PLEASE try to stay on topic.
I have no idea what the habit browser is and not sure how it functions and what you imply you put "CSS". You can't insert CSS in browser, but use plug-ins to that allow you to alter the styling of page. There is no doubt that habit utilises CSS, as the web is drenched in the stuff. CSS have been around since the 1990s (I think).
Hi, TimidScript. Thanks for your input. The code you provided was a miracle. It does word wrap on most sites. But, on some sites, word wrap doesn't work. If you could help me with a code that forces word wrap on all sites, I'd appreciate it. Please let me know!
Bit thanks to wOwwOw and the other guys.. thanks!
What Code Turns Black Fonts to White
The code below makes it hard to read the font since it's in black and it matches the dark background. I don't know much about user scripts, so I need your help. What's the code to make any remaining font in black turn to white?
// ==UserScript==
// @name Userscript to Change Color of Font
// @author Tommy Smith
// @description Userscript for a browser for your Android phone.
// @version 0.2
// @include *
// ==/UserScript==
var css = document.createElement('style');
css.type = "text/css";
css.innerHTML = "html { color: white !important; } body { color: white !important; } * { background-color: darkgray !important; } a { color: aqua !important; }";
document.getElementsByTagName('head')[0].appendChild(css);
document.getElementsByTagName("body")[0].setAttribute("bgcolor", "darkgray");
document.getElementsByTagName("body")[0].setAttribute("text", "white");
document.getElementsByTagName("body")[0].setAttribute("alink", "aqua");
document.getElementsByTagName("body")[0].setAttribute("link", "aqua");
document.getElementsByTagName("body")[0].setAttribute("vlink", "aqua");