 Adventskalender Modifikation - Formatierung der PopUp-Box (basic)
In der Mehrzahl meiner angebotenen Online-Adventskalender erscheint bei MouseOver des Klickbereichs eine Info-PopUp-Box. Diese Box signalisiert, welches Türchen des Kalenders sich in diesem Bereich versteckt.
|
|
Formatierung der PopUp-Box für das Nummernfenster / Tageszahl
In den Standardversionen meiner Adventskalender wird in einer PopUp-Box die Tageszahl angezeigt. (siehe rechts, PopUp-Box mit der Tageszahl 6)
Passend zu ihrem Design können sie das Erscheinungsbild der Info-Box und auch der darin angezeigten Textinhalte anpassen. Mit CSS-Angaben legen sie Textgröße, Textfarbe und Schriftart fest. Die Größe der Textbox (mit oder ohne Rand) und Hintergrundfarbe passen sie ihren Vorstellungen entsprechend an.
|  |
PopUp-Box für die Tageszahl anpassen
Ich liste hier auch Informationen für Seitenbesucher, die noch ältere Versionen meiner Adventskalenders verwenden!
1a Version mit Script-Updates von 2011
 Edit-Marker 03
Tragen sie den Wert für die Textfarbe der Ziffer und Hintergrundfarbe ein
Bei Größenänderung der Box nehmen Sie identische Werte für: width, height, line-height
/* Edit-Marker 03 Tageszahl */
.Zahl {
width: 65px;
height: 65px;
line-height: 65px;
background-color: #000000;
border: 1px solid #FFFFFF;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 28px;
font-weight: bold;
color: #FF007F;
text-align:center;
}
1b Version mit Script-Updates von 2010
Edit-Marker 03
Tragen sie den Wert für die Textfarbe der Ziffer und Hintergrundfarbe ein
.zahl {
width:65px;
height:65px;
border:1px solid #000000;
}
.zahl td{
font-family:Arial,Helvetica,sans-serif;
font-size:30px;
font-weight:bold;
color:#5F5F5F;
background-color:#FFFFFF;
}
Wenn sie die CSS-Anweisungen für die PopUp-Box ansehen stellen sie fest, das Größenangaben oder auch Randformatierungen möglich sind.
Erweiterte Anzeigeoptionen für die PopUp-Box sind möglich. Statt der Tageszahl kann auch ein Text oder eine kleine Grafik angezeigt werden.  Erweiterte Funktionen
1c Version mit Script-Updates von 2007 - 2009
Edit-Marker 03
Tragen sie den Wert für die Textfarbe der Ziffer und Hintergrundfarbe ein
.zahl {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 28px;
color: #FFFFFF;
font-weight: bold;
background-color:#000080;
height:65px;
width:65px;
border:1px solid #FFFFFF;
}
Wenn sie die CSS-Anweisungen für die PopUp-Box ansehen stellen sie fest, das Größenangaben oder auch Randformatierungen möglich sind.
Mehr Text (oder Grafiken) in der PopUp-Box?
Erweiterte Anzeigeoptionen für die PopUp-Box sind möglich. Statt der Tageszahl kann auch ein Text oder eine kleine Grafik angezeigt werden. Erweiterte Funktionen
1d alte Version (2002 - 2007):
Wenn sie noch eine ältere Version meines Kalenders besitzen, die sie in den Jahren 2002 bis 2007 herunter geladen haben, ist dieser Abschnitt für sie interessant:
Farbwert für den Hintergrund des Nummernfensters
Edit-Marker 03
Farbwert ohne Anführungszeichen eintragen
<!-- Edit-Marker 03 -->
desc = "<table cellspacing=0 ... border="+bord+" bgcolor=#2C6ED5 ...
Textformatierung (Zahl) Nummernfenster
Schrifttype, Schriftfarbe und Schriftgröße im Head-Bereich der Datei
innerhalb der CSS-Anweisungen eintragen
.disp {
font-family: Verdana,Arial,Helvetica,Sans-serif;
font-size: 28px;
color: #FFFFFF;
font-weight: bold;
}
|
Home • Adventskalender • PopUp-Box Tageszahl