Anpassungen - Adventskalender 14
Auf dieser Seite gebe ich einige Tipps und Anleitungen zur Anpassung des Adventskalenders 14. Grundsätzlich müssen Sie lediglich den Titeltext oberhalb des Kalenders anpassen.
|
|
Modifizierungen + Anpassungen
Nach dem Entpacken der ZIP-Datei in einem neuen Ordner, besitzen Sie einen funktionierenden Adventskalender und auch bereits 24 Vorlagen für die Tagesdateien. Die Tagesdateien sind allerdings bis auf eine kleine Grafik und der angezeigten Tageszahl (Datum) leer. Dort stellen sie ihre eigenen Inhalte ein.
Anpassung des Adventskalenders
Die einzig notwendige Anpassung meiner Vorlage ist die Modifizierung des Titeltextes oberhalb des Kalenders! Tragen Sie dort einen passen Text ein: "Adventkalender 2010 des ..." .
Möchten sie ...
- die Überschrift ändern
- PopUp-Box (Tageszahl) gestalten
- eigene Pfadangaben eintragen
.. finden Sie hier meine Erklärungen
|
Weitere Anpassungen
- eigene Tagedateien erstellen
- meine Musterdateien modifizieren
- den Schneefall modifizieren
- eine Musikdatei einbinden
... schauen im Menü links.
|
|
In diesem Adventskalender verwende ich ein neues Script. Die Funktionen zur Datumsanzeige, zur Datumsprüfung und für die Anzeige der Tageszahlen bei MouseOver wurden völlig überarbeitet. Version: 20. Oktober 2010
|
1 Kalender in eine vorhandene Seitenvorlage einbinden
Soll ihr Kalender in eine vorhandene Seitenvorlage eingebunden werden lesen Sie meine Informationen zum Einkopieren auf der Seite "Einbauanleitung" im Menü links.
2 Titeltext ändern
Möchten sie den Titeltext ändern, lokalisieren sie im Quellcode der Kalenderdatei diese Eintragung (etwa bei Zeile 343):
<!-- Titeltext hier eintragen -->
<div class="titel">Adventskalender 14 ...</div>
<!-- Titeltext hier eintragen -->
<div class="titel">Adventskalender 2010 - SC Münster 1936</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 |
Schriftformatierung für den Titel
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.
Edit-Marker 02
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:
/* Edit-Marker 02 Titelformat */
.titel {
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
color:#FFFFFF;
font-weight:normal;
}
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ß.
3 Pfadangaben für Tagesdateien ändern
|
Beim Kalender 14 stehen die Tagesdateien in einem eigenen Unterordner. Für gewöhnlich müssen Sie nichts ändern. Die Tagesdateien dürfen aber auch in einem anderen Unterordner stehen. In einem solchen Fall müssen Sie im Script Änderungen vornehmen:
|
|
Falls die 24 + 2 Tagesdateien auf einem anderen Server liegen oder aus einem anderen Grund nicht im vorgesehenen Unterordner stehen, können sie die Pfadangaben entsprechend eintragen.
Suchen sie im Quelltext den Edit-Marker 'Pfad'
// Edit-Marker Pfad
// hier könnte man den Pfad für die Tagesdateien eintragen (Ordner oder URL)
// Groß- Kleinschrift beachten
// Slasch (/) nicht vergessen
// Beispiele:
// pfad = "http://www.web-toolbox.net/kalender/";
// pfad = "tagesdateien/";
// pfad = ""; (bleibt leer wenn die Dateien im gleicher Ordner stehen)
pfad = "tagesdateien01/";
a) eigener / anderer Unterordner
Name des Unterordners + Slasch (/) zwischen die Anführungszeichen eintragen:
pfad = "Name des Unterordners/";
b) Tagesdateien im gleichen Ordner
Wert der Variablen 'Pfad' bleibt leer (zwischen den Anführungszeichen steht nichts)
pfad = "";
c) absoluter Link
Domainname + Unterordnername + Slasch (/) zwischen die Anführungszeichen eintragen:
pfad = "http://www.meineSeite.de/advent/tagesdateien/";
4 Formatierung PopUp-Tageszahl
Durch die Formatierung der eingeblendeten PopUps für die Tageszahl mit CSS-Technik lassen sich die Farben und Größen anpassen. (Achtung: In diesem Kalender verwende ich eine neue Script-Version vom 20. Oktober 2010).
1) Größe und Rand
2) Farbe, Hintergrundfarbe, Textformatierung
/* Edit-Marker 03 Tageszahl */
.Zahl {
width:65px;
height:65px;
border:1px solid #000000;
}
.Zahl td {
background-color:#0090E0;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:28px;
font-weight:bold;
color:#FFFFFF;
}
5 Tagesdateien anpassen
Im Download sind bereits 24 Musterdaten enthalten. Die Dateinamen sind 1.htm bis 24.htm. Zum Anpassen der Tagesdateien öffnen sie z.B. die Datei 1.htm und kopieren ihre eigenen Inhalte (Gedicht, Rezept, Bilder, ...) in den Inhaltsbereich gleich unter der Tageszahl im Rahmen. Danach speichern sie die Datei. Fertig!
Weitere Hinweise zum Anpassen der 24 Tagesdateien finden sie im Menü links. Siehe Menüpunkt: Allgemeine Modifikationen > Tagesdateien anpassen
6 alternative Tagesdateien
Wenn Sie eine Variante zur Anzeige der Tagesdateien im PopUp-Window nutzen, können Sie einen alternativen Satz von 24 Musterdateien herunterladen. (Menü links: Tagesdateien Versionen). Bei diesen Musterdateien schließen die PopUps beim nächsten Mausklick automatisch! Eine Auto-Schließen-Anweisung im Body-Tag (onBlur) überwacht den Fokusverlust und schließt das PopUp-Window.
Das verhindert die Anzeige von mehreren PopUp-Windows gleichzeitig. Wenn Ihre Tagesdateien aber z.B. Links, Videos oder Sounddateien enthalten, kann das zu unerwünschtem Verhalten führen.
7 Info zum Schneefall-Script
In dem meisten Kalendern ist ein Schneefallscript integriert (nicht in allen Varianten). Wenn Sie Schneefall für Ihre Seite möchten, kann das Script ohne großen Aufwand einkopiert werden. (den Quellcode finden Sie auf der unten bezeichneten Seite). Um den Schneefall zu entfernen schneiden Sie die Scriptanweisungen heraus (Scriptcode löschen).
Das Script wird unmittelbar vor dem Ende-Body-Tag (</body>) eingebunden. Die Anzahl der Schneeflocken können Sie, genau wie den Typ der Schneeflocken, ändern. Infos im Menü links.
Das JavaScript für die langsam einschwebenden Schneeflocken habe ich nicht selbst geschrieben, darf aber frei verwendet werden, wenn die Copyright-Informationen unverändert bleiben!
Informationen zum Schneefallscript von Altan im Menü links.
Kalender testen
Nach der Modifizierung lassen sich nicht alle Funktionen des Adventskalenders testen. Schließlich wird durch eine Datumsprüfung verhindert, das man die Fensterchen zu früh öffnet. Zum Testen müssten sie das Systemdatum ihres Rechners vordatieren. Mehr Info dazu finden sie im Menü links

|