Anleitung Usermod CSS erstellen und verwenden

Thema wurde von Anonymous, 16. Juli 2013 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    10. August 2012
    Beiträge:
    1.554
    Danke erhalten:
    455
    Danke vergeben:
    96
    GX2 bietet die Möglichkeit, gewisse Anpassungen updatesicher am Shop vorzunehmen. Im Bereich der CSS-Anweisungen geschieht das über Usermod-CSS Dateien.
    Diese haben außerdem den Vorteil, dass man alle eigenen CSS-Änderungen gebündelt an einem Ort vorliegen hat.

    Wie erstellt man eine Usermod-CSS Datei?
    Denkbar einfach: Einfach eine neue Textdatei erstellen und die Endung von .txt auf .css ändern.

    Und jetzt? Was muss ich in die Datei schreiben?
    Alle gewünschten CSS-Anweisungen. Das kann z.B. so aussehen:
    Code:
    /*Mindesthöhe für Container, Workaround für weiße Fläche bei kurzen Seiten*/
    #container_inner{
    min-height: 600px;
    }
    Es ist zu empfehlen, sich seine Änderungen wie oben gezeigt durch /* bzw */ zu kommentieren. Dadurch kann man später immer schnell sehen, was ein Absatz machen soll bzw warum das so eingestellt wurde.

    Wohin kommt die Datei?
    Usermod-CSS Dateien müssen im Shop in folgendes Verzeichnis hochgeladen werden: templates\EyeCandy\usermod\css
    Das Verzeichnis existiert bereits. Findet ihr es nicht, sucht ihr am falschen Ort.

    Gibt es etwas zu beachten?
    Einzelne Anweisungen in Usermod-CSS überschreiben automatisch die Anweisungen vom Shop, die z.B. per Styleedit gemacht wurden.
    Anhand des Beispiels oben:
    #container_inner behält alle Zuweisungen, die im Standard vorhanden waren. Neu bekommt es die Anweisung min-height. Wäre min-height per Styleedit bearbeitbar, würde die Usermod-CSS Anweisung Priorität vor dieser erhalten.

    Wie finde ich heraus, wie der Abschnitt heißt den ich ändern will?
    Mit dem Firefox Addon Firebug oder im Chrome per Element untersuchen. Separates Einarbeiten nötig!
     
  2. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.452
    Danke erhalten:
    11.255
    Danke vergeben:
    1.606
    Danke für die gute Anleitung :)

    Man kann auch Änderungen mit dem Style Edit machen und updatesicher in die eigene css übertragen.
    Dazu unter dem Reiter "Optionen" erst die "weitere Einstellungen" und dann "Css-Editor" wählen
    (hier ist noch kein Bereich zum Ändern markiert:

    Edit1.jpg

    Und hier ist die Top Navi zum Bearbeiten markiert.

    Edit2.jpg

    Über dem Button "Bearbeitung Stoppen" steht auch der Titel des Bereichs.
    Wer noch nicht weiß wie die css-codes aussehen, kann das hier sehr gut lernen.
    Man kann die Änderungen auch gleich aus dem Css-Editor kopieren und in die eigene Datei einfügen.
     
  3. Shoppingworld 4 Animals

    Shoppingworld 4 Animals Erfahrener Benutzer

    Registriert seit:
    21. Juli 2013
    Beiträge:
    497
    Danke erhalten:
    29
    Danke vergeben:
    120
    Hallo!

    Mal ne Frage zu dem Ganzen ;-)

    Ich möchte gerne das die Schrift in der Artkel Beschreibung einheitlich ist. Wie zum Bspl.: Größe, Art, Farbe und dergleichen jetzt habe ich mit Firebug einen Artiekl auf meiner HP in der Beschreibung mit rechter Maustaste angeklickt und mit Element untersuchen durch Firebug gekennzeichnet. Nun geht das Fenster mit Firebug auf. Jetzt stellt sich aber meine Frage, was ich da als Anhaltspunkt hernehmen muss?
     
  4. Dennis (MotivMonster.de)

    Dennis (MotivMonster.de) G-WARD 2013/14/15/16

    Registriert seit:
    22. September 2011
    Beiträge:
    31.074
    Danke erhalten:
    6.132
    Danke vergeben:
    1.085
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    Auf der rechten seite sind doch die CSS Werte. Element untersuchen wäre aber in Chrome. Firebug is normal als AdOn für den Firefox.
     
  5. Manni_HB

    Manni_HB G-WARD 2012/13/14/15

    Registriert seit:
    26. April 2011
    Beiträge:
    9.098
    Danke erhalten:
    1.540
    Danke vergeben:
    909
    Ort:
    Bremen
    Vielleicht hilft auch dies weiter?
    Oder dieses?
     
  6. Shoppingworld 4 Animals

    Shoppingworld 4 Animals Erfahrener Benutzer

    Registriert seit:
    21. Juli 2013
    Beiträge:
    497
    Danke erhalten:
    29
    Danke vergeben:
    120
    Hatte da einen falschen installiert gg nun habe ich für Firefox den Firebug :)