Auch wenn viele Websites ein durchdachtes Designkonzept haben, kann es manchmal vorkommen, dass man als Besucher das Layout einer Website seinen eigenen Bedürfnissen anpassen möchte. Sei es die Farbe der Links, die Grösse bestimmter Texte oder sogar die Position oder Reihenfolge einzelner Seitenelemente.
Wer den Browser Firefox benutzt, hat die Möglichkeit mithilfe der Erweiterung Stylish das Aussehen jeder beliebigen Website den eigenen Bedürfnissen anzupassen. Dazu verfasst man ein eigenes Stylesheet, welches die entsprechenden Eigenschaften der originalen Stylesheets ersetzt.
Voraussetzung dafür sind, nebst Firefox ab der Version 1.4.0, natürlich solide Grundkenntnisse der Sprache CSS. Wer CSS lernen möchte, findet auf der bekannten Website selfhtml.org gute Erklärungen.
Wer die Serif-Schrift im MACup-Forum nicht mag, kann den untenstehenden fertigen CSS-Code verwenden. Dadurch werden die Serif-Schriften durch eine Sans Serif-Schrift ersetzt und einige weitere Korrekturen vorgenommen, welche das Forum etwas übersichtlicher machen.
Anleitung:
1) Stylish installieren
2) Neuen Stil hinzufügen (über Menü Extras - Erweiterungen - Stylish - Einstellungen - Hinzufügen)
3) Über den Button «Websites...» die URL eingeben, für welche der Stil gelten soll (bei der Verwendung des folgenden Codes nicht nötig)
4) Im grossen Textfeld die neuen CSS-Eigenschaften eingeben bzw. den folgenden Code einfügen
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix(http://www.macup.com/) {
body
{
font-family: Arial, sans-serif !important;
font-size: 12px !important;
}
h1, h2, h3
{
font-family: Arial, sans-serif !important;
}
a, a:link, a:visited, a:active, a:hover
{
text-decoration: none !important;
}
.post a, .post a:link, .post a:visited
{
color: #039 !important;
text-decoration: none !important;
}
.post a:active, .post a:hover
{
color: black !important;
}
.buttonMode
{
font-family: Arial, sans-serif !important;
}
.tableRowHeading, .tableRowHeadingBold
{
padding-top: 30px !important;
}
.tableCellAlt, .tableCellBin
{
border-top: 5px solid #ccc !important;
}
.largeLinks, .breadcrumb
{
line-height: 24px !important;
padding-left: 6px !important;
}
.button, .button40, .button80, .button100, .button150, .button210
{
width: auto !important;
padding-right: 10px !important;
}
.buttonSmall, .buttonSmallHover
{
background-color: white !important;
font-family: Arial, sans-serif !important;
text-decoration: none !important;
text-align: left !important;
padding: 1px 0px 3px 0px !important;
}
.buttonLarge, .buttonLargeHover
{
background-color: white !important;
margin: 10px 0 0 !important;
font-family: Arial, sans-serif !important;
text-decoration: none !important;
text-align: left !important;
}
.paginateBorder
{
margin-top: 20px !important;
}
}
Achtung, wer selber schreibt: Die neuen Eigenschaften für die Erweiterung müssen mit dem Vermerk !important ergänzt werden. Sonst werden die Korrekturen in der Regel nicht umgesetzt.