Gestaltung der Netzseite

[Wolf314]

Die Ausstattung der Netzseiten des ZZR-Forums mit weihnachtlichem Ambiente ist ja umwerfend beeindruckend!
Falls die Frage erlaubt ist: Wie kann ich das ebenfalls für meine eigene Homepage hinbekommen bzw. wo kann man das How-To erlernen?

[Tripplerocker]

...ja, das macht was her. Ist sehr stimmungsvoll .

Vielen Dank dafür

[Möööööp]

Da müßt Ihr bei Bernd direkt anfragen - ich finde das auch sehr schön, bin aber wie er das gemacht hat.

[Wolf314]

Die Dekoration habe ich nun mit HTML5 und CSS3 so weit nachgebaut, dass ich dem Quellcode für jede Netzseite etwas hinzufügen muss. Für meine bescheidenen Zwecke würde das genügen. (Bei Interesse gehe ich hier gerne auf den zusätzlichen Code ein.)

Jetzt verbleibt nur die Frage, ob die tollen Grafiken kostenfrei für eine Veröffentlichung verwendet werden dürfen.
Nachtrag: Habe BeeJay gerade eine entsprechende Anfrage per eMail geschrieben.

[Wolf314]

Eben habe ich die Freigabe zur Verwendung der Grafiken von BeeJay erhalten - allerherzlichstes hierfür!!
Weil die Adventszeit schon vorbei ist, habe ich an die Stelle des (s?)ein gemütliches Häuschen platziert:
   

Künftig werde ich die Dekoration zu Beginn jeder neuen Jahreszeit anpassen. Einige in Frage kommende Grafiken habe ich in den Weiten des Internets bereits gefunden. Diese Zusatzgestaltung bereitet mir selber gerade eine Riesenfreude. Ohne den Anstoß durch BeeJays Arbeit wäre das nicht geschehen!

Nachtrag:
Nun wird die Dekoration meiner Netzseiten mittels Javascript automatisch an die meteorologischen Jahreszeiten angepasst. Das Script sowie die hinzugefügten Zeilen im HTML- und CSS-Code sind entgegen meiner Erwartung verblüffend einfach.

[Wolf314]

Jetzt kann ich meine Ausgangsfrage selbst beantworten.
Hierzu gebe ich den Code der Netzseitenprogrammierung per Copy & Paste an, was Tippfehler ausschließt.
Um die Javascript-Datei schreiben zu können, sah ich zunächst das Links sind für Gäste , nicht aktivierte Accounts sowie Nullposter unsichtbar. Bitte registriere Dich erst als Mitglied im Forum, aktiviere Deinen Account oder schreibe Deinen ersten Beitrag. Klick hier zum registrieren, oder hier um den den Aktivierungscode erneut zu erhalten. von SELFHTML an. HTML- und CSS-Erfahrung hatte ich bereits.

Mit Folgendem wird in den anderen Jahreszeiten dezenter als im Winter dekoriert. Analog lässt sich der Code für weitere Positionen (wie oben links usw.) schreiben. Kostenfreie Grafiken lassen sich im Internet finden oder von meiner Netzseite in entsprechender Jahreszeit kopieren. Die Schneelandschaft wurde allerdings von BeeJay gestaltet, also sollte er zuvor um Erlaubnis gebeten werden.
Gerne gehe ich auf eventuelle Fragen ein.

Zusätzlicher Text in der HTML-Quelldatei *.html der dekorierten Netzseiten (Die vierte Zeile mit dem Script-Aufruf muss ich in diesem Forum außerhalb des Code-Blocks schreiben)

Code:

<div id="deco-bottom"></div>
<div id="deco-bottom-left"></div>
<div id="deco-bottom-right"></div>

<script src="./css/deco.js"></script>

Zusätzlicher Code in der CSS-Datei *.css

Code:

#deco-bottom {
  position: fixed;
  width: 100%;
  bottom: -5px;
  border: 0;
  text-align: center;
}

#deco-bottom-left {
  position: fixed;
  left: 0;
  bottom: 0;
  border: 0;
}

#deco-bottom-right {
  position: fixed;
  right: 0;
  bottom: 0;
  border: 0;
}

Inhalt der zusätzlichen Javascript-Datei deco.js

Code:

// Austausch der Dekoration gemäß meteorologischer Jahreszeit
  
let nun = new Date(),
    monat = nun.getMonth() + 1;
  
if (monat ≥ 3 && monat < 6) {
  document.getElementById('deco-bottom-left').innerHTML = '<img src="./bilder/deco/spring.png">';
}
else if (monat ≥ 6 && monat < 9) {
  document.getElementById('deco-bottom-left').innerHTML = '<img src="./bilder/deco/summer.png">';
}
else if (monat ≥ 9 && monat < 12) {
  document.getElementById('deco-bottom-left').innerHTML = '<img src="./bilder/deco/fall.png">';
}
else {
  document.getElementById('deco-bottom').innerHTML = '<img src="./bilder/deco/rotwild.png">';
  document.getElementById('deco-bottom-left').innerHTML = '<img src="./bilder/deco/winter.png">';
  document.getElementById('deco-bottom-right').innerHTML = '<img src="./bilder/deco/tanne.png">';
}

---

Links sind für Gäste , nicht aktivierte Accounts sowie Nullposter unsichtbar. Bitte registriere Dich erst als Mitglied im Forum, aktiviere Deinen Account oder schreibe Deinen ersten Beitrag. Klick hier zum registrieren, oder hier um den den Aktivierungscode erneut zu erhalten. & Links sind für Gäste , nicht aktivierte Accounts sowie Nullposter unsichtbar. Bitte registriere Dich erst als Mitglied im Forum, aktiviere Deinen Account oder schreibe Deinen ersten Beitrag. Klick hier zum registrieren, oder hier um den den Aktivierungscode erneut zu erhalten. 2012 | Links sind für Gäste , nicht aktivierte Accounts sowie Nullposter unsichtbar. Bitte registriere Dich erst als Mitglied im Forum, aktiviere Deinen Account oder schreibe Deinen ersten Beitrag. Klick hier zum registrieren, oder hier um den den Aktivierungscode erneut zu erhalten. | Links sind für Gäste , nicht aktivierte Accounts sowie Nullposter unsichtbar. Bitte registriere Dich erst als Mitglied im Forum, aktiviere Deinen Account oder schreibe Deinen ersten Beitrag. Klick hier zum registrieren, oder hier um den den Aktivierungscode erneut zu erhalten. & Links sind für Gäste , nicht aktivierte Accounts sowie Nullposter unsichtbar. Bitte registriere Dich erst als Mitglied im Forum, aktiviere Deinen Account oder schreibe Deinen ersten Beitrag. Klick hier zum registrieren, oder hier um den den Aktivierungscode erneut zu erhalten. | Links sind für Gäste , nicht aktivierte Accounts sowie Nullposter unsichtbar. Bitte registriere Dich erst als Mitglied im Forum, aktiviere Deinen Account oder schreibe Deinen ersten Beitrag. Klick hier zum registrieren, oder hier um den den Aktivierungscode erneut zu erhalten. | Links sind für Gäste , nicht aktivierte Accounts sowie Nullposter unsichtbar. Bitte registriere Dich erst als Mitglied im Forum, aktiviere Deinen Account oder schreibe Deinen ersten Beitrag. Klick hier zum registrieren, oder hier um den den Aktivierungscode erneut zu erhalten. | Links sind für Gäste , nicht aktivierte Accounts sowie Nullposter unsichtbar. Bitte registriere Dich erst als Mitglied im Forum, aktiviere Deinen Account oder schreibe Deinen ersten Beitrag. Klick hier zum registrieren, oder hier um den den Aktivierungscode erneut zu erhalten. & Links sind für Gäste , nicht aktivierte Accounts sowie Nullposter unsichtbar. Bitte registriere Dich erst als Mitglied im Forum, aktiviere Deinen Account oder schreibe Deinen ersten Beitrag. Klick hier zum registrieren, oder hier um den den Aktivierungscode erneut zu erhalten.
Links sind für Gäste , nicht aktivierte Accounts sowie Nullposter unsichtbar. Bitte registriere Dich erst als Mitglied im Forum, aktiviere Deinen Account oder schreibe Deinen ersten Beitrag. Klick hier zum registrieren, oder hier um den den Aktivierungscode erneut zu erhalten. (Links sind für Gäste , nicht aktivierte Accounts sowie Nullposter unsichtbar. Bitte registriere Dich erst als Mitglied im Forum, aktiviere Deinen Account oder schreibe Deinen ersten Beitrag. Klick hier zum registrieren, oder hier um den den Aktivierungscode erneut zu erhalten., Links sind für Gäste , nicht aktivierte Accounts sowie Nullposter unsichtbar. Bitte registriere Dich erst als Mitglied im Forum, aktiviere Deinen Account oder schreibe Deinen ersten Beitrag. Klick hier zum registrieren, oder hier um den den Aktivierungscode erneut zu erhalten. & Links sind für Gäste , nicht aktivierte Accounts sowie Nullposter unsichtbar. Bitte registriere Dich erst als Mitglied im Forum, aktiviere Deinen Account oder schreibe Deinen ersten Beitrag. Klick hier zum registrieren, oder hier um den den Aktivierungscode erneut zu erhalten.) | Links sind für Gäste , nicht aktivierte Accounts sowie Nullposter unsichtbar. Bitte registriere Dich erst als Mitglied im Forum, aktiviere Deinen Account oder schreibe Deinen ersten Beitrag. Klick hier zum registrieren, oder hier um den den Aktivierungscode erneut zu erhalten. | Links sind für Gäste , nicht aktivierte Accounts sowie Nullposter unsichtbar. Bitte registriere Dich erst als Mitglied im Forum, aktiviere Deinen Account oder schreibe Deinen ersten Beitrag. Klick hier zum registrieren, oder hier um den den Aktivierungscode erneut zu erhalten.

[Möööööp]

Hallo Dieter (und auch Bernd, falls Du mitliest), hier noch eine Info - ist mir gerade aufgefallen.
Links sind für Gäste , nicht aktivierte Accounts sowie Nullposter unsichtbar. Bitte registriere Dich erst als Mitglied im Forum, aktiviere Deinen Account oder schreibe Deinen ersten Beitrag. Klick hier zum registrieren, oder hier um den den Aktivierungscode erneut zu erhalten. sind ein paar formatfüllende Bilder verlinkt. Wenn Du eines davon aufmachst blockiert die (übrigens wunderschöne) Winterlandschaft die Weiter-Zurück-Schließen Buttons unten rechts.

[Wolf314]

Die Dekoration legt sich über die Netzseite und blockiert so leider den Zugriff auf darunterliegende Inhalte. Sollte bei geöffneter Grafik im ZZR-Forum irgendwo ein davon nicht bedeckter Bereich vorhanden sein, kann man zum Schließen der Grafik dorthin klicken. Andernfalls muss die Netzseite einfach neu geladen werden.

[Möööööp]

Is' klar. Aber umständlich wenn man mehrere Bilder durchschauen möchte.

[Wolf314]

Prinzipiell kann man die Deko-Bilder in den Hintergrund verlegen. Dann müssten aber die im Forum verwendeten Boxen transparent gemacht und die Hintergrundfarbe heller gewählt werden. Alternativ könnte man die Steuerelemente in geöffneten Grafiken anders positionieren. Ob das in der kommerziellen Forensoftware (leicht) bewerkstelligt werden kann, weiß ich leider nicht.