Leserartikel Aussehen von Webseiten mit eigenen CSS-Vorgaben modifizieren

Livven · 23. November 2008

Kleines, verständlich erklärtes HowTo, wie man ohne weiterführende Kenntnisse Webseiten den eigenen Vorstellungen und Bedürfnissen anpassen kann. Mit Beispiel-Stylesheets.

Inhaltsverzeichnis

Vorwort

CSS

Javascript

Erforderliche Programme

Modifikationen an der CB-Seite

Weiterführendes

Tags: Website, Aussehen, CSS, Javascript, Greasemonkey, Stylish, Modding, modden, Modifikationen, Style Sheet, Skript

[HowTo] Aussehen von Webseiten mit eigenen CSS-Vorgaben modifizieren

Livven · 23. November 2008

CSS - [HowTo] Aussehen von Webseiten mit eigenen CSS-Vorgaben modifizieren

Um eine Website nach den eigenen Wünschen anzupassen, braucht man gar keine großen CSS-Kenntnisse. Die Syntax ist leicht verständlich, und für diesen Fall relevante Sprachbestandteile sind weitestgehend selbsterklärend - sofern man Englisch beherrscht. Auf SelfHTML findet man zudem eine Kurzreferenz über CSS.

Die Syntax von CSS lautet folgendermaßen:

Code:

Selektor
{
Eigenschaft:Wert;
}

Ein Beispiel:

Code:

a,
.someclass,
#someid /* Verschiedene Selektoren */
{
font-size:1.5em;
}

Dieser Code sagt aus, dass jedes

<a>-Element und
Element mit class="someclass" und
Element mit id="someid"

für die Eigenschaft font-size (Schriftgröße) den Wert 1.5em (schriftgrößenabhängige Maßeinheit) erhält.

Kommentare werden, wie bei den Programmiersprachen C/C++, durch /* eingeleitet und */ abgeschlossen.

Livven · 23. November 2008

Javascript - [HowTo] Aussehen von Webseiten mit eigenen CSS-Vorgaben modifizieren

Platzhalter

Livven · 23. November 2008

Erforderliche Programme

Nicht alle Browser beherrschen das Anwenden von eigenen (CSS) Style Sheets und (Javascript) Skripten. Als Grundlage wird hier der Open Source Browser Firefox verwendet, der um die unten folgenden Addons erweitert werden muss. Alternativ kann man auch auf Opera zurückgreifen, der die nötigen Funktionen auch ohne zusätzliche Erweiterungen bietet.
Wird Firefox verwendet, so sind die folgenden Erweiterungen nötig:

Firebug

Ein nützliches Werkzeug für Webentwickler, das aber auch hervorragend dazu geeigenet ist, sich einen Überblick über den Aufbau einer Webseite zu verschaffen.

Wenn man mit der rechten Maustaste auf ein beliebiges Element klickt, und im Kontextmenü Element untersuchen auswählt, klappt Firebug aus und markiert den dazugehörigen Tag im Markup der Seite.

Stylish

Zum Erstellen von Benutzer-Style Sheets ist Stylish notwendig. Um einen Stil für ComputerBase zu erstellen, klickt man zuerst auf das Symbol in der Statusleiste und danach auf Stil erstellen -> Für computerbase.de...

Nach dieser Auswahl erscheint ein Fenster mit folgendem Inhalt:

Code:

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

@-moz-document domain("computerbase.de") 
{

/* Hier kommt der eigetliche CSS-Code hin */

}

Greasemonkey

Für kompliziertere Aufgaben, etwa um bestimmte Bilder einer Webseite auszutauschen, stößt man mit CSS an die Grenze des Machbaren. In diesen Fällen braucht man Javascript, eine Skriptsprache.

Ein Rechtsklick auf das Symbol in der Statusleiste, gefolgt von einem Klick auf Neues Benutzerskript, öffnet ein Fenster.

Soll das Skript nicht nur auf einer bestimmten Webseite, sondern auf allen Seiten einer Domain oder eines Unterverzeichnisses angewendet werden, so benutzt man das Jokerzeichen (*). Anstatt https://www.computerbase.de/ schreibt man also https://www.computerbase.de/*.

Alte Dateien, die aus Kompabilitätsgründen nicht gelöscht werden können:

Livven · 23. November 2008

Modifikationen an diversen Seiten

Hier erst mal ein paar Farb-Stile für ComputerBase.

Ein grünes Design:

Es werden die folgenden Dateien benutzt:

Code:

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

@-moz-document domain("computerbase.de") 
{

body
{
background-color:#98CC76 !important;
}

#header
{
background-image:url(https://www.computerbase.de/forum/attachments/header-background_green-png.127201/) !important;
}

.tborder
{
border-color:#62A33A !important;
}

.tcat
{
background-image:url(https://www.computerbase.de/forum/attachments/tcat_green-png.127199/) !important;
}

.tfoot
{
background-color:#3C7C13 !important;
color:#E1F2E3 !important;
}

.thead
{
background-image:url(https://www.computerbase.de/forum/attachments/thead_green-png.127200/) !important;
}

.vbmenu_control
{
background:#62A33A !important;
}

.navbar .vbmenu_control
{
background:#EEEEEE !important;
}

}

Ein rotes Design:

Es werden die folgenden Dateien benutzt:

Code:

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

@-moz-document domain("computerbase.de") 
{

body
{
background-color:#EA6264 !important;
}

#header
{
background-image:url(https://www.computerbase.de/forum/attachments/header-background_red-png.127206/) !important;
}

.tborder
{
border-color:#C92222 !important;
}

.tcat
{
background-image:url(https://www.computerbase.de/forum/attachments/tcat_red-png.127207/) !important;
}

.tfoot
{
background-color:#A00200 !important;
color:#FCEEE0 !important;
}

.thead
{
background-image:url(https://www.computerbase.de/forum/attachments/thead_red-png.127208/) !important;
}

.vbmenu_control
{
background:#C92222 !important;
}

.navbar .vbmenu_control
{
background:#EEEEEE !important;
}

}

Ein oranges Design:

Es werden die folgenden Dateien benutzt:

Code:

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

@-moz-document domain("computerbase.de") 
{

body
{
background-color:#FFC700 !important;
}

#header
{
background-image:url(https://www.computerbase.de/forum/attachments/header-background_orange-png.127216/) !important;
}

.tborder
{
border-color:#FFA900 !important;
}

.tcat
{
background-image:url(https://www.computerbase.de/forum/attachments/tcat_orange-png.127217/) !important;
}

.tfoot
{
background-color:#FF9000 !important;
color:#FFECBB !important;
}

.thead
{
background-image:url(https://www.computerbase.de/forum/attachments/thead_orange-png.127218/) !important;
}

.vbmenu_control
{
background:#FFA900 !important;
}

.navbar .vbmenu_control
{
background:#EEEEEE !important;
}

}

Ein violettes Design. Es werden die folgenden Dateien benutzt:

Code:

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

@-moz-document domain("computerbase.de") 
{

body
{
background-color:#866AC5 !important;
}

#header
{
background-image:url(https://www.computerbase.de/forum/attachments/header-background_purple-png.127213/) !important;
}

.tborder
{
border-color:#5430A2 !important;
}

.tcat
{
background-image:url(https://www.computerbase.de/forum/attachments/tcat_purple-png.127214/) !important;
}

.tfoot
{
background-color:#2F0C7B !important;
color:#5430A2 !important;
}

.thead
{
background-image:url(https://www.computerbase.de/forum/attachments/thead_purple-png.127215/) !important;
}

.vbmenu_control
{
background:#5430A2 !important;
}

.navbar .vbmenu_control
{
background:#EEEEEE !important;
}

}

Ein blau-grünes Design. Es werden die folgenden Dateien benutzt:

Code:

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

@-moz-document domain("computerbase.de") 
{

body
{
background-color:#6AC599 !important;
}



#header
{
background-image:url(https://www.computerbase.de/forum/attachments/header-background_bluegreen-png.127202/) !important;
}

.tborder
{
border-color:#31A26D !important;
}

.tcat
{
background-image:url(https://www.computerbase.de/forum/attachments/tcat_bluegreen-png.127203/) !important;
}

.tfoot
{
background-color:#0C7B47 !important;
color:#D2E4E4 !important;
}

.thead
{
background-image:url(https://www.computerbase.de/forum/attachments/thead_bluegreen-png.127204/) !important;
}

.vbmenu_control
{
background:#31A26D !important;
}

.navbar .vbmenu_control
{
background:#EEEEEE !important;
}

}

Ein Schwarz-Weiß Design. Es werden die folgenden Dateien benutzt:

Code:

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

@-moz-document domain("computerbase.de") 
{

body
{
background-color:#9A9A9A !important;
}

#header
{
background-image:url(https://www.computerbase.de/forum/attachments/header-background_mono-png.127219/) !important;
}

.tborder
{
border-color:#666666 !important;
}

.tcat
{
background-image:url(https://www.computerbase.de/forum/attachments/tcat_mono-png.127220/) !important;
}

.tfoot
{
background-color:#3E3E3E !important;
color:#E2E2E2 !important;
}

.thead
{
background-image:url(https://www.computerbase.de/forum/attachments/thead_mono-png.127221/) !important;
}

.vbmenu_control
{
background:#666666 !important;
}

.navbar .vbmenu_control
{
background:#EEEEEE !important;
}

}

Hinweis: Es werden noch weitere Style Sheets kommen. Wartet mal ab .

Wenn man einen der obigen Stile aktiviert, sind merkt man, dass der Hintergrund dieser Pfeile

nicht transparent, sondern blau ist. Dies stört bei manchen Farben.

Mit Greasemonkey und einem selbstgemachten Bildchen begegnen wir diesem Problem.

Code:

// ==UserScript==
// @name           FB-Mods
// @namespace      Livven
// @description    Modifizierungen an ForumBase
// @include        https://www.computerbase.de/forum/*
// ==/UserScript==

var img = document.getElementsByTagName("img"); // alle <img>-Elemente
for (var i = 0; i < img.length; i++) // Schleife, die alle <img>-Elemente durchläuft
{
	if (img[i].src == "https://www.computerbase.de/forum/images/buttons/collapse_tcat.gif") // wenn das <img>-Element dem oben gezeigten entspricht...
	{
		img[i].src = "https://www.computerbase.de/forum/attachments/collapse_tcat-png.127372/"; // ...dann tausche das Bild aus
	}
}

Livven · 23. November 2008

Modifikationen an diversen Seiten

Der Preisvergleich, der auf CB angeboten wird, ist nicht weiteres als ein Klon des beliebten Preivergleichsdienstes Geizhals.at/de. Genauso sieht es mit dem Lexikon aus, der auf Wikipedia beruht. Wenn man sich aber bereits an das Design und Layout dieser Seiten gewöhnt hat, dann kann es sein, dass einem die Integration auf CB missfällt, sodass die Links umleiten möchte. Das folgende Skript schafft Abhilfe.

Code:

// ==UserScript==
// @name           Links auf Geizhals und Wikipedia umleiten
// @namespace      Livven
// @description    Links, deren Ziel ein Preisvergleich ist, der auf Geizhals basiert, werden dorthin umgeleitet, und Links, die auf das Lexikon von ComputerBase verweisen, werden auf Wikipedia umgeleitet
// @include        *
// ==/UserScript==

var links = document.getElementsByTagName("a"); // Alle Links dieser Seite
for (var i = 0; i < links.length; i++) // Schleife, die alle Links durchläuft
{
	var geiz = /preisvergleich.boerse-express.com|computerbase.de\/preisvergleich|ht4u.net\/preisvergleich|preisvergleich.hardwareluxx.de|heise.de\/preisvergleich|os-informer.de\/m,preisvergleich|pcgameshardware.de\/m,preisvergleich|technic3d.com\/preisvergleich/.test(links[i].href); // Test, ob der Link zu einem Geizhals-Klon führt
	if (geiz) // Wenn ja, dann..
	{
		var segs = links[i].href.split("/");
		var seg = segs[segs.length - 1]; // ...nehme den Teil nach dem letzten Schrägstrich...
		links[i].href = "http://geizhals.at/deutschland/" + seg; // ...und füge ihn an, sodass der Link nun zu Geizhals verweist
	}
	else // Ansonsten...
	{
		var wiki = /computerbase.de\/lexikon/.test(links[i].href); // ... testen, ob der Link zum Lexikon führt
		if (wiki) // Wenn ja, dann...
		{
			var segs = links[i].href.split("/");
			var seg = segs[segs.length - 1]; // ...nehme den Teil nach dem letzten Schrägstrich...
			links[i].href = "http://de.wikipedia.org/wiki/" + seg; // ...und füge ihn an, sodass der Link nun zu Wikipedia verweist
		}
	}
}

Livven · 23. November 2008

Weiterführendes

Diese Links sind nützlich für all' jene, die sich etwas intensiver mit CSS auseinandersetzen wollen:

SelfHTML, speziell die CSS-Kapitel
Einführung in XHTML, CSS und Webdesign, speziell Einführung in CSS
CSS 4 you (Referenz)
A List Apart (Englisch)
Position Is Everything (Englisch)
Smashing Magazine (Englisch)
Sitepoint (Englisch)
Little Boxes (Layout-Vorlagen, Englisch)

Livven · 23. November 2008

~~Hinweis: Es werden noch weitere Style Sheets als Beispiele kommen, und der Text wird ebenfalls noch überarbeitet. Es lohnt sich also, ab und an mal reinzugucken .~~

Wer entsprechende Kenntnisse hat, der kann auch einen Stil für CB zu erstellen und diesen hier veröffentlichen. Wäre sehr schön, wenn wir dann eine kleine Sammlung an Alternativ-Styles hätten.

Kingfisher OK · 23. November 2008

Jojo
Ganz nett

A bissal klein aber es reicht.
Finds aber echt eine starke Leistung mit deinem Alter so etwas hinzubekommen

LG
Achso...
ALLES GUTE ZUM GEBURTSTAG!

michi12 · 24. November 2008

Da will wohl einer die CB seite modifizieren

Ist eigentlich wirklich ne nette Idee.
Ich mach mal auch ´ne kleine Style-Modifikation.

Edit: An dieser Stelle will ich auf meine Modifikation von computerbase mit Javascript hinweisen.
Schaut es euch einfach einmal an, Feedback und Ideen für neue Modifikationen sind per PM immer willkommen !

Livven · 24. November 2008

Okya, danke schon mal für das positive Feedback. Eigentlich hab ich erst durch einen Artikel in der c't dieses Thema entdeckt, etwas CSS gelernt und das ist das Ergebnis

.

Kingfisher OK · 24. November 2008

So geschiehts mit den meisten

Ich habe auch irgendwo mal eine Anregung für den RivaTuner gefunden

LG

Livven · 30. November 2008

So, hab nun ein weitere Designs hinzugefügt. In verschiedenen Farben

. Guckt hier.

Der Fließtext wird, wie bereits teilweise geschehen, auch noch deutlich überarbeitet. Hab schon einiges im Kopf, aber nicht die Zeit, um allzu viel umzusetzen.

bitfunker · 2. Dezember 2008

Nice! Schon daran gedacht, sowas ähnliches für diejenigen zu machen, die immer noch ihre Websites mit Tabellen statt mit CSS strukturieren? Das wär fein!

Livven · 2. Dezember 2008

Dann müsste man aber den einzelnen Tabellenzeilen und -zellen jeweils eine ID oder Klasse zuordnen. Geht das mit Javascript?

Man kann aber auch sonst 'ne Menge mit JS-Skripten anstellen, die man noch mit Greasemonkey automatisch für eine Website einbinden kann. Bin aber (noch) blutiger Anfänger in Sachen JS, deshalb wird diese Möglichkeit wohl erst später in den Artikel aufgenommen werden.

Kingfisher OK · 14. Dezember 2008

Du kannst noch das Inhaltsverzeichnis direkt verlinken, weil du ja für jeden Punkt einen neuen Post gemacht hast

LG

Livven · 15. Dezember 2008

Wie meinst du das?

Kingfisher OK · 15. Dezember 2008

Ich schreib dir den Quelltext, welchen du dann gerade reinkopierst

EDIt.:
Ich sehe gerade dass du das doch schon gemacht hast:

Modifikationen an der CB-Seite
Weiterführendes

bei diesen beiden hast du 2 Pfeile dahinter gemacht, welche gerade zum richtigen Thema führen

Wenn du jetzt nur noch den Link so machst:

4. Modifikationen an der CB-Seite

5. Weiterführendes

sieht das ganze noch viel besser aus

Jetzt machst du das ganze noch für das komplette Inhaltsverzeichnis... und das mach ich dir jetzt

LG

Das ganze sieht dann so aus:

Inhaltsverzeichnis

Einleitung
CSS verstehen
Erforderliche Programme
3.1 Firebug
3.2 Stylish
Modifikationen an der CB-Seite
Weiterführendes

Und als webcode

HTML:

[U]
Inhaltsverzeichnis[/U]

[LIST=1]
[*][URL="https://www.computerbase.de/forum/threads/aussehen-von-webseiten-mit-eigenen-css-vorgaben-modifizieren.504118/"]Einleitung[/URL]
[*][URL="https://www.computerbase.de/forum/threads/aussehen-von-webseiten-mit-eigenen-css-vorgaben-modifizieren.504118/#post-5138975"]CSS verstehen[/URL]
[*][URL="https://www.computerbase.de/forum/threads/aussehen-von-webseiten-mit-eigenen-css-vorgaben-modifizieren.504118/#post-5139017"]Erforderliche Programme[/URL]
      3.1 Firebug 
      3.2 Stylish
[*][URL="https://www.computerbase.de/forum/threads/aussehen-von-webseiten-mit-eigenen-css-vorgaben-modifizieren.504118/#post-5169024"]Modifikationen an der CB-Seite[/URL]
[*][URL="https://www.computerbase.de/forum/threads/aussehen-von-webseiten-mit-eigenen-css-vorgaben-modifizieren.504118/#post-5169027"]Weiterführendes[/URL]
[/LIST]

LG

Livven · 15. Dezember 2008

Okay, dann schreib

! Ich versteh zwar nicht den Sinn, aber mal sehen...

EDIT: Achso, das meinst du. Mach ich mal selber, hab das die ganze Zeit nicht beachtet. Aber ich werde wohl einen eigenen Pfeil machen, anstatt den von CB zu klauen.

EDIT: So, hab das Ganze jetzt mal gemacht.

Kingfisher OK · 17. Dezember 2008

Ich würd mich noch über die berühmte Silver Edition freuen

lG

Leserartikel Aussehen von Webseiten mit eigenen CSS-Vorgaben modifizieren

Welchen Farb-Stil benutzt ihr, nach Lesen des Artikels?

Das Standard-Blau

Grün

Rot

Orange

Violett

Blau-Grün

Schwarz-Weiß

Commander

Commander

Commander

Commander

Commander

Commander

Anhänge

Commander

Commander

Rear Admiral

Banned

Commander

Rear Admiral

Commander

ewohner

Commander

Rear Admiral

Commander

Rear Admiral

Commander

Rear Admiral