(nicht nur) Fefes Blog muss schöner werden

pimpFefeBlog.md

Eine kleine Anleitung/Gedächtnisstütze

Nein, der benannte Blog ist völlig in Ordnung und soll hier nur als Beispiel für Möglichkeiten dienen, nur manch einer möchte eben bei diversen Seiten, die er regelmäßig besucht bestimmte Dinge angepasst haben. Ob man nun gerne Navigationselemente im der Druckansicht ausblenden will oder gleich Bilder ganz ausblenden soll dem eigenen Geschmack überlassen bleiben. Aber für's Erste wäre es schön nicht die Standard-Schrift des Browsers zu sehen wenn z.B. ein Website-Autor berechtigt kein Interesse daran hat seinen Nutzern vorzuschreiben was sie wie sehen sollen oder sich schlicht den Traffik spart.

Und genau dafür gibt es die Möglichkeit Domain-spezifisch lokal definierte Stylesheets einzusetzen.

Stylesheet

Man kann mit den Möglichkeiten der aktuellen Browser u.a. die Stylesheets von Seiten live anpassen und Dinge schnell mal ausprobieren oder korrigieren. Aber nach dem erneuten Laden sind die Änderungen dahin.

Am Bsp. werden blinkende Elemente augenfreundlicher und Fefes Blog nach persönlicher Vorliebe ebenfalls etwas gefälliger:

/*namespace - userstyles extension*/
@namespace url(http://www.w3.org/1999/xhtml);

/* allg. */
blink {
    text-decoration: none ! important;
}

/* für blog.fefe.de */
@-moz-document domain("blog.fefe.de") {
/*angenehmere schrift, weniger blendender Hintergund*/
body{
    font-family: sans,erminal !important;
    background: black;
    color: silver;
    max-width: 40em;
    margin: 0 auto !important;
}
/**/
h2,h2>a{
    color: grey !important;
    font-size: 0.9em;
}
h3{
    font-size: 1.0em;
    display: inline-block;
    width: auto;
    background: silver;
    color: black;
    padding: 0.3ex 0.6em;
    border: 0.5ex solid silver;
    border-radius: 3ex ;
}
a{
    color: silver;
    text-decoration: none;
}
a[href*="http"]:before{
    content:'[';
}
a[href*="http"]:after{
    content:']';
}
a:hover{
        text-decoration: underline;
}
ul{
    display: block;
    margin: 0 auto !important;
    padding: 0 !important;
    
}
ul li{
    margin: 1ex 0 !important;
    /*text-indent: 2em;*/
    list-style: none;
    padding: 0 !important;
}
blockquote{
    text-indent: 1em;
}
blockquote:before,blockquote:after{
    content: '"';
}
/*boxen des footer absetzen*/
body>div{
    border: 1px solid yellow;
    background: silver;
    color: black;
    margin-top: 1em;
    padding: 1ex;
}
/*Links im footer hervorheben*/
body>div>a{
    color: black;
    font-variant: small-caps;
}
body>p,
body>b{
    /*display:none;*/
    font-size: 0.6em;
    font-weight: normal;
    margin:0;
}
}

userContent.css im Mozilla Firefox

1. Profilverzeichnis herausfinden

Unter Hilfe/Support findet sich das Profilverzeichnis (hier: ~/.mozilla/firefox/afwyvgy1.default/) .

2. userContent.css unter chrome/ anlegen

   vi ~/.mozilla/firefox/afwyvgy1.default/chrome/userContent.css

und den Inhalt festlegen...

3. Wichtig! Der Browser muss das Profil neu laden - also Neustart von Firefox

Browser-Extension Stylish für Chrome & Firefox

Damit lassen sich seitenspezifisch Styles anpassen: http://userstyles.org/

Quellen

• Mozilla Knowledgebase / userContent.css
• http://forums.mozillazine.org/viewtopic.php?f=25&t=2659307