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: 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