Hallo, Besucher der Thread wurde 848 aufgerufen und enthält 0 Antworten

letzter Beitrag von Belarus am

[CSS] Trennlinien neben Überschriften

Aktiviere jetzt die 2-Faktor-Authentisierung für deinen Account und erhalte die Trophäe Auf der sicheren Seite.

    Hallo,

    viele kennen es oder haben bereits Trennlinien links- und rechtsbündig neben einer Überschrift gesehen oder möchten ein solches auch verwenden. Dazu hier im folgenden ein Beispiel.


    Features

    • Einfach einzubinden
    • Leicht per CSS anpassbar







    Quellcode

    Der Quellcode unterscheidet sich darin ob Du eine "eigene html Seite" oder einer "Template Seite" erstellt hast.


    Quellcode für eigene html-Seiten:

    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.
    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.


    Quellcode für Template Seiten:

    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.

    Benutzung

    1. Bei eigenen html-Seiten:
      In der Zeile background-image: linear-gradient(to right, #BA0000 100%, transparent 50%); den Farbcode nach belieben anpassen
    2. Bei Template Seiten:
      Mittels data-box-identifier="com.woltlab.wcf.genericBoxXXX"> und dem H2-Tag [tt]class="boxTitle" die Überschrift direkt ansprechen (siehe Quellcode) und entsprechend mittels Entwicklerkonsole Deines Browsers die Nummer der genericBox ausfindig machen, im Quellcode ändern und den Style nach Deinen belieben anpassen.

    Viel Spaß damit ;)


    Gruss,
    Andreas

    • Gäste Informationen
    Hallo,gefällt dir der Thread, willst du was dazu schreiben,
    dann melde dich bitte an.
    Hast du noch kein Benutzerkonto, dann bitte registriere dich, nach der Freischaltung kannst du
    das Forum uneingeschränkt nutzen.

  • Belarus

    Hat den Titel des Themas von „Trennlinien neben Überschriften“ zu „[CSS] Trennlinien neben Überschriften“ geändert.

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!