Burning Board 3.0 - Gesamte Seite umrahmen (so wie hier)

rellek

relativ sensationell
Teammitglied
Das Burning Board 3.0 legte die Werte neben Benutzerfreundlichkeit bekanntermaßen auch auf Design. Es sollte barrierefrei sein und dennoch ansprechend. Leider ist letzteres nicht ganz so glücklich verlaufen; ein Rahmen um die gesamte Seite, wie es bei vielen anderen Web-basierten Anwendungen üblich ist, würde Wunder helfen, fehlt aber leider.

In diesem kurzen Tutorial wollen wir diesen Missstand beseitigen.

Anfangen müssen wir hierbei bei den Templates. Diese finden sich in der Administrationsoberfläche unter der Kategorie "Darstellung". Zunächst müssen wir eine Templategruppe hinzufügen, denn die Software verweigert ein Bearbeiten der Standardtemplates. Wie diese heißen soll, ist egal, auch der Ordnername kann frei gewählt werden. Jedoch sollte es diesen Ordnernamen noch nicht im sonstigen Board geben. "modified-templates" wäre ein möglicher Kandidat.
Zurück zu den Templates - diese sind bei "Templates auflisten" zu finden. Hier brauchen wir zuerst einmal das Template "Header" und klicken auf "bearbeiten". Praktischerweise wird die Software uns bei diesem Schritt eine Kopie in ein anderes Templatepack automatisch anbieten.
Hier suchen wir die erste Zeile:
Code:
<div id="page">

und fügen davor folgendes ein:
Code:
<div id="rand">

Abspeichern und weiter geht's mit dem Template "Footer". Dort werden ganz am Ende eine Reihe von <div>s geschlossen. Ganz ans Ende ergänzen wir:
Code:
</div>

Nun müssen wir unseren Rand noch schick gestalten (Hintergrundfarbe, Rand etc.). Hierzu müssen wir in den Stileditor wechseln und den Stil auswählen, dem wir den Kasten verpassen möchten.
Zunächst einmal müssen wir der Software jedoch sagen, dass wir Templates aus unserer neu erstellten Templategruppe verwenden möchten. Das geht bei
Global -> Allgemein -> Templates -> Templategruppe
Hier einfach die eben erstellte Gruppe auswählen.

Weiter geht es nun im Stileditor bei
Erweitert -> Zusätzliche CSS-Definitionen
Hier muss ggf. der Haken für "Zusätzliche CSS-Deklarationen 1 verwenden" gesetzt werden, sofern er noch nicht vorhanden ist.
Als Code wird dann folgendes benötigt:
Code:
#rand {
...
}

Statt den Pünktchen kann jetzt der Kasten um jede Seite des Forums beliebig verziert werden. Elementare Eigenschaften, die darin vorkommen sollten, sind:
Code:
margin: auto;
width: XXX;
sowie noch background-color und border.
Das "margin: auto" sorgt dafür, dass der gesamte Kasten (samt Rest der Seite) wieder in der Mitte des Bildschirms angezeigt wird, sofern das denn gewünscht ist. "width: XXX;" sorgt für die Breite des Kastens. Diese sollte unbedingt größer gewählt werden, als bei
Global -> Allgemein -> Breite
festgelegt ist. Anbieten würden sich beispielsweise 10 oder mehr Pixel links und rechts, bzw. 2-5% mehr. "background-color" ist einfach ein Farbcode, der wie gewohnt mit Hexadezimalwerten angegeben wird, beispielsweise #ffffff für weiß. "border" ist die Definition des Rands. Eine einfache schwarze Linie lässt sich mit
Code:
border: #000000 1px solid;
realisieren.

Am Ende kann die Definition also wie folgt aussehen:
Code:
#rand {
margin: auto;
width: 980px;
background-color: #ffffff;
border: #000000 1px solid;
}
Das Ergebnis dieses Codes ist dann das gleiche, wie es hier im Forum zu sehen ist.
 

Gokux

O|²
Eine etwas einfachere Alternative für diesen Effekt, bringt die Verwendung der vorhandenen id "page" mit sich.

Füge dazu bei Erweitert -- Zusätzliche CSS-Definitionen den unten aufgeführten CSS Code ein (natürlich lassen sich alle Werte nach Belieben anpassen ;) ).

Code:
#page {
background-color: #eee;
padding: 10px;
margin-top: 20px;
margin-bottom: 20px;
border: #000 1px solid;
}
 

BlueIce

Neuer Benutzer
Die Anleitung hier ist mittlerweile 2 Jahre alt, kann es sein, dass das nach Gokux' Anleitung nicht mehr funktioniert? Habe das unverändert in die Erweiterten CSS-Definitionen einkopiert, das Forum geht aber immernoch über die ganze Seite. Habe auch die Stile aktualisiert. Habe es allerdings im 3.1er getestet, da ich keine andere Anleitung dafür fand.
 

rellek

relativ sensationell
Teammitglied
Im 3.1 ist das mit dem Rahmen sogar im Stileditor so vorgesehen.
Bei Global, Seite, Seitenrahmen (ganz unten) kannst du dich da austoben...
 
Oben