Schneller Einstieg

aus Papoo Dokumentation, der freien Wissensdatenbank
(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
M (Überschriften anpassen: Leerzeichen eingefügt wegen des Standards + H4 (war H3))
(Logo einbinden und Navigation nach unten verschieben)
 
(3 dazwischenliegende Versionen von einem Benutzer werden nicht angezeigt)
Zeile 17: Zeile 17:
 
[[Bild:Schneller_einstieg_logo.gif|framed|Logo für die neue Webseite]]
 
[[Bild:Schneller_einstieg_logo.gif|framed|Logo für die neue Webseite]]
 
* Zuerst wird das Logo mit Printkey "ausgeschnitten".
 
* Zuerst wird das Logo mit Printkey "ausgeschnitten".
* Danach ... in Arbeit
+
* Das neue Logo (siehe Screenshot) unter "logo.gif" abspeichern.
 +
* Das Logo auf den Webserver kopieren, zum Beispiel in dem Ordner "../css/papoo3/images".
 +
* Die Datei "../css/papoo3/basemod.css" öffnen.
 +
* Im HEAD-Bereich (ID: ''#head'') die bestehende Datei "top.jpg" durch "logo.gif" ersetzen.
 +
<pre>/* background-image: url(images/top.jpg); */
 +
background-image: url(images/logo.gif);</pre>
 +
 
 +
[[Bild:Schneller_einstieg_logo_aendern00.gif|150px|left|Das Logo ist eingebunden, aber noch nicht komplett sichtbar]]
 +
Damit ist das Einbinden des Logos erfolgt, aber wie man sehen kann, wird ein Teil des Logos noch verdeckt. Deswegen muss man weitere Veränderungen am CSS vornehmen.
  
 
== Überschriften anpassen ==
 
== Überschriften anpassen ==

Aktuelle Version vom 10. August 2006, 16:29 Uhr

Sie sind hier: Hauptseite / erste Schritte / schneller Einstieg

Dieses Tutorial soll dazu dienen, Ihnen einen schnellen Einstieg in die Erstellung eines eigenen Layouts zu geben. Es wird nur eine grundlegende Einführung gegeben.

Oliver Kaminik hat ein Layout für Papoo entworfen, an dem die ersten Schritte erklärt werden. Wie man Screenshot sehen kann, steht das Layout nur als Grafik zur Verfügung. Das Tutorial wird Schritt für Schritt erklären, wie man vorgehen muss.

Ein Papoo-Layout von Oliver Kaminik

Inhaltsverzeichnis

Ziel

Ziel des Tutorials ist es die Grafik und den Hintergrund von Papoo anzupassen. Außerdem werden wir die Farben der Navigation anpassen. Das ganze Design zu erstellen würden den Rahmen des schnellen Einstiegs sprengen.

Vorbereitungen

  • Es gibt verschiedene Tools für Screenshots, die einfacher zu bedienen sind als zum Beispiel Adobe Photoshop. Ich benutze Printkey, weil ich damit aus Grafiken bestimmte Bereiche "schneiden" kann.
  • Ein Editor mit Syntax-Highlighting ist hilfreich.

Logo einbinden und Navigation nach unten verschieben

Logo für die neue Webseite
  • Zuerst wird das Logo mit Printkey "ausgeschnitten".
  • Das neue Logo (siehe Screenshot) unter "logo.gif" abspeichern.
  • Das Logo auf den Webserver kopieren, zum Beispiel in dem Ordner "../css/papoo3/images".
  • Die Datei "../css/papoo3/basemod.css" öffnen.
  • Im HEAD-Bereich (ID: #head) die bestehende Datei "top.jpg" durch "logo.gif" ersetzen.
/* background-image: url(images/top.jpg); */
background-image: url(images/logo.gif);
Das Logo ist eingebunden, aber noch nicht komplett sichtbar

Damit ist das Einbinden des Logos erfolgt, aber wie man sehen kann, wird ein Teil des Logos noch verdeckt. Deswegen muss man weitere Veränderungen am CSS vornehmen.

Überschriften anpassen

Generell werden Anpassungen an der "basedmod.css" (im CSS-Verzeichnis) gemacht. Überschriften sollte man jedoch in der Datei "schriften_und_farben.css", denn hier sind beim Standard-Layout (papoo3) drei Überschriften schon vordefiniert (H1, H2, H3).

Wir fügen den drei Überschriften

h1 {
  font-size: 140%; 
  color: #923A00; 
  font-weight: bold; 
  margin: 0.9em 0 0.9em 0px;
  padding: 0.2em; 
  border-bottom: 1px #ccc solid;
}
h2 {
  font-size: 130%; 
  color: #923A00; 
  font-weight: bold; 
  margin: 0.9em 0 0.9em 0px;
  padding: 0.1em;  
  border-bottom: 1px #ccc solid;
}
h3 { 
  font-size: 120%; 
  color: #923A00; 
  font-weight: bold; 
  margin: 0.9em 0 0.9em 0px;
  padding: 0.1em;  
  border-bottom: 1px #ccc solid;
}

noch noch die Vierte, den H4-Tag, hinzu:

h4 { 
  font-size: 110%; 
  color: #923A00; 
  font-weight: normal; 
  margin: 0.9em 0 0.9em 0px;
  padding: 0.1em; 
  border-bottom: 1px #ccc solid;
}

Wie man sehen kann, ist die Schrift jetzt kleiner und es wird kein Fettdruck mehr verwendet.

'Persönliche Werkzeuge
Namensräume
Varianten
Aktionen
Navigation
Werkzeuge