User CSS for Typophile | Browser: Firefox

Arno Enslin's picture

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

Bendy's picture

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

Jens Kutilek's picture

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.

Arno Enslin's picture

@ 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.

Arno Enslin's picture

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.

Syndicate content Syndicate content