User CSS for Typophile | Browser: Firefox

With the help of the add-on stylish you can make use of it.

/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
* User style for Typophile.com
* Version: 1.004
* Author: Arno Enslin
* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

@-moz-document domain(typophile.com) {

* {
font-family: Verdana !important;
font-size: 13px !important;
}

.content {
color: #222 !important;
}

code {
font-family: Consolas !important;
font-size: 14px !important;
}

.comment .content *,
.node .content * {
line-height: 19px !important;
}

a:link,
a:visited,
a:hover,
a:active {
border-bottom: 0 none !important;
}

.comment .content a:link,
.comment .content a:visited,
.comment .content a:hover,
.comment .content a:active,
.node .content a:link,
.node .content a:visited,
.node .content a:hover,
.node .content a:active {
text-decoration: underline !important;
font-weight: normal !important;
}

a:link,
a:visited {
color: #003E6F !important;
}

a:hover {
color: #A00 !important;
}

a:active {
color: #003E6F !important;
}

ul.primary li a {
color: #FFF !important;
}

ul.primary li a:hover {
color: #AAA !important;
}

ul.primary li.active a {
color: #AAA !important;
}

}

Comments

Thanks Arno, I'll try this out later. Maybe we should have a GUI forum for this kind of thing!

You don't even need an add-on to make this work. You can directly put this code into the file chrome\userContent.css in your Firefox profile folder.

@ Jens

Yes, I remember, that it also works directly with the userContent.css. I started to learn CSS by customizing the Firefox skin by adding CSS to the userChrome.css.

Do you know, if it is possible, to disable the original Typophile CSS without using “menu / view / page style / no style”? First it is not permanently disabled and second I would like to turn it automatically off, when my user style is turned on. I am not searching for a CSS, that tries to rebuild the browser default preferences, but a kind of one-liner in my code.

If you want to permanently disable the original CSS of Typophile.com, you can use the add-on Greasemonkey and this script:

// ==UserScript==
// @name Typophile
// @namespace http://www.greasespot.net/
// @include http://typophile.com/*
// ==/UserScript==
for (var i = 0; i < document.styleSheets.length; i++)
document.styleSheets[i].disabled = true;

Your user CSS (stylish/UserContent.css) will not be disabled by that code. And instead of user CSS, you can add CSS to the script above. Example:

var css = "* {color: #00f !important;}" +
"div {background: #ff0 !important;}";
GM_addStyle(css);

Greasemonkey adds an icon to the status bar, with the help of which you can turn Greasemonkey on and off.

And you also can use those user scripts in Google Chrome.