Webseiten aufwerten mit eigenen Stylesheets

Dieses Thema im Forum "Netzwerk Tutorials" wurde erstellt von Sn0wm4n, 7. Dezember 2008 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 7. Dezember 2008
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    Webseiten aufwerten mit eigenen Stylesheets
    Update
    (siehe unten)​


    Ein Bildervergleich sagt wohl mehr als tausend Worte der Einführung. Also beginne ich damit, was ich mit dem Titel meine:

    » vorher | nachher . nachher2 «

    Mit ein paar Hilfsmitteln ist es möglich, jede Webseite individuell nach den eigenen Wünschen anzupassen.
    Ich habe mir beispielsweise den Header in Raidrush schlichter gestaltet.

    Diese Änderungen sind natürlich nur lokal auf Eurem Rechner.

    Grundsätzlich sollten die Veränderungen in fast jedem Betriebssystem möglich sein, getestet habe ich es aber nur mit Ubuntu 7.10 gutsy. ;-)
    Zwingend notwendig ist allerdings der Mozilla Firefox (nunja, für Infos zu Opera klicke hier). Denn dafür gibt es ein nettes Plugin, das installiert werden muss.
    Da ich Firefox-Version 2.x habe, kann ich nicht garantieren, dass es auch mit dem neuen 3er funktionieren wird. Allerdings steht in der Plugin-Beschreibung:


    Teil 1: Grundlagen (keine Vorkenntnisse notwenig)

    Nun erst einmal zur Grundkonfiguration. Das schöne ist, dass auch Menschen, die nichts mit Webentwicklung am Hut haben, bekannte Webseiten umstylen können, indem einfach User-Themes aus dem Internet eingefügt werden.

    So, los geht's:

    Öffne den Firefox und klicke Dich auf die offizielle Addon-Seite durch ( Extras -> Add-ons -> Erweiterungen herunterladen ).
    Suche dort nach dem Plugin "Stylish", lade es herunter und installiere es.

    Nach einem Neustart des Browsers wirst Du unten rechts in der Statusleiste ein neues Symbol ( Blatt Papier mit Stift ) finden.

    Fertig eingerichtet sollte "Stylish" nun schon sein.
    Nun kannst Du eigene Stile für beliebige Webseiten erstellen oder aber mit einem Klick auf das Symbol -> "Stile für diese Seite suchen" nach vorhandenen Styles suchen.
    Gesucht wird auf dem Portal userstyles.org.
    Dort findest Du Styles zu Webseiten, Software globalen Themes.


    Teil 2: Erstellung eines eigenen Stils

    Dieser Teil richtet sich eher an User, die schon Erfahrung mit Webentwicklung haben (gut wäre HTML & CSS).
    Für eigene Stile hat man einige Möglichkeiten:
    1. Man kann einen Stil explizit für eine URL erstellen. Alle Unter-Links sind davon nicht betroffen.
    2. Es ist auf möglich, eine bestimmte Domain mit einem Stil zu belegen. Dann gilt dieser auch für Unter-Links.


    Was Du brauchst:
    • Vorkenntnisse HTML / CSS
    • FF-Plugin: Firebug
    • FF-Plugin: Adblock+

    Die beiden Plugins sind nicht zwingend notwenig, erleichtern aber die Arbeit sehr.

    Vorgehensweise:
    Erstelle einen neuen Stil für Deine Wunsch-Homepage und öffne den Editor von "Stylish" (Beispiel).

    Wichtig ist hier, das neben dem Namespace auch die Domain definiert wird, für welche der Stil angewendet werden soll.
    Im Normalfall sind aber Namensraum und Domainregel schon eingefügt. Ansonsten kann man diese auch komfortabel über "Einfügen" auswählen.

    Nun kann mit den Änderungen begonnen werden.
    Zu der CSS-Syntax brauche ich nicht viel zu sagen. Sie sollte allgemein bekannt sein oder kann im Internet nachgelesen werden.

    Zudem ist noch der Ausdruck "!important" wichtig.
    Immer, wenn man bestehende Eigenschaften überschreibt, muss dieser Ausdruck nach der Eigenschaft, aber vor das Semikolon geschrieben werden.
    Ansonsten wird die Eigenschaft der originalen CSS-Datei verwendet.
    Beispiel:
    PHP:
    width 1337px  ! important ;
    TIP:
    Ich nutze oben genannten Firebug und schaue mir damit das Layout meiner Wunschseite an (mit dem Button "Untersuchen" kann man einfach auf irgend ein Element der Webseite klicken und man bekommt den Quellcode-Ausschnitt, den CSS-Auszug und mit einem Klick auf rechts "Layout" auch die genaue Platzierung des Elements.
    So findet man recht schnell die nötigen CSS-Klassen, die abgeändert werden müssen.

    Mit Adblock+ kann man leicht Grafiken ausblenden, welche im neuen Stil stören würden.

    Teil 3: Beispiel RaidRush

    Wem mein oben im Screenshot gezeigter RR-Stil gefällt, oder wer ein einfaches Beispiel für einen Stil haben will, der kann folgenden Code nehmen.

    "Stil erstellen" -> "Neuer Stil"
    Beschreibung ausfüllen und folgendes in das große Code-Fenster einfügen:

    Spoiler
    PHP:
    @namespace  url ( http : //www.w3.org/1999/xhtml);

    @- moz - document domain ( "board.raidrush.ws" ) {


    body  {
      
    background #fff url(https://www.xup.in/pic,13461367/back3.jpg) !important;
      
    background - attachment : fixed  ! important
    }

    #head {
      
    background #fff url(https://www.xup.in/000/board.raidrush.ws/a_rr_style/misc/images/back3.jpg) !important;
      
    height 125px  ! important ;
      
    background - repeat repeat - ! important ;
      
    padding - top 0px  ! important ;
    }

    #logo {
      
    margin - left 60px  ! important ;
      
    background - image url ( https : //www.xup.in/pic,13797515/21.png) !important;
      
    background - repeat no - repeat  ! important ;
    }

    #titel {
      
    width 300px  ! important ;
      
    float right  ! important ;
    }

    #titel h1 {
      
    margin - top 90px  ! important ;
      
    color #fff !important;
      
    font - size 28px  ! important ;
      
    font - family URW Chancery L  ! important ;
    }

    #bg_div {
      
    margin - top 84px  ! important ;
    }

    .
    menu  {
      
    border ! important ;
      
    background #fff url(https://www.xup.in/pic,20413913/menu_bg1.png) !important;
      
    color #fff !important;
      
    height 28px  ! important ;
    }

    .
    menu ul li  {
      
    border - right 1px dashed  #2c2c2c !important;
      
    height 28px  ! important ;
    }

    .
    menu ul li a , . menu ul li a : visited  {
      
    color #fff !important;
      
    font - weight bold  ! important ;
      
    font - size 12px  ! important ;
      
    font - family Tlwg Typist  ! important ;
    }

    .
    menu ul li a : hover  {
      
    background #fff url(https://www.xup.in/pic,99462754/menu_bg1_hover.png) !important;
      
    height 28px  ! important ;
    }

    #alt2 {
      
    background #fff url(https://www.xup.in/000/board.raidrush.ws/a_rr_style/statusicon/forum_new.gif) !important;
      
    width 500px  ! important ;
    }

    img [ src = "https://www.xup.in/000/board.raidrush.ws/a_rr_style/statusicon/forum_new.gif" ]{
      
    height : 32px ! important ;
      
    padding - left 32px  ! important ;
      
    background - image : url ( https : //www.xup.in/pic,15423571/forum_new_red2.gif)!important;
      
    width : 0 ! important ;
    }


    }

    Anmerkungen zum Code:
    Ich empfehle, mit Adblock+ die Werbung im Header auszuschalten!
    Da ich die Werbung standardmäßig blockiert habe, ist der Stil auch darauf zugeschnitten.

    Weiterhin gibt es in Windows natürlich die verwendeten Schriftarten nicht.
    Darum solltet Ihr die folgenden 2 Zeilen mit bei Euch vorhandenen Schriftarten ersetzen:
    PHP:
      font - family URW Chancery L  ! important ;
    //und
      
    font - family Tlwg Typist  ! important ;
    Sollten in der Navigation die gestrichelten Linien nicht korrekt angezeigt werden (in FF sollte es aber gehen), wie folgt ändern:
    PHP:
      border - right 1px dashed  #2c2c2c !important;
    // in zB:
      
    border - right 1px solid  #2c2c2c !important;



    Das war es nun auch schon.
    Bei Fragen, Anmerkungen oder sonstigen Anliegen bitte eine PN schreiben.


    viele Grüße,
    Sn0wm4n


    Update
    Auf Nachfrage habe ich nun ein dunkleres Boarddesign gemacht.
    Davon habe ich hier 2 verschiedene Versionen.

    Version 1: PREVIEW
    dunkles Theme, der Header ist genau so groß wie das Original.
    Spoiler
    PHP:
    @namespace  url ( http : //www.w3.org/1999/xhtml);

    @- moz - document domain ( "board.raidrush.ws" ) {

    #logo {
      
    visibility hidden  ! important ;
    }
    #head {
      
    background #000 url(https://www.xup.in/pic,46949398/RRstylish1_short.png) !important;
      
    height 130px  ! important ;
      
    padding 0px  ! important ;

    #titel {
      
    width 300px  ! important ;
      
    margin - top 40px  ! important ;
      
    margin - left 50px  ! important ;
    }
    #titel h1 {
      
    color : #fff !important;
      
    font - size : 20px  ! important ;
      
    font - family "TravelingTypewriter"  ! important ;
      
    border - bottom 0.01em solid  #292929 !important;
      
    text - decoration none  ! important ;
      
    width 300px  ! important ;
    }
    .
    menu  {
      
    background #000 !important;
      
    border - top 0px solid  #323232 !important;

    }
    .
    menu ul li  {
      
    border - right 1px solid  #393939 !important;
      
    padding 0 6px  ! important ;
    }
    #navi a{
      
    color #fff !important;
      
    font - size 10px  ! important ;
      
    font - weight bold  ! important ;
    }
    .
    menu ul li a : hover  {
      
    background - color #000 !important;
      
    color #911 !important;
      
    border - top 2px solid  #fff !important;
      
    margin - top : - 2px  ! important ;
    }
    img [ src = "https://www.xup.in/000/board.raidrush.ws/a_rr_style/statusicon/forum_new.gif" ]{
      
    height : 32px ! important ;
      
    padding - left 32px  ! important ;
      
    background - image : url ( https : //www.xup.in/pic,16930677/RRstylish1_rrcatpic.png)!important;
      
    width : 0 ! important ;
    }
    }

    Version 2: PREVIEW
    gleicher Style, aber ein überhoher Header (den Style habe ich bei mir drin^^).
    Spoiler
    PHP:
    @namespace  url ( http : //www.w3.org/1999/xhtml);

    @- moz - document domain ( "board.raidrush.ws" ) {

    #logo {
      
    position absolute  ! important ;
      
    margin - left 20px  ! important ;
      
    margin - top 275px  ! important ;
      
    visibility hidden  ! important ;
    }
    #head {
      
    background #000 url(https://www.xup.in/pic,25669831/RRstylish1_2.png) !important;
      
    height 400px  ! important ;
      
    width 976px  ! important ;
      
    border - left 2px dashed  #1e1e1e !important;
      
    border - right 2px dashed  #1e1e1e !important;

    #titel h1 {
      
    color : #fff !important;
      
    font - size : 20px  ! important ;
      
    font - family TravelingTypewriter , Geneva , Verdana , helvetica , Arial  ! important ;
      
    margin - top 160px  ! important ;
      
    margin - left 200px  ! important ;
      
    border - bottom 0.01em solid  #292929 !important;
      
    text - decoration none  ! important ;
      
    width 275px  ! important ;
    }
    .
    menu  {
      
    background #000 !important;
      
    border - top 0px solid  #323232 !important;

    }
    .
    menu ul li  {
      
    border - right 1px solid  #393939 !important;
      
    padding 0 6px  ! important ;
    }
    #navi a{
      
    color #fff !important;
      
    font - size 10px  ! important ;
      
    font - weight bold  ! important ;
    }
    .
    menu ul li a : hover  {
      
    background - color #000 !important;
      
    color #911 !important;
      
    border - top 2px solid  #fff !important;
      
    margin - top : - 2px  ! important ;
    }
    img [ src = "https://www.xup.in/000/board.raidrush.ws/a_rr_style/statusicon/forum_new.gif" ]{
      
    height : 32px ! important ;
      
    padding - left 32px  ! important ;
      
    background - image : url ( https : //www.xup.in/pic,16930677/RRstylish1_rrcatpic.png)!important;
      
    width : 0 ! important ;
    }
    }

    Einfügen geht ganz normal, siehe obige Beschreibung.
    Den RR-Header habe ich bei beiden themes entfernt.
    Falls Ihr ihn wieder einfügen wollt, einfach das visibility: hidden !important; bei Logo entfernen.

    Hier noch die Schriftart, die ich eingestellt hab. Natürlich könnt Ihr einfach eine anderen einfügen
    Traveling Typewriter Font by Carl - Free Download travelingtypewriter.ttf Font
     
  2. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.