5202: Rahmenlinie um Blog bauen

24.9.12

Rahmenlinie um Blog bauen

Ihr kennt das bestimmt von vielen stylischen Wordpress Layouts, dass die oben und unten kleine Begrenzungslinien haben, die den Inhalt sozusagen zusammenklammern - könnt ihr euch nichts darunter vorstellen, schaut euch mal meine Skizze an:

View Demo »»

Wie wird's gemacht?

So eine Begrenzungslinie könnt ihr entweder üblich & klassisch mit <div> Containern bauen - oder ihr macht das einfach & elegant, indem ihr dem <body> Tag eine Rahmenlinie über die Pseudoelemente before und after gebt.

Letzteres würde ich bei blogspot.com immer empfehlen - baut besser nicht im Div-Brei der normalen Layouts rum, das endet nur im Chaos :=(. Mit CSS dagegen kann [eigentlich] nichts schief gehen, probiert das trotzdem zuerst in einem Test-Blog aus.

CSS

Vorlagen Designer > Eigene CSS


body:before {
    background: none repeat scroll 0 0 #5B0E0E;
    top 0 !important;
    content: "";
    height: 15px;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 10;
}
body:after {
    background: none repeat scroll 0 0 #5B0E0E;
    bottom: 0 !important;
    content: "";
    height: 15px;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 10;
}

Angewendet wird die CSS, indem ihr hinter der letzten geschweiften Klammer } die Taste 'Eingabe' drückt - falls alles passt, könnt ihr mit 'Auf Blog anwenden' sichern.

Anpassen

Die CSS ist einfach zu verstehen. Ihr könnt die Farbe über die Eigenschaft background anpassen, die Höhe des Elements über height und das war's eigentlich schon ... mehr als eine schmale Rahmenlinie soll's aber auch nicht sein.

Falls ihr Probleme mit der bloggereigenen Lightbox bekommt, dann setzt den z-Index auf '10' herunter, dann liegen die Linien unter der Lightbox.

Anmerkungen, Fragen

Das ist jetzt nur eine kleine Idee zur Nacht - wenn's Fragen dazu gibt, immer her damit!