HpBk-TemplateWorld

Trennlinie anpassen

Trennlinie individuell anpassen

Einleitung

Wer kennt sie nicht? Die Trennlinie auf der eigenen Homepage. Eine Trennlinie dient dazu, bestimmte Abschnitte von einem anderen optisch zu unterbrechen. Wenn ihr eine Seite auf eurer Homepage kommentierbar gemacht habt, seht ihr ebenfalls eine Trennlinie sowohl zwischen den Kommentaren, als auch über dem Kommentar absenden Feld. Ich zeige euch, wie ihr mit wenigen Tricks eure Trennlinie individuell gestalten könnt.

Schwierigkeitsstufe: Anfänger

Als allererstes begeben wir uns in den Editor unter "Eigene Seiten editieren" und legen nun eine neue Seite an oder ihr editiert einfach eine bereits vorhandene Seite. Im Editor gibt es nun die Möglichkeit, eine eigene Trennlinie einzufügen. Dies passiert, wenn ihr das rot eingekreiste Symbol anklickt.

Nachdem ihr dieses Symbol angeklickt habt, erhaltet ihr eine Trennlinie, die ganz genau so aussieht.

Es ist zwar ein kleines, aber dennoch feines Merkmal für eure Homepage, die Seite weiter zu verschönern. Um jetzt diese Trennlinie zu verändern, fügt ihr folgenden CSS-Code unter "Design" - "Erweiterte Designeinstellungen" im Feld "Text über dem Design" ein.

<style type="text/css">
<!--
hr {
    border:none;
    border-top:1px solid #CCCCCC;
     background-color: #transparent;
    height:1px;
    margin-bottom:7px;
    margin-left:0px;
    margin-right:0px;
    }
-->
</style>

Die Zahlenwerte könnt ihr natürlich individuell anpassen, wie es euch am besten gefällt. Wenn ihr diesen Code so übernehmt, sehen alle Trennlinien so aus, wie auf HpBk-TemplateWorld.

Jetzt kann diese Trennlinie noch viele weitere Eigenschaften bekommen. Zum Beispiel eine andere Farbe, sagen wir einmal Schwarz. Der Code für die Farbe Schwarz ist #000000. Diesen Code fügen wir einfach an Stelle von Grau #CCCCC; ein. Dann sieht unsere Linie so aus:

Um die Trennlinie noch dicker darzustellen, verändern wir einfach den Wert bei border-top:1px solid #000000; in 5px. Dann sieht diese Linie so aus:

Wie ihr seht, gibt es sehr viele Möglichkeiten, eure Trennlinie anzupassen. Probiert es einfach einmal aus!

Legende zum CSS-Code:
border: Bestimmt die Höhe und somit die Dicke der Trennlinie; zudem wird hier auch die Farbe des Rahmens bestimmt.

margin: Die Werte bei "margin" bestimmen den Abstand von der Trennlinie zum Beispiel zu eurem Text.

background-color: Hier könnt ihr eine Farbe für den Hintergrund der Trennlinie eintragen. Nicht zu verwechseln mit der Rahmen-Farbe!

Kommentare zu dieser Seite:

Kommentar von blup( ), 21.05.2012 um 19:45 (UTC):
hammer smileys!