Reihen auf Startseite einfärben bei Protostar

  • Hallo,


    ich möchte auf meiner Startseite die Reihen im Content-Bereich einfärben. Die Reihen werden in Protostar mit

    Code
    <div class="items-row cols-3 row-0 row-fluid">

    angesprochen. Dabei wird je Reihe die Ziffer hinter
    row verändert, also row-1, row-2 usw. In der template.css sind allerdings nur .row-fluid::before, .row-fluid::after definiert.


    Ich wollte die Hintergrundfarbe der Reihen ändern und fügte in die template.css folgendes ein.


    Code
    /*reihen einfärben*/.items-row cols-3 row-0 row-fluid {background-color:#87CEFA;}.items-row cols-3 row-0 row-fluid {background-color:#DCDCDC;}


    Die Anzeige änderte sich nicht, auch nicht nach


    Code
    /*reihen einfärben*/
    .items-row cols-3 row-0 .row-fluid {
    background-color:#87CEFA;
    }
    
    
    .items-row cols-3 row-0 .row-fluid {
    background-color:#DCDCDC;
    }


    Wie kann ich die Reihen ansprechen? Ist es möglich, auch die Änderung auf der Startseite
    vornehmen?


    Gruß Dietmar

  • Ich habe jetzt ein plugin installiert, dass dafür sorgt, dass die custom.css als letzte aufgerufen wird
    und in die custom.css eingefügt:

    Code
    /*Reihen einfärben*/
    .items-row cols-3 row-0 row-fluid, .items-row cols-3 row-2 row-fluid, .items-row cols-3 row-4 row-fluid {background-color:#87CEFA;}
    .items-row cols-3 row-1 row-fluid, .items-row cols-3 row-3 row-fluid {background-color:#DCDCDC;}


    Die Hintergrundfarbe der Reihen ändert sich aber nicht.

  • Versuche es mal mit Punkten statt Leerzeichen:


    Code
    .items-row.cols-3.row-0.row-fluid, 
    .items-row.cols-3.row-2.row-fluid, 
    .items-row.cols-3.row-4.row-fluid {
    background-color:#87CEFA;
    }
    .items-row.cols-3.row-1.row-fluid, 
    .items-row.cols-3.row-3.row-fluid {
    background-color:#DCDCDC;
    }


    Wenn das auch nicht hilft, dann solltest du uns einen Link zur Seite geben, sonst müssen wir weiter raten ;).


    PS:
    Ein Plugin wäre nicht nötig gewesen. Das hättest du auch direkt in die index.php des Templates einfügen können.

  • Hallo Anka,


    danke für den Hinweis. Ich habe an die Möglichkeit nicht gedacht, aber jetzt erledigt. Allerdings war die Vorgabe in index.php von Protostar css/user.css. Ich habe sie deshalb umbenannt. Irgendwo habe ich gelesen, dass es zwei css-Dateien geben soll: user.css und custom.css, eine soll die Änderungen fürs Backend und die andere fürs Frontend beinhalten. Was richtig ist, weiß ich leider nicht.


    Dein Tip mit Punkten statt Leerzeichen hat funktioniert. Ich habe noch eine Ergänzung für die oberste Zeile vorgenommen.

    Code
    .items-row.cols-3.row-0.row-fluid,
    .items-row.cols-3.row-2.row-fluid,
    .items-row.cols-3.row-4.row-fluid {
    background-color:#F0FFFF;
    }
    .leading-0.clearfix,
    .items-row.cols-3.row-1.row-fluid,
    .items-row.cols-3.row-3.row-fluid {
    background-color:#F5F5F5;
    }


    Vielen Dank für Deine Hilfe. HIer ist noch der Link http://www.kolping-hohenfels.de/


    Gruß Dietmar

  • Irgendwo habe ich gelesen, dass es zwei css-Dateien geben soll: user.css und custom.css, eine soll die Änderungen fürs Backend und die andere fürs Frontend beinhalten.


    Nein, mit Backend und Frontend hat das nichts zu tun. Das Protostar ist ein Frontendtemplate.


    Gucke mal hier bezüglich der user.css:
    http://bj.zemplate.com/protost…to-the-protostar-template
    und hier zur custom.css
    http://bj.zemplate.com/protost…te-joomla-3-4-and-earlier


    Hilft dir das?

  • Hallo Astrid,


    danke für die Links. Ich habe jetzt die Bezeichnung user.css gewählt, weil sie in der index.php des Protostartemplates so aufgerufen wird und es deshalb bei Templateupdates keine Probleme geben wird.


    Gruß Dietmar