Text und Grafik-Container BBCode

Alle Themen in diesem Bereich (Kategorie) werden alphabetisch sortiert angezeigt!

Text und Grafik-Container BBCode

Beitragvon sladdi » So 9. Jun 2013, 12:46

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:
Bildname: Ashampoo_Snap_2013.06.09_11h42m55s_001_.jpg

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:&nbsp;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:
Bildname: Ashampoo_Snap_2013.06.09_11h42m55s_001_.jpg


Containergrafik - Beispiel:
Bildname: bbcodeboxblue.jpg<br />Kommentar: Beispielgrafik für das obige Demobild.<br />Größe: 500x360px
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:
Bildname: bbcodebox.jpg<br />Kommentar: Beispielgrafik für das obige Demobild.<br />Größe: 500x360px
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 :P
Moderatoren sind auch nur Menschen.... :roll:
Benutzeravatar
sladdi
Supporter
Beiträge: 903
Themen: 126
Registriert: 23.10.2012
Wohnort: Zell i.W.
Danke gegeben: 61
Danke bekommen:
74 mal in 65 Beiträgen
Vorname: Thomas
phpBB.de: sladdicool

Zurück zu Style BBCodes



Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast


x-Achse: 0
y-Achse: 0
cron