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

Dieses Thema im Forum "Tutorials" wurde erstellt von rellek, 30 März 2008.

  1. rellek

    rellek relativ sensationell Mitarbeiter

    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.
     
  2. Gokux

    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;
    }
     
  3. BlueIce

    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.
     
  4. rellek

    rellek relativ sensationell Mitarbeiter

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

Diese Seite empfehlen

  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deinem Erleben anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden