• Hallo Steffen,

    ich versuche mein "kleines" Problem zu schildern. Ich arbeite an einem Projekt und nutze hierzu das Template "FlatResponsive". Hier ist unter "Einstellungen" "CSS" folgender Code vorgegeben

    <style>

    /* Slider, die als erstes Element auf der Seite benötigen andere Abstände und Schriftgrößen etc. */

    .topslider .zp13sliderWidget .zp13slider-caption{

    font-size: 1.2em;

    }

    .topslider .zp13sliderWidget .zp13slider-caption h1,

    .topslider .zp13sliderWidget .zp13slider-caption h2,

    .topslider .zp13sliderWidget .zp13slider-caption h3 {

    font-size: 3em;

    margin-bottom: .3em;

    }

    /*Änderung der Hintergrundfarbe des Footers.

    #footer ist der Container mit den Links und dem Copyright Text.

    #totop ist der Container mit dem ^ Zeichen, das einen an den Anfang der Seite bringt.

    color beschreibt die Schriftfarbe,

    background-color die Hintergrundfarbe

    */

    #search,

    #footer,

    #totop {

    color: #e7e7e7;

    background-color: #3e3d3d;

    }


    /*Änderung der Farbe des ^ Zeichens im Footer.

    #totop a ist das ^ Zeichen.

    #totop a:hover beschreibt den Zustand, wenn die Maus über dem Zeichen "schwebt"

    */

    #totop a {

    color: #e7e7e7;

    }

    #totop a:hover {

    color: #F39C12;

    }

    </style>

    Diese Einstellung bewirkt das der Footer Bereich auf allen Seiten die gleiche Farbe hat. In diesem Fall background-color: #3e3d3d

    Ich möchte nun auf einer Unterseite "Jobs" das der Footer Bereich eine andere Farbe hat.

    Hierzu habe ich den CSS Code insoweit abgeändert

    <style>

    /* Slider, die als erstes Element auf der Seite benötigen andere Abstände und Schriftgrößen etc. */

    .topslider .zp13sliderWidget .zp13slider-caption{

    font-size: 1.2em;

    }

    .topslider .zp13sliderWidget .zp13slider-caption h1,

    .topslider .zp13sliderWidget .zp13slider-caption h2,

    .topslider .zp13sliderWidget .zp13slider-caption h3 {

    font-size: 3em;

    margin-bottom: .3em;

    }

    /*Änderung der Hintergrundfarbe des Footers.

    #footer ist der Container mit den Links und dem Copyright Text.

    #totop ist der Container mit dem ^ Zeichen, das einen an den Anfang der Seite bringt.

    color beschreibt die Schriftfarbe,

    background-color die Hintergrundfarbe

    */

    #search,

    #footer,

    #totop {

    color: #e7e7e7;

    background-color: #3e3d3d;

    }


    /*Änderung der Farbe des ^ Zeichens im Footer.

    #totop a ist das ^ Zeichen.

    #totop a:hover beschreibt den Zustand, wenn die Maus über dem Zeichen "schwebt"

    */

    #totop a {

    color: #e7e7e7;

    }

    #totop a:hover {

    color: #F39C12;

    }

    /*Änderung der Hintergrundfarbe des Footers auf der Seite Jobs. */

    body.jobs #search,

    body.jobs #footer,

    body.jobs #totop {

    color: #e7e7e7;

    background-color: #F39C12; /* Hintergrundfarbe für die Jobs-Seite */

    }

    </style>

    Weiter habe ich auf der Seite "Jobs" einen HTML Quelltext Artikel mit dem Eintrag

    <body class="jobs">

    eingebunden.

    Na ja, leider nur Theorie. Die Footer Farbe auf der Seite Jobs wird nicht geändert.

    Wäre super würden Sie mir kurz erläutern woran es klemmt

    Danke vorab und Grüße

    AWS

  • Hallo aws,

    du kannst nicht einfach in einem Quelltext-Artikel einen <body>-Tag einfügen, denn sonst gibt es zwei (den von Zeta Producer und deinen). Das ist dann invalides HTML und verursacht evtl. weitere Probleme. Am Besten, du löscht diesen Quelltext-Artikel wieder und änderst dein CSS folgendermaßen:

    Code
    /*Änderung der Hintergrundfarbe des Footers auf der Seite Jobs. */
    html[data-pagename="Jobs"] #search,
    html[data-pagename="Jobs"] #footer,
    html[data-pagename="Jobs"] #totop {
        color: #e7e7e7;
        background-color: #F39C12; /* Hintergrundfarbe für die Jobs-Seite */
    }

    Wichtig ist dabei, dass Jobs der exakte Name der Seite ist, ansonsten funktioniert es nicht.

    Freundliche Grüße
    Philipp

    ---------------------------------------------------------------
    Widgets für Zeta Producer: widget-zp.de

  • PS: Mit der Lösung von Steffen T. gehen allerdings dann auf der Seite Jobs die anderen CSS-Anpassungen durch das Überschreiben des Attributs verloren.

    Freundliche Grüße
    Philipp

    ---------------------------------------------------------------
    Widgets für Zeta Producer: widget-zp.de

  • wow, wow, wow, was für eine superschnelle Antwort von Ihnen Steffen und von dir Philipp. Ich habe das Attribut auf der Seitenebene angepasst. Danke !

    Passt. Ich werde auch den Vorschlag von dir Philipp ausprobieren. Bin mega happy. Euch allen einen schönen Tag

    Beste Grüße

    AWS (Armin)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!