 Modifikationen - Adventskalender 01
Wenn sie meinen Adventskalender 01 als Zip-Datei herunter geladen haben, besitzen sie einen funktionierenden Online-Adventskalender. Sie möchten möglicherweise den Titeltext ändern oder ein eigenes Foto einbinden. Wie das geht, lesen sie hier.
|
|
• Adventskalender 01 - Anpassung - weitere Modifikationen
Ihr eigenes Bild oder Foto personalisiert ihren Kalender. Es ersetzt dann mein Motiv. Der Vordergrund mit Kästchen bleibt erhalten.
Passend zur Hintergrundgrafik können sie das Erscheinungsbild anpassen. Unter anderem
- den farbigen Rahmen
- Nummernfenster (siehe rechts 12 )
- die Hintergrundfarbe
- Kästchengrafik im Vordergrund
 Demo ansehen
| |
|
Anleitung zu möglichen Anpassungen
Zur Modifikation des Adventskalenders müssen sie manchmal im Quelltext der HTML-Datei Änderungen vornehmen. Ich erkläre ihnen wie sie dabei vorgehen können.
 Um ihnen Modifikationen des Adventskalenders zu erleichtern, habe die betreffenden Positionen im Quelltext gekennzeichnet!
Damit sie die entsprechende Codezeile in der HTML-Seite schneller auffinden, habe ich im Quelltext Markierungen eingetragen, auf die ich in den Anleitungen zur Modifikation hinweise.
Beispiel:  Edit-Marker 07 - Hintergrundbild
Suchen sie also im Quelltext des Adventskalenders den entsprechenden 'Edit-Marker' um Anpassungen einzutragen.
a Überschrift / Titeltext
Edit-Marker 01
Der Titeltext des Kalenders ist im Body-Bereich oberhalb der Grafik bei Edit-Marker 01 eingetragen. Ersetzen sie meinen Eintag mit ihren Wahltext. Die Formatierung des Textes wird über CSS-Angaben festgelegt. Siehe Edit-Marker 02.
<div class="titel">Adventskalender 01 V1</div>
Video ansehen
Hier wird in einem Video gezeigt, wie sie den Titeltext im Kalender ändern und anpassen können. Dazu benötigen Sie einen Flash-Player.
| Adventskalendder Titeltext ändern |
Video |
Download |
|
Sie können zu diesem Thema auch ein kurzes Flash-Video ansehen. Die Datei ist allerdings 2,1 MB groß. Alternativ dazu können sie den Film (1,6 MB) auch als ZIP-Datei herunterladen.
|
2,1 MB |
1,6 MB |
b Schriftformatierung Titel
Edit-Marker 02
Die Textfarbe, -größe und Gewichtung für den Titetext wird im Block der CSS-Anweisungen für die Unterklasse 'titel' eingetragen. Die CSS-Anweisungen stehen im HEAD-Bereich der Seite.
Wenn Sie im Quelltext der Kalenderdatei den Edit-Marker 02 gefunden haben sind Sie am richtigen Ort, um die Formatierung des Titeltextes anzupassen. Sie befinden sich bei den CSS-Anweisungen für die Unterklasse "titel" . Dort finden Sie Eintragungen wie:
.titel {
font-size:20px;
color:#FFFFFF;
font-weight:bold;
}
Alles was Sie in dem CSS-Block für die CSS-Unterklasse " .titel " eintragen oder ändern, hat sofort eine Auswirkung auf das Erscheinungsbild des Textes als Überschrift oberhalb des Kalenders steht.
Ändern Sie z.B. den Farbwert von #FFFFFF zu #0000FF erscheint die Überschrift in blau statt in weiß.
c Eigenes Foto / eigene Grafik einbinden
Edit-Marker 07
Sie können den Adventskalender sehr leicht personalisieren. Daszu bedarf es grundsätzlich nur eines einzigen Arbeitsschritts: Sie ersetzen die Standard-Grafik mit ihrer eigenen Grafik / mit ihrem eigenen Foto.
Mehr Info zur Hintergrundgrafik finden sie bei  eigene Grafik einbinden
d Nummernfenster / PopUp-Box Tageszahl
Edit-Marker 03
Hintergrundfarbe, Schrifttype, Schriftfarbe und Schriftgröße können sie ihrem Design anpassen. Die Formatierungen sind im Block der CSS-Anweisungen für die Unterklasse 'zahl' eingetragen. Die CSS-Anweisungen stehen im HEAD-Bereich der Kalenderseite.
Mehr Info zur Anpassung der PopUp-Box finden sie im Menü links auf der Seite
PopUp-Box Tageszahl
e Rahmen des Kalenders - Breite und Farben
Edit-Marker 06
Die Formatierung des Rahmens für die Kalendergrafik wird im Block der CSS-Anweisungen für die Unterklasse 'rahmen' eingetragen. Die CSS-Anweisungen stehen im HEAD-Bereich der Seite. Breite, Farbe und Rahmentyp eintragen
/* Edit-Marker 06 Rahmen */
.rahmen {
border:30px ridge #8080FF;
}
Breite hier 30 Pixel, Farbe hier blaue Farbtöne
Wenn ein Rahmen nicht erwünscht ist sieht der Eintrag so aus:
/* Edit-Marker 06 Rahmen */
.rahmen {
border:none;
}
f Hintergrundfarbe
Die Hintergrundfarbe für die HTML-Seite des Kalenders wird im Block der CSS-Anweisungen für den 'body' eingetragen. Die CSS-Anweisungen stehen im HEAD-Bereich der Seite.
<style type="text/css">
<!--
body {
...
/* Hintergrundfarbe */
background-color:#000080;
color: #FFFFFF;
margin:0px;
padding:0px;
...
}
g Klickbereiche - andere Kästchen-Grafik
Edit-Marker 05
Abhängig von der vorherrschenden Farbe ihrer Hintergrundgrafik kann man möglicherweise die Kästchen (Klickbereiche) nicht mehr erkennen. Laden sie dann eine andere, passende Grafik herunter.
Infos zur Anpassung und Download-Möglichkeit unterschiedlicher Grafiken finden sie im Menü links auf der Seite
 andere Kästchengrafik
h Schneefall
Wenn sie die Anzahl der einschwebenden Schneeflocken oder nur den Typ ändern möchten, so ist auch das möglich. Sie können eine anderere Grafik für die Schneeflocken einsetzen. Ich halte 16 unterschiedliche Schneeflocken für sie bereit.
Infos zur Anpassung und Download-Möglichkeit unterschiedlicher Grafiken finden sie im Menü links auf der Seite
Mehr Info - Kalender Schneeflocken
Wenn Sie auf den Schneefall verzichten möchten, könnten Sie das Schneefallsript (steht unmittelbar vor dem Ende-Body-Tag) herausschneiden / löschen.
|
Home • Adventskalender • Kalender 01 • Modifikationen
DOWNLOAD