Info-Boxen über die Iconbar ermöglichen

<div style='background: #d6d6d6; border: 1px solid #333333; padding: 20px;'>
...
</div>
 
 

Demo:




2. Mit Farbverlauf

<div style='background: -moz-linear-gradient(top, #d6d6d6, #FFF); background: -webkit-linear-gradient(top, #d6d6d6, #fff); background: -ms-linear-gradient(top, #d6d6d6, #fff); background: -o-linear-gradient(top, #d6d6d6, #fff); box-shadow: 1px 2px 4px #222222; padding: 20px;'>
...
</div>
 
 

Demo:




3. Abgerundet

<div style='background-color: #ffffdf; border: 1px solid #d8d48e; border-radius: 5px ; padding: 20px;'>
...
</div>
 

Demo:




4. Signalfarbe

<div style='background-color: #44ff44; border: 5px solid #00c800; border-radius: 10px ; box-shadow: 0px 0px 20px #44ff44; padding: 20px;'>
...
</div>
 
 

Demo:



Wie Ihr seht könnt Ihr mit ein bisschen CSS eure Info-Boxen beliebig anpassen.

Allerdings haben die CSS Angaben im Div-Tag einen großen Nachteil: Änderungen im Boxen-Layout werden bei bereits geposteten Boxen nicht automatisch übernommen. Ärgerlich wenn man das Layout der Boxen an das Forum-Design angepasst hat und man beschließt das Forum-Design zu ändern. Um das zu vermeiden könnt Ihr mit „class“ arbeiten, anhand eines Beispiels zeigen wir euch wie das funktioniert.

Statt CSS Angaben solltet Ihr im Forum-Code ein Class-Tag angeben, das könnte z.B. so aussehen:

<div class='box1'>
...
</div>
 

Im Adminbereich unter „Layout“ > „Farben & Einstellungen“ > „CSS“ könnt Ihr eure class gestalten, das Design für die Basic-Box würde z.B. so aussehen:

.box1 {
background: #d6d6d6;
border: 1px solid #333333;
padding: 20px;
}