Anleitung: WebsoziCMS-Layout „spd2012“ mit Hintergrundbild versehen

Wie man den Header im WebsoziCMS-Layout „spd2012“ vergrößert, habe ich in einem vorherigen Beitrag erläutert.

Jetzt wenden wir uns dem Hintergrund zu; die Idee ist vom Webmaster von petra-crone.de, die CSS-Änderungen sind von mir.

So soll es aussehen:

daniel-born.de mit Hintergrund

Und so geht es:

Zuerst ein beliebiges Bild mit der Download-Funktion des WebsoziCMS hochladen – es sollte allerdings mindestens die Maße 2000×2000 Pixel haben, damit es auch auf großen Bildschirmen ordentlich aussieht. Die URL zum Bild kopieren.

Im CSS-Bereich im Adminmenü unter „Metatags“ werden folgende CSS-Ergänzungen zusätzlich eingefügt:

<style type="text/css" media="screen, projection">
<!--
body {
background: url('http://HIER-MUSS-DIE-KOMPLETTE-URL-STEHEN.DE/PFAD-ZUR-DATEI.JPG') no-repeat;
background-position: top center;
background-attachment:fixed;
}
#bread_and_crump {
display: none;
}
#navigation {
margin-top: 0px;
}
-->
</style>

Statt http://HIER-MUSS-DIE-KOMPLETTE-URL-STEHEN.DE/PFAD-ZUR-DATEI.JPG müsst ihr die URL zu eurem Bild einfügen – bei daniel-born.de ist das bspw. diese URL: http://spdnet.sozi.info/bawue/KA-Land/dborn/dl/hintergrundbild_sonnenblume.jpg

Achtung: Bitte achtet darauf, dass das Hintergrundbild keineswegs größer als 1 MB ist; eigentlich ist das schon zu groß, 200-400 KB sollten völlig ausreichend sein. (Je größer das Bild, desto langsamer der Seitenaufbau – insbesondere für Smartphone-NutzerInnen ist das relevant.)

Anleitung: Header im WebsoziCMS-Layout „spd2012“ vergrößern

Screenshot daniel-born.de

Das neue WebsoziCMS-Layout „spd2012“ ist schon sehr gut. Wer möchte, kann es noch ein wenig KandidatInnen-tauglicher machen – denn der relativ schmale Header verhindert, dass der Kopf ordentlich dargestellt wird.

In dieser Anleitung soll, wie im oben verlinkten Bildschirmfoto angezeigt (live: www.daniel-born.de), ein Headerbild der Größe 960×350 erstellt werden.

Dazu sind folgende Schritte notwendig:

  1. Als erstes musst Du den Beta-Test aktivieren, hier: www.DEINE-URL-HIER-EINFUEGEN.de/index.php?usetest=set
  2. Danach musst Du im Adminbereich unter www.DEINE-URL-HIER-EINFUEGEN.de/index.php?mod=layout&op=layout_auswahl das Layout „spd2012“ auswählen.
  3. Alsdann ist das gewünschte Headerbild hochzuladen, unter der gleichen URL wie unter Punkt 2. Du wirst feststellen, dass das schöne Headerbild im Format 960×350 vom System geschrumpft wurde. Das ist kein Problem.
  4. Begib Dich nun zu dieser Adresse: www.DEINE-URL-HIER-EINFUEGEN.de/index.php?mod=image&op=main
  5. Nun lade das gewünschte Headerbild mit dem gleichen Dateinamen noch einmal hoch und klick unten die Box „Vorhandenes Bild überschreiben.“ an.
  6. Jetzt sieht die Website vermutlich ziemlich seltsam aus. Nun kommt der entscheidende Trick. Gehe zu dieser Adresse: www.DEINE-URL-HIER-EINFUEGEN.de/index.php?mod=metatags&op=MetaTagsAdmin
  7. Nun füge im Bereich „Weitere Angaben für Profis“ in das große Feld unter „HTML- Vorlagen: JS – CSS“ exakt folgende CSS-Zeilen ein:
<style type="text/css" media="screen, projection">
<!--
#top_header {
display:none; 
}
#page_top {
margin-top: -20px;
}
#bottom_header {
height: 355px;
}
-->
</style>

Fertig. Viel Erfolg!