Gantry 5 Framework/ Hintergrundbild in Navigations Section einbauen

  • Hallo zusammen,


    ich entwerfe gerade meine erste Homepage und habe mich nach einigen Tests für das Hydrogen Gantry Framework auf Joomla entschieden.

    Grundsätzlich gefällt mir der Mechanismus sehr gut. Zu weiteren Verfeinerung wollte ich jetzt aber doch etws tiefer einsteigen und die Navigations Section mit einem füllenden Hintergrundbild hinterlegen.

    Folgendes habe ich mir bis jetzt zusammengereimt:


    In der Navi Section gibt es ja die Section Settings, innerhalb derer eine Css Class das Layout steuert. Ähnlich wie beim Logo mit der voreingestellten "gantry-logo" class.

    siehe Bild 1.?thumbnail=1


    Nach ein wenig hin und her googeln, fand ich den Begriff der "custom.css", über die css classes spezifisch angesprochen werden können.

    Dieses File habe ich mit dann unter C:\xampp\htdocs\joomla3test\templates\g5_hydrogen\custom\scss erzeugt. Wobei ich den Unterordner scss erst noch erzeugen musste.

    Wie man sieht entwerfe ich momentan noch lokal.

    Der Inhalt sieht so aus: Bild2 ?thumbnail=1


    Den Pfad für das Bild habe ich dem hochlade Mechanismus (z.B beim Logo) entlehnt.

    Nach Abspeichern und umstellen des Settings auf "Development" bzw, Recompiling der css passiert aber nichts.

    Meine Frage:

    Bin ich hier eigentlich grundsätzlich richtig unterwegs mit meinen Überlegungen, oder total auf dem falschen Dampfer?:/


    Vielen Dank für eure Hilfe:/:)

    Flippo

  • Im Ordner C:\xampp\htdocs\joomla3test\templates\g5_hydrogen\custom\scss


    legst du eine custom.scss Datei an.


    In diese custom.scss schreibst du:


    Code
    #g-navigation {
        background: url(gantry-media://ThBilder/Logo_pur_2.png)no-repeat;
        background-size: no-cover;
    }

    Caches löschen.


    Wenn der url-Pfad und die Schreibweise richtig sind, sollte das Bild Logo_pur_2.png in der Section-Area 'Navigation' angezeigt werden.


    Bei mir hat es funktioniert. ;)