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!

Service: Banner Purpur-Rot-Farbverlauf

Die Farbverläufe sind wieder da!

Um es euch einfacher zu machen, habe ich rasch zwei Grafiken gebastelt, die ihr gerne nach Belieben für eure Webseiten etc. pp. verwenden könnt.

Einmal als Quadrat, gut geeignet für Facebook und die rechte Seitenspalte:

Verlauf-purpur-rot-quadrat-2000px
(Großes Bild nach dem Klick. Achtung, 2000 Pixel – ihr müsst es also höchstwahrscheinlich verkleinern.)

In Facebook kann das dann so aussehen:

screenshot-facebook-wahlalter

Und einmal eine Header-Grafik für das aktuelle WebsoziCMS-Layout spdbw2012_breit:

verlauf-purpur-zu-rot-header-spdbw2012breit
(Großes Bild nach dem Klick – hier ist keine Größenanpassung notwendig, es passt perfekt.)

Im Einsatz sieht das dann ungefähr so aus:

screenshot-spd-rn

Wenn ihr einen eigenen Verlauf bauen wollt, die Farben sind:

  • Purpur #990066
  • Rot #e2001a

PS: Piktogramme und alle sonstigen Farben im aktuellen Corporate Design der SPD findet ihr in diesem Blog-Eintrag.

PPS: Die SPD-Schriften erhaltet ihr, sofern berechtigt, hier: spd-schriften@spd.de

Neues WebSoziCMS-Design anwenden / Newsbox-Slider einrichten

spd-rn.de

Die SPD Baden-Württemberg stellt im WebSoziCMS ein neues Design zur Verfügung. Es ist angelehnt an das Design der Bundespartei bzw. SPD.de und in einer schmalen (Beispiel: spd-bw.de) und in einer breiten Version (Beispiel: spd-rn.de) verfügbar (es sind also quasi sogar zwei Designs). Neues WebSoziCMS-Design anwenden / Newsbox-Slider einrichten weiterlesen