Hallo, Besucher der Thread wurde 1,3k aufgerufen und enthält 5 Antworten

letzter Beitrag von Belarus am

[CSS] Unterschiedliche Header Backgrounds pro Seite

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

    Hallo,

    viele kennen es und viele mögen es. Ein Hintergrundbild im Header (HeaderBG). Doch nicht alle wollen auf allen Seiten ein und das gleiche Hintergrundbild nutzen, sondern wünschen sich z.B. beim Forum ein anderes als wie in der Galerie, der Filebase oder anderen Seiten. Entsprechend dem hier nun eine Möglichkeit, wie Ihr auf diversen Seiten (auch eigene) individuelle Hintergrundbilder einbinden könnt.

    Features

    • Leichte Integration
    • Einfaches anpassen an Deinen Style
    • Wäre auch mit Video-Backgrounds umsetzbar






    Demo


    Eine Demo kann auf Belarusinfo.de betrachtet werden.

    Quellcode


    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. Quellcode wie o.a. im "Stilunabhängigen CSS / SCSS" oder aber im Stil unter "Erweiterte Einstellungen" einfügen und anpassen
      1.1 [data-page-id="XX"] oder [data-page-identifier="XX"] oder [data-application="XX"] XX mit Deiner ID ersetzen.
      1.2 background: url(../DEIN/PFAD/ZUM/BILD); Bildpfad anpassen
      1.3 height: 330px; die Höhe an Deinen Bild(ern) anpassen
    2. Auf Wunsch eigene CSS-Anpassungen (Rahmen, etc.) vornehmen
    3. Beliebig oft für all Deine gewünschten Seiten wiederholen.

    Wer noch ein Text über den Bild haben möchte, dem wird dies im folgenden Beitrag erklärt.

    Hinweis

    Bitte beachtet, dass dies mit der Woltlab Suite 3.1 getestet wurde. Dennoch gehe ich davon aus, dass dies auch in aktuelleren Versionen der Suite funktionieren wird. Auf den zu sehenden Screenshots wurden jedoch noch keine Bild-Optimierungen vorgenommen, da diese nur zur Demonstration dienen. Getestet wurde dieses mit angepassten Stil Magazin, welches aber auch mit jedem anderen möglich sein sollte.

    Lizenz

    Copyleft oder mit anderen Worten, macht damit was Ihr wollt ;)

    Screenshot




    Viel Spaß damit ;)

    Gruss,
    Andreas

  • Belarus

    Hat den Titel des Themas von „Unterschiedliche HeaderBG“ zu „Unterschiedliche Header Backgrounds pro Seite“ geändert.

    Ein kleines Update:


    Wem die unterschiedlichen Header Backgrounds auf diversen Seiten allein nicht reichen und zusätzlich noch ein Text darüber haben möchte, so ist dies ebenfalls recht einfach umsetzbar. Dazu im folgenden noch einmal der vorherige Code mit Anpassung für einen Text über den Bild ;)

    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. Quellcode wie o.a. im "Stilunabhängigen CSS / SCSS" oder aber im Stil unter "Erweiterte Einstellungen" einfügen und anpassen
      1.1 Bei [data-page-id="XX"] das XX mit Deiner Page-ID ersetzen
      1.2 Bei background: url(../DEIN/PFAD/ZUM/BILD); den Bildpfad anpassen
      1.3 Bei height: 330px; die Höhe an Deinen Bild(ern) anpassen
      1.4 Bei content: "DEIN_TEXT_ÜBER_DEN_BILD"; Dein gewünschten Text eintragen
    2. Auf Wunsch eigene CSS-Anpassungen (z.B. Schriftart-/größe/schatten, Position, etc.) vornehmen
    3. Beliebig oft für all Deine gewünschten Seiten wiederholen.

    Screenshot


    Viel Spaß damit ;)

    Gruss,
    Andreas

    Wo findet man die Page-ID ?

    • 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.

    Dieses Thema enthält 3 weitere Beiträge, die nur für registrierte Benutzer sichtbar sind, bitte registriere dich oder melde dich an um diese lesen zu können.
  • Dieses Thema enthält 3 weitere Beiträge, die nur für registrierte Benutzer sichtbar sind, bitte registriere dich oder melde dich an um diese lesen zu können.

Jetzt mitmachen!

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