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

Das Layout einstellen:
Adminmenü > Einstellungen > Layoutauswahl

  • spdbw_2012
  • spdbw_2012_breit

Grafikgrößen:

Layout: spdbw_2012

  • Kopflogo: 110 px x 125 px
  • Kopfbanner: 770 px x 162 px
  • Blöcke rechts: 310 px breit
  • Inhaltsbereich Artikel und Seiten: 438 px breit (empfohlene Höhe: nicht mehr als 300 px)

Layout spdbw_2012_breit

  • Kopflogo: 110 px x 125 px
  • Kopfbanner: 890 px x 162 px
  • Blöcke rechts: 310 px breit
  • Inhaltsbereich Artikel und Seiten: 550 px breit (empfohlene Höhe: nicht mehr als 380 px)

Neu: die Newsbox

Es gibt eine neue Funktion bei diesem Layout, den „Newsbox-Slider“. Das heißt: Auf der Startseite können wechselnde Grafiken eingebaut werden, die auf eine bestimmte Seite verlinken. Diese Newsbox kann mehrere Einträge haben, die automatisch wechselnd angezeigt werden.

A. Newsbox einrichten (Adminmenü > Module > Newsbox bearbeiten)

Auf dieser Seite wird eine Newsbox angelegt. Man vergibt einen (nur im Admin sichtbaren) Namen bei „Bezeichnung“ und schaltet die Check-Box „aktiv“. Die Newsbox kann so aktiviert und deaktiviert werden. Es können mehrere Newsboxen angelegt werden. Aber nur eine kann aktiv sein.

B. Einträge für eine Newsbox anlegen (Adminmenü > Module > Newsbox anzeigen)

Auf dieser Seite sieht man alle Newsboxen, die man zuvor angelegt hat.

  • Bei Klick auf Namen: Namen der Newsbox ändern und de/aktivieren – siehe oben
  • Bei Klick auf „Einträge anzeigen“ kann man zweierlei:
    1. Neue Einträge für die betreffende Newsbox anlegen
    2. Diese angelegten Einträge bearbeiten oder löschen

Reihenfolge
Dort wird mit einer Zahl (1, 2, 3, etc.) angegeben, an welcher Stelle dieser Eintrag erscheint.

Bezeichnung
Name des Eintrags, der auch öffentlich erscheinen kann, wenn man die betreffende Checkbox dadrüber aktiviert.

Teaser
Text erscheint in der weißen Fläche. Unbedingt kurz fassen!

Außerdem den Link per HTML einfügen, also so:

<a href="LINK_ZUR_SEITE">Text-der-im-Teaser-erscheint</a>

Externer Link
Hier die URL (vollständig mit http://) der Seite eintragen, mit der dieser NewsBoxEintrag verlinkt sein soll.
ACHTUNG: Leider klappt das momentan nicht wirklich gut. Als rasche Abhilfe ist es sinnvoll, den Link per HTML-Anweisung auch im Teaser einzubauen. (Danke für den Hinweis an Matthias T.)

Bild
Hier die Grafik auswählen, die angezeigt werden soll.
Achtung: Ein Bildupload ist an dieser Stelle nicht möglich. Die Grafik muss zuvor hochgeladen werden. Und zwar an dieser Stelle:

Adminmenü > Nachrichten & Seiten > Bilder hochladen > Ein oder mehr Bilder hochladen – keine Änderung

Ein oder mehr Bilder hochladen - keine Änderung
Ein oder mehr Bilder hochladen – keine Änderung

Beim Hochladen darauf achten, die richtigen Größen zu verwenden:

  • spdbw_2012: 770 px x 162 px
  • spdbw_2012_breit: 946 px x 172 px (Da „890 px breit“ im WebSoziCMS derzeit nicht verfügbar ist, müssen wir uns mit diesem Workaround behelfen. Das Bild ist dann eigentlich etwas zu groß, wird dann aber im Browser runterskaliert. Nicht perfekt, funktioniert aber.)
Bilder / Mediendateien hochladen > 946 sehr breit (nur bei ensprechenden Layouts verwenden)
Bilder / Mediendateien hochladen > 946 sehr breit (nur bei ensprechenden Layouts verwenden)

Javascript für die Funktion „Verlinkter NewsBoxEintrag“

Das folgende Script muss hier eingefügt werden:

Adminmenü > Einstellungen > Metatags > Javascript / CSS: Hier können Javascript, CSS und weitere Tags im Seitenkopf eingegeben werden.

Javascript / CSS: Hier können Javascript, CSS und weitere Tags im Seitenkopf eingegeben werden.
Javascript / CSS: Hier können Javascript, CSS und weitere Tags im Seitenkopf eingegeben werden.

Speichern nicht vergessen!

<!-- skript slider newsbox start -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script><script type="text/javascript">// < ![CDATA[
jQuery.noConflict();
//jquery stuff
(function($) {
$(document).ready(function() {
$('#eintraege').children('.eintrag').each(
function(){
$(this).find('.mehr').remove();
theLink = $(this).find('.newsbox_text a').attr('href');
if(typeof theLink != 'undefined') {
$(this).find('.newsbox_rightside img').wrap('<a href="'+theLink+'" />');
}
});
});
})(jQuery);
// ]]></script>
<!-- skript slider newsbox ende -->

Veröffentlicht von

Christian Soeder

Freier Mitarbeiter Internet SPD Baden-Württemberg

2 Gedanken zu „Neues WebSoziCMS-Design anwenden / Newsbox-Slider einrichten“

  1. Klasse Design! Und ein tolles Feature mit dem Newsbox-Slider. Vielen Dank dafür!

    Eine Anmerkung/Frage: Das mit dem (externen) Link hat bei mir nicht gleich geklappt. Wenn dieser nur im entsprechenden Feld eingetragen war, war gar nichts verlinkt („undefined“). Zusätzlich wurden dort lange Links abgeschnitten. Ein kleiner Workaround: Erst durch eine Verlinkung im Teaser Feld Teaser Text verlinkte es dann einwandfrei in Text und Bild.

Kommentare sind geschlossen.