Text und Grafik-Container BBCode

[sladdi]

Name: Text und Grafik-Container
Autor: Sladdi
Quelle: http://www.web-toolbox.net
phpBB Version: 3.0.11
Beschreibung: Per CSS formatierte Textboxen.
Einsatz: Vorstellungen, Sammlungen - überall da wo Text und Bild immer gleich erscheinen sollen.
Möglichkeiten: Feste Textvorgaben, aber auch Text & Grafikeingabe durch User möglich. BBCode-Verschachtelungen ebenfalls möglich.
Benötigt: Vorgefertigte Containergrafik
Demobild:

Demo: www.sladdistestforum.malerfreunde.com

Öffne: styles/Dein Style/theme
Beachte!
Alle Maße, Positionsangaben, Farben, Schriftarten usw. abhängig vom Einsatzbereich und der Containergrafik!
Erstelle NEUE Datei: bbcodebox.css
Mit folgendem Inhalt:

Code: Alles auswählen

.Box1 {
position: relative;
top: 0px;
left: 0px;
height:360px;
width: 500px;
border:1px solid #000000;
background:url(/images/icons/misc/bbcodeboxblue.jpg);
font-family: Arial,Helvetica,sans-serif;
}

.Box1 .Grafik {
position: absolute;
top: 55px;
left: 400px;
}

.Box1 .Titel {
position: absolute;
top: 12px;
left: 10px;
font-size:16px;
color: #FFFFFF;
font-weight:bold;
text-align: left;
}

.Box1 .Text1 {
position: absolute;
top: 60px;
left: 20px;
text-align: left;
width: 320px;
height:120px;
font-size: 12px;
color: #000000;
}

.Box1 .Text2 {
position: absolute;
top: 215px;
left: 20px;
text-align: left;
width: 460px;
height:70px;
overflow: hidden;
font-size: 12px;
color: #000000;
}

Weiter geht's mit dem erstellen des BBCode:

BBCode:  

Code: Alles auswählen

[bbcodebox]{INTTEXT}, {TEXT}, {INTTEXT3}[/bbcodebox] 

HTML:  

Code: Alles auswählen

<!-- Anfang Box 1 -->
<link rel="stylesheet" type="text/css" href="{T_THEME_PATH}bbcodebox.css">
<div class='Box1'>
<div class='Grafik'><img src="/images/icons/misc/deine Grafik.png" width="70" height="80" border="0" alt=""><br></div>
<div class='Titel'>{INTTEXT}</div>
<div class='Text1'>
<strong>Name:</strong>&nbsp;{INTTEXT} <br>
<strong>Autor:</strong>&nbsp;Sladdi<br>
<strong>phpBB Version:</strong>&nbsp;3.0.11<br>
<strong>Browser Version:</strong>&nbsp;getestet mit aktuellem FF und IE 10<br>
<strong>Eingabe:</strong>&nbsp;&nbsp;{TEXT}<br>
</div>
<br><br>
<div class='Text2'>
<strong>Beschreibung:</strong><br><br>
{INTTEXT3} <br>
</div>
</div> 

Beachte:
Die festen Angaben wie....:
Name:
Autor: Sladdi
phpBB Version: 3.0.11
Browser Version: getestet mit aktuellem FF und IE 10
Eingabe:
Beschreibung:

sowie Anzahl und Position der Textvariablen {INTTEXT}, {TEXT}, {INTTEXT3}
...... dienen hier als Beispiel und sind je nach Einsatzzweck anzupassen!

Hier noch mal das Demobild:


Containergrafik - Beispiel:

Beispielgrafik für das obige Demobild. Größe: 500x360px

Soll der Text und Grafik-Container BBCode in mehreren, andersfarbigen Styles eingesetzt werden, muss für jeden Style eine eigene Containergrafik erstellt werden!

Containergrafik - Beispiel:

Beispielgrafik für das obige Demobild. Größe: 500x360px

Beachte:
Benennst du deine Containergrafik anders, musst du auch die Zeile background:url(/images/icons/misc/bbcodeboxblue.jpg); in der bbcodebox.css angepasst werden!

LG
Sladdi