Wie man eine Vorschaltseite im WebsoziCMS anlegt

Die SPD im Kreis Reutlingen wollte eine Vorschaltseite für den Bundestagswahlkampf, um auf ihre Kandidatin Rebecca Hummel zu verweisen. Das ist natürlich gar kein Problem. Jetzt sieht es so aus, wenn man spd-kreis-reutlingen.de aufruft:

Vorschaltseite SPD Kreis Reutlingen

Wie bekommt man das hin? Es ist einigermaßen einfach – wenn man weiß, wie es geht.

  1. Zuerst musst Du die Grafiken erstellen, die Du verwenden willst. Also ein Banner auf DeineN KandidatIn und ein Banner auf die eigentliche Seite.
  2. Gehe jetzt auf diese Seite: http://www.HIER-DEINE-DOMAIN-EINFUEGEN.de/index.php?mod=layout&op=vorschaltseite
  3. Und dann fügst Du untenstehenden HTML-Code ein.

Fertig. Hat alles geklappt? Fragen? Gerne. An: internet@spd-bw.de – oder hier in den Kommentaren.

<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<title>Am 22. September SPD w&auml;hlen!</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="robots" content="index,follow" />
<style type="text/css">
body { background-color:#E0E0E0; font-weight:bold; font-family:Arial; font-size:120%; }
p { text-align: center }
</style>
</head>
<body>
<p>
<a href="http://www.HIER-DIE-DOMAIN-DEINER-KANDIDATIN.de/"><img src="http://HIER-DER-GENAUE-PFAD-ZUM-BILD.JPG" /></a>
</p>
<p>
<a href="http://www.HIER-DIE-DOMAIN-DEINER-WEBSOZICMS-WEBSEITE.DE/index.php"><img src="http://HIER-DER-GENAUE-PFAD-ZUM-ZWEITEN-BILD.JPG" /></a>
</p>
<p>
<object width="800" height="450"><param name="movie" value="//www.youtube.com/v/hBk0YQK_WDU?hl=de_DE&amp;version=3&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/hBk0YQK_WDU?hl=de_DE&amp;version=3&amp;rel=0" type="application/x-shockwave-flash" width="800" height="450" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</p>
</body>
</html>

PS: Natürlich kann man die Vorschaltseite noch viel schöner und toller machen; wenn ihr gute Ideen habt – gerne in den Kommentaren.

Zurück in die Steinzeit?! Demo von SPD und Jusos gegen das Betreuungsgeld.

„Jetzt beginnt die Vergangenheit. Danke Schwarz-Gelb!“ Unter diesem Motto protestierten Jusos und SPD vor dem Bundeskanzleramt gegen das Betreuungsgeld. „Das Betreuungsgeld ist ein Flop. Es geht vollkommen an den Bedürfnissen der Familien vorbei. Die SPD will Kitas und nicht das sogenannte Betreuungsgeld“, sagte Andrea Nahles.

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!