CSS

CSS ist die Abkürzung für Cascading Style Sheets. In Freewar wird die Sprache CSS zum Erstellen von Styles benötigt.

Eine einweisende Erkläuterung für CSS schrieb Lady Biene und ist auch in Lady Bienes Forum zu finden.

Eine wikifizierte Form des Artikels ist auch hier zu finden:

Eigenen Style erstellen

Zunächst ist zu sagen, dass die Sprache CSS eine Stylesheet Sprache ist. Sie ist nur für die Darstellung einer Webseite verantwortlich. Folglich kann also nicht der Aufbau von Freewar oder Inhalte, sowie Skripte, geändert werden. Es kann lediglich die Darstellung der Inhalte geändert werden. Trotzdem ist es möglich zum Beispiel ein Bild Freewars über CSS zu ändern, dies geschieht mit einem Workaround indem das alte Bild unsichtbar gemacht wird und ein neues Bild im Hintergrund angezeigt wird, wodurch nur das eigene Bild sichtbar ist.

Möchte man einen eigenen Style erstellen, sollte man zunächst davon ausgehen, dass Alles möglich ist. Als nächstes sollte man sich mit der Sprache etwas vertraut machen und einige Eigenschaften kennenlernen.

Äußerst hilfreich ist es hierfür Styles anderer Spieler zu betrachten und diese zunächst als Vorlage zu verwenden, in der dann nurnoch einige Bilder und Farben geändert werden müssen. Eine umfangreiche Liste von Styles findest du hier im Wiki in der Kategorie:Styles oder auf Tiramons Seite.

Erläuterungen zu CSS

Bevor die einzelnen Bereiche näher erläutert werden zuerst einige grundlegende Worte zu CSS.

Die ganze Datei ist in verschiedene Bereiche aufgeteilt, wie man zum Beispiel hier im Bereich über die verschiedenen Hintergrundfarben sehen kann:

/* bgcolors */
.body { background-color: #FFFFFF; }
.divider { background-color: #555555; }
.outline { background-color: #999999; }
.menubg  { background-color: #F1F1F1; }

Es steht immer erst ein beschreibender Teil dort, welcher sagt, was da bestimmt wird. In den geschwungenen Klammern stehen die Eigenschaften des entsprechenden Bereiches. Eigenschaften können Farben, Hintergrund oder die Höhe eines Frames, auch Fenster genannt, sein. Alle Eigenschaften müssen durch ein Semikolon ( ; ) getrennt werden. Es ist darauf zu achten, dass die Eigenschaften richtig geschrieben sind, da sie sonst nicht erkannt werden. Es wird nur stur gelesen, was der Browser machen soll und wenn es falsch geschrieben ist, dann liest er das so, als ob dort gar nichts stünde.

Allgemein ist der Aufbau eines Befehls:

Selektor {Eigenschaft : Wert}

Eine genaue Beschreibung zur Sprache CSS findet man auf Selfhtml.

Eine Liste aller Eigenschaften für CSS findet man auf CSS4You.

Beispieleigenschaften

• color: #FFFF00 → die Farbe, die eine Schrift haben soll. Die ersten beiden Stellen nach dem Nummernzeichen, das auf gar keinen Fall vergessen werden darf, steht für rot, die mittleren beiden geben die Menge des Grüns an und die letzten beiden Stellen die des Blaus. Angegeben werden können alle Zahlen von 0-9, so wie die Buchstaben A-F. Alternativ kann die Farbe auch mit color: rgb(250, 0, 0) angegeben werden. Hierbei gilt die Gleiche Reihenfolge wie im Hexadezimalcode (Rot-Grün-Blau), jedoch dürfen hierbei nur Zahlen - von 0-255 - angegeben werden.
• background-color: #0000FF → die Hintergrundfarbe (siehe "color:")
• background-image: url(www.domain.de/meinwunschbild.jpg) → fügt ein Bild als Hintergrund ein. Kann auch mit "background-color" verwendet werden, wenn das Bild nicht alles ausfüllt (ACHTUNG: Bei der URL die Klammern nicht vergessen!)
• font-family: Arial → definiert Arial als Schrifttyp. In dieser Schriftart wird der Text ausgegeben. Falls eine Schriftart mit Leerzeichen gewählt wird, sollte der Name der Schriftart in Apostrophen stehen, z. B. font-family: 'Times New Roman')
• background-repeat: no-repeat → lässt das Bild nicht wiederholen
• background-repeat: repeat-y → wiederholt das Bild auf der Y-Achse → also nach oben/unten
• background-repeat: repeat-x → wiederholt sich auf der X-Achse → also nach rechts/links (ist nötig für kleine Bilder, die nicht den ganzen Frame ausfüllen sollen, z. B. kleine Figuren)
• background-position: → jetzt kann man verschiedene Sachen eingeben z. B. top (oben), bottom (unten), right (rechts), left (links) oder center (mittig). → Dies ist dazu da, um ein Bild zu positionieren, z. B. um es rechts oben hinzusetzten gibt man "background-position: top right" ein.
• background-color: transparent → hiermit kann man den Hintergrund transparent machen, man kann also hindurch sehen (wenn nichts weiter festgelegt ist, bleibt der Hintergrund schwarz. Ist beispielsweise wichtig, wenn man im Teil, wo die Überschrift der Feldbeschreibung ist, das Hintergrundbild dort auch noch sehen will.)
• background-attachment : fixed → ist dazu da, um das Hintergrundbild zu fixieren, nur nötig beim Chattext

Was ist möglich?

In Freewar kann man mit einem eigenen Stylesheet Eigenschaften sogenannte Klassen, Identifikationen, Bilder, Links und HTML-Tags allgemein ändern.

Diese findet man im Quelltext der Freewarseiten. Sie sind zu erkennen an dem vorangestellten class="Beispiel", id="Beispiel", <img src="Beispieladresse">, <a href="Beispiellink"> oder <Beispiel>.

Möchte man einer Klasse in CSS neue Eigenschaften zuschreiben, schreibt man:

.Beispiel { Beispieleigenschaft: Beispielwert; }

Möchte man einer Identifikation in CSS neue Eigenschaften zuschreiben, schreibt man:

#Beispiel { Beispieleigenschaft: Beispielwert; }

Möchte man einem Bild in CSS neue Eigenschaften zuschreiben, schreibt man:

img[src$="Beispieladresse"] { Beispieleigenschaft: Beispielwert; }

Möchte man einem Link in CSS neue Eigenschaften zuschreiben, schreibt man:

a[href*="Beispiellink"] { Beispieleigenschaft: Beispielwert; }

Änderungen allgemeiner HTML-Tags betreffen jedoch alle solche verwendeten Tags, dass heisst wird zum Beispiel einem Absatz (<p>) neue Eigenschaften zugeschrieben hat jeder Absatz diese Eigenschaft, bei Bildern und Links ist dies ähnlich. Folglich durchsucht man also den Quelltext Freewars nach den Schlüsselwörtern class, id, img und a, da man diese direkt ansprechen kann, und ändert die Eigenschaften.

Im Quelltext Freewars findet man auch bereits CSS-Eigenschaften. Diese sind an dem vorangestellten style="Beispieleigenschaft: Beispielwert" zu erkennen. Es handelt sich dabei um bereits vordefinierte Style-Eigenschaften, wie zum Beispiel die rote Farbe des Clanchats, welche aber über ein eigenes Stylesheet abgeändert werden können.

Beispiele

Hintergrundbild

Ein neues Hintergrundbild für die Hauptanzeige soll eingebaut werden.

Im Quelltext Freewars findet man die entsprechende Zeile:

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" class="framemainbg">

Man erkennt die im body eingebettete Klasse framemainbg und ändert die Eigenschaften des Körpers im Stylesheet.

Die entsprechende Zeile in der CSS-Datei könnte lauten:

.framemainbg { background-image: url('Beispieladresse'); }

Chat

Die Farbe, Schriftgröße und -art des Schreichats soll geändert werden.

Im Quelltext Freewars findet man die ensprechende Zeile:

<p class="chattextscream"><b>Beispielspieler schreit:</b> <img src="../images/icon_scream.gif" align="absmiddle" title="Auf der ganzen Welt zu hören" border="0" class="chatpics"> Hallo, wie geht es dir?</p>

Man erkennt die im p eingebettete Klasse chattextscream und ändert die Eigenschaften des Absatzes im Stylesheet.

Die entsprechende Zeile in der CSS-Datei könnte lauten:

.chattextscream  { color: #8199FF; font-size: 12px; font-family: Verdana; }

User-X

Das Bild des "User-X", das Kreuz, welches den Spieler auf der Karte markiert, soll geändert werden.

Im Quelltext Freewars findet man die ensprechende Zeile:

<img src="https://welt2.freewar.de/freewar/images/map/user.gif" width="50" height="50" border=0>

Man erkennt das user.gif als Adresse des img und ändert die Eigenschaften des Bilds im Stylesheet.

Die entsprechende Zeile in der CSS-Datei könnte lauten (das alte Bild wird auf Breite 0 gestellt, wordurch es nicht sichtbar ist, und im Hintergrund wird ein eigenes Bild eingeblendet):

img[src$="user.gif"] { display: block; width: 0; background: url('Beispieladresse'); no-repeat; padding-left: 50px; overflow: hidden }

Gruppeneinladung

Das Bild der Gruppeneinladung soll geändert werden.

Im Quelltext Freewars findet man die ensprechende Zeile:

<a href="fight.php?action=groupinvite&act_user_id=XY"><img src="../images/group.gif" border='0' title="In Gruppe einladen"></a>

Man erkennt das group.gif als Adresse des img und das a als Link zum Spieler und ändert die Eigenschaften des Bilds und Links im Stylesheet.

Die entsprechende Zeilen in der CSS-Datei könnten lauten (1. Zeile: Blendet das Einladungsbild aus. 2.Zeile: Setzt vor den Einladungslink ein eigenes Bild):

img[src$="group.gif"] { display: none; }
a[href*="groupinvite"]:before { content: url('Beispieladresse'); }

Gebirgsfeld

Das Bild der Gebirgsfelder soll geändert werden.

Im Quelltext Freewars findet man die ensprechende Zeile:

<td width="50" height="50" id="mapxXXyYY" background="https://welt2.freewar.de/freewar/images/map/std.jpg" class="stdjpg">[...]</td>

Man erkennt die im td eingebettete Klasse stdjpg und ändert die Eigenschaften der Tabellenzeile im Stylesheet.

Die entsprechende Zeile in der CSS-Datei könnte lauten:

.stdjpg { background-image:url('Beispieladresse') !important; }

Phasenenergie

Die Bilder der Phasenenergieanzeige sollen geändert werden.

Im Quelltext Freewars findet man die ensprechenden Zeilen:

<div style="position:absolute; font-size: 9px; top: 0; left: 0; width: 230; height: 11; z-index:2; border: 1px solid #0764b3; background-image: url(../images/energyred_bg.jpg);" id="fullenergydisp">
</div>
<div style="position:absolute; font-size: 9px; top: 0; left: 0; width: 230; height: 11; z-index:3; border: 1px solid #0764b3; background-image: url(../images/buttonblue_bg.jpg);" id="curenergy">
</div>

Man erkennt die im div eingebettete Identifikationen fullenergydisp und curenenergy und ändert die Eigenschaften der Bereiche im Stylesheet.

Die entsprechende Zeilen in der CSS-Datei könnten lauten:

#fullenergydisp { background-image: url('Beispielbildadresse') !important; }
#curenergy { background-image: url('Beispielbildadresse') !important; }

Feldbilder

Es sollen eigene Bilder für Felder eingebaut werden.

Im Quelltext Freewars findet man die ensprechenden Zeilen (1.Zeile: Bild in dem Kartenausschnitt. 2.Zeile: Bild in der Hauptanzeige. 3.Zeile: Bild in der Umgebungskarte):

<td width="50" height="50" id="mapxXXyYY" style="background-image:url(Beispielbildadresse);">[...]</td>
<img src="Beispielbildadresse" id="mainmapxXXyYY" width="65" height="65" align="absmiddle" class="imageborder">
<div style="position:relative; top: 0; left: 0; z-index: 1;" title=" (X: XX Y: YY)">

Man erkennt die im td und img eingebettete Identifikationen mapxXXyYY und mainmapxXXyYY und den im div eingebetteten title und ändert die Eigenschaften der der Tabellenzeile, des Bildes und des Bereichs im Stylesheet.

Die entsprechende Zeilen in der CSS-Datei könnten lauten:

#mapxXXyYY { background-image:url('Beispielbildadresse')!important; }
#mainmapxXXyYY { background:url('Beispielbildadresse') no-repeat; overflow:hidden; padding-left:65px; width:0;  !important; }
.framemainbg div[title*="(X: XX Y: YY)"] img { width: 0; background: url('Beispielbildadresse') no-repeat; padding-left: 25px; overflow: hidden; }