Vollständige Version anzeigen : Webseiten aufwerten mit eigenen Stylesheets


Sn0wm4n
07.12.2008, 19:29

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 (;;;xup~in/pic,10376184/rr_alt;png) | nachher (;;;xup~in/pic,18401970/rr_neu;png) . nachher2 (;;;xup~in/pic,17637278/preview1;png) «

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 (;userstyles~org/styles/installing)). 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:
Kompatibel mit: Firefox: 1;5 – 3;1b2



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 (;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:

Man kann einen Stil explizit für eine URL erstellen. Alle Unter-Links sind davon nicht betroffen.
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 (;;;olle-orks~org/wp-content/uploads/2008/08/stylish;jpg)).

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:
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:



;namespace url(;;;w3~org/1999/xhtml);

;-moz-document domain("board;raidrush;ws") {


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

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

#logo {
margin-left: 60px !important;
background-image: url(;;;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: 0 !important;
background: #fff url(;;;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(;;;xup~in/pic,99462754/menu_bg1_hover;png) !important;
height: 28px !important;
}

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

img[src=";;;xup~in/000/board;raidrush~ws/a_rr_style/statusicon/forum_new;gif"]{
height:32px!important;
padding-left: 32px !important;
background-image:url(;;;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:

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:
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 (;;;xup~in/pic,20548386/preview3;png)
dunkles Theme, der Header ist genau so groß wie das Original.


;namespace url(;;;w3~org/1999/xhtml);

;-moz-document domain("board;raidrush;ws") {

#logo {
visibility: hidden !important;
}
#head {
background: #000 url(;;;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=";;;xup~in/000/board;raidrush~ws/a_rr_style/statusicon/forum_new;gif"]{
height:32px!important;
padding-left: 32px !important;
background-image:url(;;;xup~in/pic,16930677/RRstylish1_rrcatpic;png)!important;
width:0!important;
}
}



Version 2: PREVIEW (;;;xup~in/pic,17637278/preview1;png)
gleicher Style, aber ein überhoher Header (den Style habe ich bei mir drin^^).

;namespace url(;;;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(;;;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=";;;xup~in/000/board;raidrush~ws/a_rr_style/statusicon/forum_new;gif"]{
height:32px!important;
padding-left: 32px !important;
background-image:url(;;;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 (;;;fonts4free~net/traveling-typewrite-font;html)

Hardware Preisvergleich | Amazon Blitzangebote!

Videos zum Thema
Video Loading...
Ähnliche Themen zu Webseiten aufwerten mit eigenen Stylesheets
  • Fotos aufwerten
    Hallo, gibt es ein Programm um die Pixel zu verbessern bzw die Fotos zu verbessern. Suche ein gutes Programm dafür. Kann mir da jemand helfen. Grüße Wastllumpi [...]

  • Grafik aufwerten
    Hallo Moin Leute, habe ein Logo was ich gerne weiter nutzen würde allerdings in sehr schlechter Qualität. Gibt es eine Möglichkeit dieses aufzuwerten oder kann es jmd neu nachentwerfen ?? 9902 MFG Ovy00 [...]

  • Bild aufwerten
    Hi ich hätte eine Frage an die Profis hier und zwar ob man aus folgendem Bild noch was rausholen kann da ich selbst in Bildbearbeitung nicht wirklich erfahren bin aber das Bild im Grunde nicht schlecht finde. Wäre doch schade wenn es so verkümmert :> Grüße Shogun [...]

  • Macht wer nen Lehrgang zum erstellen seiner eigenen Page mit eigenen Seiten?
    So Leute... Hab mal wieder nen Projekt vor will für meine Kumpels ein Forum erstellen... Allerdings mit manueller Freigabe der User... Bekommt man das iergendwie kostenlos hin? Denn das wollte ich eigentlich schon for free haben :P Hab mich mal bei piranho~com angemeldet.. Denn da kann man ja seine [...]



raid-rush.ws | Imprint & Contact pr