 Anleitung - Adventskalender 01 Variante 15
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-15 - 450 Pixel Breite (3 Varianten)
Auf Anfrage stelle ich nun den Adventskalender 01 auch in 3 Varianten für eine Breite von 450 Pixel (ohne Rand) zur Verfügung. Einigen Webmastern stehen lediglich 500 Pixel maximaler Breite für Inhalte zur Verfügung.
Die Hintergrundgrafik hat für diese Varianten die Abmessungen 450 x 338 Pixel. Entsprechend nutze ich hier eine transparente Vordergundgrafik (Kästchengrafik) mit den gleichen Abmessungen.
Unten: Screenshot Kalender 450 px mit formatiertem Rahmen 16px, Gesamtbreite: 482 Pixel
|
In den Adventskalendern der Varianten 01-15-x verwende ich ein neues Script (Version Sept. 2011). Die Funktionen zur Datumsanzeige, zur Datumsprüfung und für die Anzeige der Grafiken bei MouseOver wurden überarbeitet.
Die Tagesdateien stehen nun in einem eigenen Unterordner!
|
Wenn Sie in den Vorjahren einen meiner anderen Adventskalender eingesetzt haben und nun umsteigen möchten, ist das kein Problem. Ihre Tagesdateien können Sie weiter verwenden. Wählen Sie die passende Kalendervariante. Beachten Sieallerdings, dass die Tagesdateien beim Kalender 01-15 nun in einem eigenen Unterordner stehen.
Zusatzinfos für Kalender 01 Variante 15  Tagesdateien Unterordner
Eigenschaften Kalender 01 Variante 15, abhängig von der Variante
| Breite | Anzeige von | Grafik | Tagesdatei als | Anzeige der Tagesdatei im |
450
Pixel | Tagszahl | Schnee | Counter | eigene
Grafik | HTML | PDF | PopUp
Window | gleichen
Fenster |
 |
|
|
|
|
|
|
|
|
Arbeitsaufwand - Schritte zum eigenen Kalender
Wenn sie die ZIP-Datei meines Kalenders herunter laden und in einem neuen Ordner auspacken, besitzen sie einen funktionierenden Adventskalender und auch bereits 24 Tagesdateien. Die Tagesdateien sind allerdings bis auf eine kleine Grafik und der angezeigten Tageszahl (Datum) leer. Dort stellen sie ihre eigenen Inhalte ein.
1) Zip-Datei herunterladen und entpacken.
2) testen
3) meine 24 Tagesdateien anpassen / eigene herstellen.
4) Kalender testen
5) eigene Grafik (450 x 338 Px) einbinden, wenn sie möchten.
Entscheiden Sie sich für eine Grundversion und dann für die Variante Ihrer Wahl. Die Varianten unterscheiden sich in der Art der Anzeige von Tagesdateien.
- HTM-Tagesdatei im PopUp-Window
- HTM-Tagesdatei im gleichen Fenster
- PDF-Tagesdatei im neuen Browserfenster
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 die Modifikationen des Adventskalenders zu erleichtern, habe ich 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. Suchen Sie also im Quelltext des Adventskalenders den entsprechenden 'Edit-Marker' um Anpassungen einzutragen.
Speicherort für Tagesdateien im Script eintragen
Wenn Ihre 24 + 2 Tagesdateien im vorgesehenen Verzeichnis stehen, müssen Sie normalerweise nichts ändern! Das Script setzt den üblichen Speicherort voraus und ruft ohne weitere Verweisangaben z.B. am 12. Dezember die Datei Nr. 12 auf.
Falls Ihre 24 + 2 Tagesdateien nicht im vorgesehenen Verzeichnis stehen, benötigt der Kalender zusätzliche Informationen. Die Info (Pfad zu einem Unterordner) kann an zentraler Stelle eingetragen werden. Sie müssen lediglich einen einzigen Eintrag im Script ändern. Suchen sie im Quellcode der Kalender-Datei den Marker
Edit-Marker Pfad
Wenn Ihre 24 + 2 Dateien in einem Unterordner mit der Bezeichnung 'geheim' abgespeichert wurden, ändern Sie die Angaben wie folgt:
// Edit-Marker Pfad
var pfad = "geheim/";
Wenn Ihre 24 + 2 Dateien im Ordner mit der Bezeichnung 'assets/kalender/' abgespeichert wurden, ändern Sie die Angaben wie folgt:
// Edit-Marker Pfad
var pfad = "assets/kalender/";
Wenn Ihre 24 + 2 Dateien im Ordner mit der Bezeichnung 'assets/kalender/' abgespeichert wurden und Sie möchten eine absolute Pfadangabe eintragen, ändern Sie die Angaben wie folgt:
// Edit-Marker Pfad
var pfad = "http://www.Domainname.de/assets/kalender/";
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. Achtung: Abmessungen 450 x 338 Pixel
<!-- Edit-Marker 07 - Bildname / Pfad -->
<table class="rahmen" width="450" height="338" ... cellpadding="0">
<tr><td background="foto-450-01.jpg">
Auch Hier können Sie eigene Pfadangaben eintragen.
<!-- Edit-Marker 07 - Bildname / Pfad -->
<table class="rahmen" width="450" height="338" ... cellpadding="0">
<tr><td background="assets/kalender/foto-450-01.jpg">
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.
/* Edit-Marker 03 Tageszahl */
.Zahl {
width:65px;
height:65px;
line-height:65px;
background-color:#DF0000;
border:1px solid #FFFFFF;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:28px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
}
e Rahmen des Kalenders - Typ, Breite und Farbe
Rahmen formatieren
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:16px double #4F4F4F;
}
Breite hier 30 Pixel, Farbe hier blaue Farbtöne
Kalender ohne Rahmen
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:#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 und ändern Sie den Eintrag für die Grafik.
<!-- Edit-Marker 05 Vordergrund-Grafik Kästchen -->
<img usemap="#Beispiel" src="transmap-450-02.gif" width="450" ... >
Auch Hier können Sie eigene Pfadangaben eintragen.
<!-- Edit-Marker 05 Vordergrund-Grafik Kästchen -->
<img usemap="#Beispiel" src="assets/kalender/transmap-450-02.gif" width="450" ... >
 Demo - kalender mit weißen Kästchen + Ziffern 
Ein Download-Möglichkeit unterschiedlicher Grafiken finden weiter unten.
h Größe des PopUp-Windows
Um die Größe des PopUP-Windows für die Tagesdatei beim Kalender 011-15b zu verändern passen Sie diese Werte an:
// PopUp-Window Eigenschaften für die Tagesdatei
Attribute02 = "left=10, ... ,resizable=yes,width=750,height=600";
i 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.
Transmaps - Kästchengrafiken für Variante 01-15-x (450 × 338)
Kästchengrafiken mit den Abmessungen (500 × 375) finden Sie Hier
Die Hintergrundgrafik für die Varianten 01-15 hat die Abmessungen 450 x 338 Pixel. Entsprechend nutze ich hier eine transparente Vordergundgrafik (Kästchengrafik) mit den gleichen Abmessungen.
transmap-450-01.gif (450 × 338)
Kästchen weiß (Hintergrund hier blau eingefärbt)
Diese Transmap eignet sich auch für Kalender, bei denen das Hintergrundbild dunkel ist.
transmap-450-02.gif (450 × 338)
Kästchen schwarz
transmap-450-03.gif (450 × 338)
Kästchen grau mit Ziffern
Diese Transmap eignet sich auch für Kalender, bei denen sie die PupUp-Anzeige für den aktuellen Tag deaktiviert haben.
transmap-450-04.gif (450 × 338)
Kästchen grau
transmap-450-05.gif (450 × 338)
Kästchen weiß, Ziffern weiß (Hintergrund hier blau eingefärbt)
Diese Transmap eignet sich auch für Kalender, bei denen das Hintergrundbild dunkel ist.
|
Home • Adventskalender • Kalender 01-15 • Modifikationen
Schneeflocken-Info
