WebSoziCMS-Header für „Europa neu denken“

Da die offizielle SPD-Grafik „Europa neu denken“ keine für das WebSoziCMS-Layout spdbw2012_breit passenden Maße hat (benötigt werden 890 x 162), haben wir die passende Grafik entwickelt – hier ist sie:

2014_websozicms_header_europa_neu_denken
(Ein Klick auf das Bild führt zur großen bzw. notwendigen Version.)

Wenn die Grafik richtig eingesetzt wird, sieht die Webseite ungefähr so aus:

Bildschirmfoto SPDBW

Sofern die Newsbox-Funktion zum Einsatz kommt, empfiehlt es sich, das Europa-Portal von SPD.de zu verlinken:

http://www.spd.de/aktuelles/europawahl2014/

Viel Erfolg!

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.)