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

Menschenkette gegen Rechts: Banner für Facebook und WebsoziCMS

Wenn ihr die Menschenkette gegen Rechts auf Facebook bewerben wollt, findet ihr hier das dazu passende Facebook-Titelbild:

menschenkette-gegen-rechts-facebook
(Ein Klick auf das Bild führt zur großen, genau passenden Version.)

Und wenn ihr auch auf eurer WebsoziCMS-Seite darauf verweisen wollt – hier ist das dafür passende Bild:

menschenkette-gegen-rechts-websozicms
(Ein Klick auf das Bild führt zur großen, genau passenden Version.)

Anleitung: Facebook-Like-Box erstellen

Sofern Du eine Facebook-Seite betreibst, willst Du vielleicht auch auf Deiner Website auf diese verweisen. Das geht – ganz einfach sogar.

  1. Zuerst musst Du Dich bei Facebook ausloggen. (Etwas paradox – aber dann ist es einfacher.)
  2. Gehe danach zu dieser Seite: https://developers.facebook.com/docs/reference/plugins/like-box/
  3. Dann gib unter „Facebook Page URL“ den Pfad zu Deiner Facebook-Seite ein – für die Seite der SPD Baden-Württemberg wäre dies: http://facebook.com/spdbw
  4. Jetzt die Einstellungen nach Belieben verändern – die richtige Breite für das aktuelle Layout ist 310 Pixel.
  5. Dann auf „Get Code“ klicken.
  6. IFRAME auswählen.
  7. Den kompletten Code kopieren und als rechten Block im WebsoziCMS einfügen.

Für die SPD Baden-Württemberg sieht der Code bspw. so aus:

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fspdbw&amp;width=310&amp;height=558&amp;show_faces=true&amp;colorscheme=light&amp;stream=true&amp;border_color=%23ddd&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:310px; height:558px;" allowTransparency="true"></iframe>

Ergebnis:

PS: Ob man die Facebook-Like-Box nutzen will oder nicht, ist eine politische Entscheidung, die jedeR selbst treffen muss.

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

Service: Piktogramme für Facebook, RSS, Twitter, YouTube und Flickr

Piktogramme sind praktisch und sehen hübsch aus (siehe rechte Spalte). Die ersten vier Piktogramme kommen aus dem Willy-Brandt-Haus, das Flickr-Piktogramm habe ich rasch selbst gebaut.

Facebook-Pictogramm RSS-Pictogramm Twitter-Pictogramm />YouTube-Pictogramm />Flickr-Pictogramm
Facebook RSS Twitter YouTube Flickr

Viel Spaß damit!

PS: Im internen Bereich von SPD.de findet ihr noch mehr Piktogramme, die müsst ihr allerdings aus einer EPS-Datei extrahieren – das habe ich in diesem Fall schon erledigt.

PPS: Ein kleiner Extraservice: Hier die vier aktuellen Farben (jeweils CMYK/RGB/HTML), die im Corporate Design der SPD zur Anwendung kommen:

Rotes Quadrat Purpurnes Quadrat Gelbes Quadrat Türkises Quadrat
Rot:
C 0 M 100 Y 100 K 0
R224 | g0 | B27
#e2001a
Purpur:
C 28 M 100 Y 0 K 25
R153 | g0 | B102
#990066
Gelb:
C 0 M 5 Y 35 K 0
R255 | g240 | B185
#fff0b9
Türkis:
C 42 M 0 Y 26 K 0
R162 | g212 | B199
#a2d4c7

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