Sticker erstellen und aktivieren

Screenshot: Beispiel Sticker

Wie baue ich ein Sticker in die Website ein?

Als Sticker werden die Buttons bezeichnet, die im Kopfteil der Website, rechts oberhalb des Menüs, angezeigt werden können. Üblicherweise sind die beiden Sticker „Werde Pirat!“ und „Hilf uns mit einer Spende“ aktiv.

Screenshot: Übliche Sticker

1. Schritt: Grafischen Sticker erstellen

(Vorweg: Es geht auch ohne Grafiken; Siehe dazu weiter unten.)

Zur Erstellung der Sticker wird ein Grafikbearbeitungsprogramm benötigt. Beispielsweise das kommerzielle Photoshop oder die kostengünstige Alternative Photoline. Aber auch jedes andere Grafikprogramm tut es. Wir machen nichts kompliziertes, keine Angst.

Weiterhin benötigen wir die Schrift Bebas Neue. Diese sollte bereits auf dem Computer installiert sein. Das Grafikprogramm sollte diese Schrift benutzen können.

Zunächst wird ein transparenter Hintergrund erstellt. Die Größe sollte  110 x 80 Pixel nicht überschreiten.

Auf diesem Hintergrund wird der Text mit der Bebas-Schrift gesetzt. Als Textfarbe kann in RGB #6a6a6a für graue Schrift und #ff8800 für die orangene Schrift verwendet werden.  Andere Farben sind auch möglich, man sollte sich jedoch möglichst an die Farbspektren halten.

Die Schrift wird um 5 Grad nach links gedreht. In Photoline verwende ich eine Schriftgröße um die 32 bis 36 Pixel. Bei einer hervorgehobenen orangenen Schrift erhöhe ich  ggf. auf 38 Pixel. Das erste Zeichen kann je nach Zweck des Sticker nochmal vergrößert werden. Abhängig von dem Text und der Optik, kann ich noch ein Schattenwurf ergänzen. Der Sticker wird als PNG-Datei gespeichert.

Sticker können für jeden Zweck angelegt werden. Für Spendenaufrufe, für besondere Termine und Hinweise etc. Wichtig ist nur, dass man es nicht übertreiben sollte: Zu viele wechselnde Sticker irritieren den Besucher. Daher sollte man auch hier nur selten und bei besonderen Fällen Änderungen vornehmen. Auch wenn es Spaß macht.

 

2. Sticker hochladen und aktivieren

Der Sticker wird im Backend zunächst über die Mediathek hochgeladen.Dabei kopiert oder merkt man sich die Datei-URL.

Als nächstes wird die Optik „Takelage einstellen“ aufgerufen (unter Design). Hier kann man unter den Eingabefelder Sticker 1 bis Sticker 3 Sticker definieren. Bei der Vorinstallation sind bereits zwei Sticker vordefiniert. Diese kann man ebenfalls austauschen. Die Art der Sticker steht jedem frei. Es können jedoch nur maximal 3 Sticker angezeigt werden. Sind die Sticker auch noch sehr breit, könnten es auch nur zwei sein.

Bei dem Feld Content kann man den HTML-Code für den Sticker eingeben. Dies kann ein reiner Text sein, aber eben auch die Grafik. (Wenn man keine Grafik eingibt und nur Text, hat man auf modernen Browsern denselben Effekt mit der Drehung und auch eine Bebas-Schrift. Leider ist dies nur bei ganz modernen Browser optisch hinreichend gut. Deswegen ist zur Zeit der Umweg über ein echtes Bild besser.)

Screenshot: Sticker konfigurieren

Der Content sieht in diesem Fall so aus:

<img src="http://www.piratenkleider.de/files/2012/05/faq-kandidaten-grillen.png" alt="Kandidaten grillen"  width="142" height="97">

Bitte hierbei nicht das ALT-Attribut vergessen! Und als URL gebe ich z.B. ein:

http://wiki.piratenpartei.de/Bundesparteitag_2012.1/Kandidatur

Am Ende speichere ich das ganze noch. Danach ist der Sticker auf der Website zu sehen.

Screenshot: Beispiel Sticker

 

3. Text-Sticker erstellen

Nicht jeder hat ein Grafikbearbeitungsprogramm oder kann damit umgehen. Deswegen ist es auch möglich, einen Text als Sticker einzutragen.

In dem Eingabefeld „Content“ kann auch normaler Text eingefügt werden; Es muss kein <img>-Tag sein.
Eine normale Eingabe kann so aussehen:

Echter Text<br>ohne<br><span class="cicolor">Drehung!</span>

Dies erzeugt einen Sticker mit einem Text, der normal horizontal ausgerichtet ist. Dort wo in der Eingabe die HTML-Tags <br> gesetzt sind, erfolgt ein Umbruch. Der orangene Text wird durch den HTML-Tag <span class=“cicolor“> … </span> erzeugt, sofern das deutsche Farbsetting aktiv ist.

Die allgemeingültige Klasse cicolor ist dafür vorgesehen, dass automatisch immer die Farbe gewählt wird, deren Grunddesign gerade eingestellt wird.

Farbklassen

Das Grunddesign wird in Zukunft konfigurierbar sein. Per default ist das orangene Setting aus Deutschland vordefiniert. Neben der Klasse cicolor können die Farben des Textes auch direkt angesteuert werden um Farbcodes andere Länder zu berücksichtigen:

  • <span class=“orange“>  Orangener Text  </span> (Deutsches Farbsetting)
  • <span class=“violet“> Violetter Text  </span> (Luxemburger Farbsetting)
  • <span class=“cyan“> Cyanfarbener Text </span>(Türkisches Farbsetting)

Andere Ländercodes können folgen.

Weitere Klassen

Wenn dieser Textsticker zusätzlich um 5 Grad nach links geneigt werden soll, muss eine weitere HTML-Anweisung ergänzt werden:

<span class="gedreht">Text<br><span class="cicolor">Sticker</span></span>

Dieses <span class=“gedreht“> drumherum sorgt für die Drehung.

Da leider die Bebas-Schrift von einigen Browser bei einer Drehung etwas unscharf und gepixelt erscheint, musste jedoch ein Schattenwurf ergänzt werden. Deswegen erscheint der gedreht Text etwas dunkler und hebt sich mehr vom Hintergrund ab.

Eine weitere Klasse ist „animate“. Diese Klasse sorgt dafür, daß bei einem Hover/Focus-Effekt die Schrift sich etwas dreht und sich vergrößert.

Möchte man nicht gedrehten Text ebenfalls mit einem Schattenwurf versehen, ergänzt man die Klasse „shadow“.