WebSoziCMS: So nutzt man die neuen Templates zur Landtagswahl richtig

Seit Freitag stehen zwei neue Templates im WebSoziCMS zur Verfügung: spdbw_2015_kand und spdbw_2015_allg. Wie die Namen schon andeuten, ist das eine Layout für KandidatInnen und das andere für Gliederungen wie Ortsvereine, Kreisverbände etc. gedacht. Die Unterschiede sind im Wesentlichen, dass der Header beim allgemeinen Template schmaler ist und auf allen Unterseiten angezeigt wird, während er beim KandidatInnen-Template breiter ist und nur auf der Startseite angezeigt wird. Beim KandidatInnen-Template steht die Newsbox-Funktion nicht zur Verfügung, stattdessen ist es möglich, ein Zitat im Header zu realisieren. Beide Templates sind vollständig responsive, das heißt, dass sie auf allen Bildschirmen und Displays ordentlich angezeigt werden.

Genug der Vorrede, kommen wir zur Anleitung.

Schritt 1

Im Adminbereich sind alle CSS-Anpassungen zu entfernen. Das geht via Einstellungen > Metatags. (Wir werden keinen Support für über CSS modifizierte Templates leisten.)

Schritt 2

Das gewünschte Template auswählen. Für KandidatInnen empfiehlt sich wie gesagt sehr das KandidatInnen-Template.

Schritt 3

Die Banner und Logos in den richtigen Größen hochladen. Beim KandidatInnen-Template gibt es eine Besonderheit: Das Bild für die Mobilversion wird über die Logo-Funktion hochgeladen, während das SPD-Logo rechts fix ist. Beim allgemeinen Template ist das Logo rechts austauschbar, sodass auch Jusos, ASF, 60 plus, AfA und andere Arbeitsgemeinschaften ihr Logo hochladen können.

Die Maße sind:

spdbw_2015_allg:
Banner: 1300 x 330 px
Logo: 100 x 100 px

spdbw_2015_kand:
Banner: 1300 x 650 px
Banner mobil (über die Logo-Funktion hochzuladen): 500 x 560 px

Schritt 4

Im allgemeinen Layout ist nichts mehr zu tun. Im KandidatInnen-Layout ist noch ein Zitat einzurichten, das dann auf der Startseite erscheint. Das geschieht über Einstellungen > Homepage einrichten. Dort in der „Kurzbeschreibung“ das gewünschte Zitat ohne Anführungsstriche eintragen.

Noch Fragen?

Bitte an christian.soeder@spd-bw.de senden.

Twitter im WebSoziCMS verwenden

Wenn man Twitter als Widget auf der Webseite verwenden will, bekommt man einen Code, der ungefähr so aussieht:

<a class="twitter-timeline"  href="https://twitter.com/spdbawue"  data-widget-id="251717227445895168">Tweets von @spdbawue</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Wenn man diesen Code in eine Webseite packt, erhält man dieses Ergebnis:


Leider gibt es im WebSoziCMS in Kombination mit dem Firefox eine Fehldarstellung, deshalb muss man einen kleinen Umweg gehen, wenn man Twitter im WebSoziCMS als rechten Block einbauen will. Und der geht so:

  1. Code in eine leere Textdatei packen, bspw. so: http://dokumente.spd-bw.de/spdbw-twitter-embed.html
  2. Diese URL als iFrame einbauen, der Code dafür ist dieser:

<p><iframe align="left" frameborder="0" height="450" marginheight="0" marginwidth="0" scrolling="no" src="http://dokumente.spd-bw.de/spdbw-twitter-embed.html" width="310"></iframe></p>

Ergebnis:

Grafiken für „Sigmar Gabriel in Stuttgart“

Am 20. Mai kommt der SPD-Parteivorsitzende und Vizekanzler Sigmar Gabriel wegen der Europawahlen zu einer Kundgebung nach Stuttgart.

Wir haben dazu zwei Grafiken entwickelt, die auf Facebook und auf WebSoziCMS-Webseiten eingesetzt werden können.

Für das WebSoziCMS:

2014_newsbox_eu_kundgebung_sigmar_gabriel_stuttgart
890 x 162 px

Für Facebook:

2014_facebook_header_sigmar_gabriel_stuttgart
851 x 315 px

Ein Klick auf das Bild führt jeweils auf die große, genau passende Version.

Die Farben im Europawahlkampf

Im Europawahlkampf ändert sich das SPD-Erscheinungsbild etwas; hier die richtigen CSS-Codes, damit eure Webseiten auch ordentlich aussehen. Dank für die Hilfe dabei geht nach Schleswig-Holstein an Steffen Voß!

Primärfarbe und Hausfarbe:

primaerblau_005db4
Primärblau: #005db4		 hausfarbe_rot_e30018
SPD-rot: #e30018

Sekundärfarben:

lichtblau_81b1e5
Lichtblau: #81b1e5		 cyanblau_60bed4
Cyanblau: #60bed4		 azurblau_1ca5cc
Azurblau: #1ca5cc

Anmerkung: Ähnliche Farben sollen nicht nebeneinander verwendet werden.

Akzentfarben:

warmgelb_f09d2d
Warmgelb: #f09d2d		 dunkelrot_b1132f
Dunkelrot: #b1132f		 rotgelb_e86b1f
Rotgelb: #e86b1f

Service: Facebook-Header für den PES-Kongress am 1. März

An diesem Samstag ist der große PES-Kongress in Rom – dort wird Martin Schulz zum Spitzenkandidaten der europäischen Sozialdemokratie gewählt. Wenn Du auf dieses Event auf Facebook hinweisen willst, findest Du dazu hier einen geeigneten Header:

Facebook_Header_PES_Kongress_851_315
(Klick auf das Bild führt zur großen Version.)

Der Banner wurde vom WBH erstellt – danke dafür!

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!