Categories: Discuss Chrome :

Adding Custom Style Sheets To Google Chrome

Showing 1-8 of 8 messages
Adding Custom Style Sheets To Google Chrome dwight.stegall 11/7/10 4:14 PM
Add Custom Style Sheets To Google Chrome

This has been possible for a long time. But I forgot about it. :(

DISCLAIMER: I have tested this with Windows 7 Home Premium 64-bit and the current stable version of Chrome on a Notebook Computer with a keyboard and a mouse. I don't use other devices or operating systems so you will have to test this with them yourself.

You will be wasting your time reading this unless you have at least a working knowledge of Cascading Style Sheets 2.1.

Chrome and a few other browsers allow you to add your own Custom Style Sheet(s) to control how web pages look. But in Chrome you can't add it in the Options Panel like in other browsers. You have to use a Command Line Switch to activate it and then edit a style sheet in a folder. Below is how it is on my computer.

Right-click the Chrome shortcut on your desktop > Properties > Shortcut Tab > Click on the URL in the Target: text box > use the right arrow key to scroll to the right end of the URL > Press the spacebar to leave a space > Paste this in there --enable-user-stylesheet

Open Windows Explorer and paste this in the location bar %userprofile%\appdata\local\google\chrome\user data\default\user stylesheet

Then put your own custom.css file in that folder if there isn't one in there already. Now is your chance to rid yourself of that gold border around form text boxes. :)

My style sheet blocks everything except text and links on all pages. It reminds me of the old time Lynx browser. I call it Webmaster's Nightmare.

FYI: The stable version of Chrome I have is Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.7 (KHTML, like Gecko) Chrome/7.0.517.44 Safari/534.7 that I downloaded from Google Pack. It installs in c:\program files (x86) folder (Window 7 32-bit software folder). The other one you download here http://www.google.com/chrome might store its files in a different folder here %userprofile%\appdata\ you will just have to look for it yourself. It's been a long time sice I have used that version and can't remember where to tell you to look for them.

You should also try this on Chromium, ChromePlus, Iron and other Chrome clones.

Do you want to play a trick on a friend? Add the following to their custom.css

* {display:none}

Every page they load will be blank. {:-) It will drive them crazy trying to troubleshoot that problem. hahahaha

2010-11-10
I just realized you don't need the --enable-user-stylesheet switch. It is already enabled. All you need to do is edit the "custom.css" style sheet, save it, and you are done.
Re: Adding Custom Style Sheets To Google Chrome dwight.stegall 11/7/10 4:25 PM
I forgot to give credit. I first heard about this reading the following article.

http://www.downloadsquad.com/2010/03/08/chromium-nighly-build-adds-support-for-custom-user-stylesheets/
Re: Adding Custom Style Sheets To Google Chrome dwight.stegall 11/7/10 4:31 PM
If you would rather use my Webmaster's Nightmare as a bookmarklet here is the JavaScript.

javascript:(function(){var%20newSS,%20styles=':link%20{text-decoration:underline%20!important;%20color:blue%20!important;}%20:visited%20{text-decoration:underline%20!important;%20color:purple%20!important;}%20object,embed,iframe,applet,img%20{display:none%20!important;}%20*%20{font-weight:900%20!important;%20background-image:none%20!important;%20background-color:white%20!important;}%20p,span,li,address,td,div,font%20{color:black%20!important;}';%20if(document.createStyleSheet)%20{%20document.createStyleSheet(%22javascript:'%22+styles+%22'%22);%20}%20else%20{%20newSS=document.createElement('link');%20newSS.rel='stylesheet';%20newSS.href='data:text/css,'+escape(styles);%20document.getElementsByTagName(%22head%22)[0].appendChild(newSS);%20}%20})();
Re: Adding Custom Style Sheets To Google Chrome dwight.stegall 11/8/10 1:36 PM
Here is a basic style sheet that will help most people with minor sight problems. Bolded Arial font.

* {font-family:arial,sans-serif !important; font-weight:900 !important;}
Re: Adding Custom Style Sheets To Google Chrome dwight.stegall 11/8/10 1:40 PM
!important tells your browser to override the style sheet in the page you are viewing. the asterisk tells your browser to add that to everything in the page. but iut cannot add it to content inside of an iframe.
Re: Adding Custom Style Sheets To Google Chrome vasa1 11/10/10 9:47 AM
This gets rid of the shadow effect on text:
* { text-shadow: none !important; }

Re: Adding Custom Style Sheets To Google Chrome dwight.stegall 11/10/10 10:01 AM
Text shadows make reading less boring.
Re: Adding Custom Style Sheets To Google Chrome vasa1 11/10/10 10:25 AM
No doubt.