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:

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

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!

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

WebSoziCMS-Statistik: SPD Baden-Württemberg führt

Eine gute Nachricht vom Soziserver:

Wir stellen auf dem Soziserver für ca. 1000 Kunden die technische Plattform für Ihre Homepages zur Verfügung, vom Kleinst-Ortsverein, Stadtverbänden, Kreisverbänden, Unterbezirken, Bezirken bis hin zu immerhin 3 Landesverbänden, vom Dorfbürgermeister über Stadtverordnete, MdL, MdB hin zu MdEP. […] Dabei betreuen wir ca. 3200 Domains mit sozialdemokratischen Bezug. Das meistgenutzte System auf dem Soziserver ist natürlich das WebSoziCMS der Websozis, von denen es derzeit 3061 aktive Homepages gibt […]

Und, sehr schön: unsere SPD Baden-Württemberg führt, mit 923 WebSoziCMS-Instanzen. Wer noch nicht dabei ist, findet unter spd-bw.de die nötigen Infos.

Programmierertreffen der Websozis in Nord-Baden

Einige interessierte Entwicklerinnen und Entwickler treffen sich heute in Bretten bei Karlsruhe um dort Ideen, Wünsche und Vorstellungen für die nächste Version des Redaktionssystems „WebsoziCMS“ der Websozis zu sammeln. Hier unterhalten sich „der Vater“ des WebsoziCMS Harald Kampen, sowie der UNAONE-Chef Markus Hagge, der IT-Experte Craig Weiser aus Rheinland-Pfalz und Andreas Kesting aus Konstanz als „Websozi der ersten Stunde“, aber auch meine Wenigkeit, um über die Zukunft des Redaktionssystems zu entscheiden. Auch der Spaß kommt an diesem Wochenende nicht zu kurz wie zum Beispiel der Landesgeneralsekretär Jörg Tauss MdB mit Kuchen und freundlichen Worten zur Begrüßung seiner „Techies“ aufwartet.

Angesetzt ist zunächst ein Brainstorming um auf die zahlreichen Ideen und Wünsche der SPD-Webmaster aus ganz Deutschland eingehen zu können. Anschließend soll hieraus eine Art „Pflichtenheft“ entstehen, was für die künftige Programmmierung als Grundlage dienen soll.

Seit dem Umstieg Baden-Württembergs auf das WebsoziCMS als offizielles Angebot des Landesverbandes, durch das Engagement der PG-Internet, öffneten sich im Bereich der Öffentlichkeitsarbeit neue Möglichkeiten sowie Elan in den Arbeitsfluss. Baden-Württemberg stellt mit 711 Websozi-Seiten, das bundesweit größte Netzwerk. Durch Vernetzung und Web 2.0 hat sich aber auch hier einiges verändert. Ein Prozess des Umdenkens sorgt dafür dass nicht nur für den Wahlkampf immer mehr „gebloggt“ wird oder YouTube-Videos wie selbstverständlich auf den Seiten der Gliederungen auftauchen.

Eines ist klar, die Entwickler werden die nächsten Jahre vor einer großen Herausforderung stehen den neuen Ansprüchen im Internet, gerade auch durch Entwicklungen wie Web 2.0, gerecht zu werden. Das WebsoziCMS entgegnet dieser Herausforderung bislang immer noch tapfer, aber Ziel ist es auch die Grenzen des möglichen weiter zu belasten.