Re: [Sg-webseite] Doku / Logbuch: Hinweisboxen in Artikeln und Seiten

[Der Moonopool <the.moonopool AT googlemail.com>]

Muhaha.
Das ist geil. Aber sowas von.

So kriegen wir die Reihen zusammen und können immer einen Mini-Aufmacher zur Reihe als Anker benutzen!

Jetzt nur noch die Zusammenfassungsseiten... ;)

Lieben Gruß,
Dirk
@moonopool

Am 20. Dezember 2013 14:13 schrieb Wolfgang Wiese <pirat AT xwolf.de>:

Hallo,


für Dirks Serienbeitrag hab ich auf die schnelle im Style Hinweisboxen definiert.


Diese können damit nun auch bei vielen anderen Dingen verwendet werden. Sie sind besser als der bisherige Verhau über "subnav".


tl;dr:
Nutzung von Hinweisboxen in Artikeln und Seiten

Der Text der in einer Hinweisbox erscheinen soll, wird im "Text"-Editor mit einem <div> umrandet:

<div class="hinweis">
...
</div>


Hierbei gibt es mehrere Modifikationen durch weitere CSS-Klassen:

info:     Grauer Hintergrund
success:  Grüner Hintergrund
warning:  Halbgelber Hintergrund
error:    Beigeroter Hintergrund


Anwendungsbeispiel:
<div class="hinweis info"> .. </div>



Weiterhin kann man die Box links, rechts oder mittig ausrichten:

Dazu gibt es die Klassen:
float-right:  Box ist rechts
float-left:   Box ist links
center:       Box ist mittig.


Wenn man das macht, ist das aber nur sinnvoll zusammen mit einer
Begrenzung der Breite der Box. Dazu gibt es folgende Breitendefinitionen:

p33:   33% Breite
p40:   40% Breite
p50:   50% Breite
p60:   60% Breite
p66:   66% Breite



Anwendungsbeispiel:
<div class="hinweis info float-right p40"> .. </div>

Wie das aussieht, sieht man hier:
http://www.piratenpartei.de/2013/12/20/piraten-stellen-sich-queer-koalitionsvertrag-ist-eine-luftnummer/


Falls man, wie in dem Beispielartikel einen Hinweistext macht der bei mehreren
Artikeln der gleiche sein soll, sollte der Text der in der Box erscheinen
soll NICHT im ersten Absatz des Artikels sein!
Grund: Der erste Absatz, bzw. der Text wird bei Teaser oder Previews
als Anreissertext verwendet. Wenn das dann immer derselbe ist... blöd.

Daher sowas am Besten im zweiten Absatz und dann ggf. mit einem
<div class="hinweis info float-right p40"> .. </div>

Ciao,
 Wolfgang


--
Sg-webseite mailing list
Sg-webseite@lists.piratenpartei.de
https://service.piratenpartei.de/listinfo/sg-webseite