Monday, December 13, 2010

How to create a custom colour scheme on each webpage you want

What you need:
Firefox with the GreaseMonkey add-on installed.
So first get GreaseMonkey and install: https://addons.mozilla.org/en-US/firefox/addon/748/
After restarting Firefox go to http://userscripts.org./ or better go directly to
the High_Contrast script http://userscripts.org./scripts/show/2563

Now go to the folder in which your Greasemonkey scripts are stored.
In windows this will be something like:
Documents and Settings\user\application data\mozilla\firefox\profiles\+7565fgdgd.default\gm_scripts

In my Arch install it is in /home/paul/.mozilla/firefox/qqnkoj88.default/gm_scripts

Create a new folder, with a name fitting to your custom colour scheme. I choose yellow_red, well because these are the colours I want to use, bright yellow letters on a red background.
Copy the high_contrast.user.js in the high_contrast folder to your new folder yellow_red.
Now edit the js file with a simple text editor. In Windows you may have to change the file extension from .js to .txt to be able to do that. If you don't see the file extensions in Windows Explorer, you will have to change your folder options and unmark hide file extensions.

Now we gonna change this section

Pref("aggressive", false) ? global_css : alternative_css
// true means we go right ahead and apply our stylesheet.
// false means it's just an alternative you can select under "View: Page Style"
)([
'body, * {',
' background-color: ' + Pref('black_colorval', '#000') +' !important;',
' background-image: none !important;',
' color: ' + Pref('white_colorval', '#fff') +' !important;',
'}',
'a:link { color: ' + Pref('link_colorval', '#a0a0ff') +
' !important; text-decoration: underline !important; }',
'a:visited { color: ' + Pref('vlink_colorval', 'purple') +
' !important; }',
'a:active { color: ' + Pref('alink_colorval', 'red') +
' !important; }'
].join("\n"), Pref('stylesheet_name', "White-On-Black"));
}



to

Pref("aggressive", false) ? global_css : alternative_css
// true means we go right ahead and apply our stylesheet.
// false means it's just an alternative you can select under "View: Page Style"
)([
'body, * {',
' background-color: ' + Pref('red_colorval', '#FF0000') +' !important;',
' background-image: none !important;',
' color: ' + Pref('yellow_colorval', '#FFFF00') +' !important;',
'}',
'a:link { color: ' + Pref('link_colorval', '#a0a0ff') +
' !important; text-decoration: underline !important; }',
'a:visited { color: ' + Pref('vlink_colorval', 'purple') +
' !important; }',
'a:active { color: ' + Pref('alink_colorval', 'green') +
' !important; }'
].join("\n"), Pref('stylesheet_name', "Yellow-On-Red"));
}

What I have done is replaced black by red and white by yellow and also I also adapted the colour codes, where necessary, to what I wanted.
Where do you find these hexadecimal codes for colour?
For instance here: http://www.december.com/html/spec/color.html

Now we want the right name in the script.
Change in line 84
link.setAttribute("title", title || "WhiteOnBlack");
to
link.setAttribute("title", title || "YellowOnRed");

After you have changed the colours to your liking, change the name of the script itself to yellow_red.user.js

Now we have to take care greasemonkey can find the new script :
In gm_scripts you will find config.xml.
Again open this with a text editor and then first copy and than change a script section in this file; it starts with opening bracket script and finishes with forward slash script closing bracket.
Change the text between the brackets < >:
Script filename="high_contrast.user.js" name="High_Contrast" namespace="http://interglacial.com/" description="makes the background black and the text white, either in an alternate stylesheet you can select as needed, or immediately" enabled="true" basedir="high_contrast"

to
Script filename="yellow_red.user.js" name="Yellow_Red" namespace="http://interglacial.com/" description="makes the background red and the text yellow, either in an alternate stylesheet you can select as needed, or immediately" enabled="true" basedir="yellow_red"


Save and close.


Now activate the new script by restarting firefox and going to View, Pagestyle, select yellow_red.



New Colour scheme on every page or optional?
Default the high contrast script is set as a page option; that is each time you want a page to look like this you have to acitvate it in described manner.
You can change that and make it the default look for each webpage in your browser.

Open the config page in Firefox by puttingin the address bar: about:config

and filter on interglacial. Change in the first line with the tag agressive the boolean false to true by double clicking on it. There you can also modify the link or visited link colours.

No comments:

Blog Archive