Ankündigung

Einklappen
Keine Ankündigung bisher.

Kategorien mit zusätzlichem Farbfeld hinterlegen

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    (Zen-Cart 1.5.6) Kategorien mit zusätzlichem Farbfeld hinterlegen

    Hallo,
    ich möchte die einzelnen Kategorien in der linken Spalte mit einem zusätzlichen Farbfeld hinterlegen. Im Grunde soll dies aber bei allem passieren (keine Buttons).
    Nun ja, ich habe nur eine ungefähre Ahnung, wie es funktionieren könnte (div-container erstellen, in css definieren). Aber wo den Container erstellen und in welche css Definitionen. Gelesen habe ich, dass das Ganze mit z-index gelöst wird. Allerdings hat das noch mehr ??? in den Raum gestellt.

    Ich bräuchte echt Hilfe und einen Ansatz.

    Grüße

    Klicke auf die Grafik für eine vergrößerte Ansicht

Name: Kategorien.jpg
Ansichten: 1
Größe: 39,1 KB
ID: 104213
    Zuletzt geändert von kidax; 12.08.2021, 16:52.

    #2
    Wie bei jeder anderen Website auch:

    - Den Quelltext der Website im Browser anzeigen lassen (in Firefox z.B. rechte Maustaste > Quelltext anzeigen oder Extras > Browserwerkzeuge > Quelltext anzeigen)
    - Betroffenes Element identifizieren
    - Im Stylesheet die entsprechende Definition setzen

    Beispiel:
    Demoshop mit responsice_classic Template auf https://demo.zen-cart-pro.at

    In der linken Kategoriebox wechselt die Hintergrundfarbe der Kategorie bei Mouseover auf ein helles Grau

    Warum?

    includes/templates/responsive_classic/stylesheet_colors.css

    definiert Hintergrundfarben für diverse Bereiche mit #eee

    Code:
    fieldset, .rowEven, #shippingEstimatorContent tr:nth-child(odd), #order-comments, [COLOR=#ff0000]ul.list-links li:hover[/COLOR], ol.list-links li:hover, #no-products, .listing-wrapper:nth-child(odd), #reviews-write-wrapper, #gvFaqDefaultContent, #checkoutPayAddressDefault .instructions, #checkoutShipAddressDefault .instructions, #addressBookDefault .instructions, #myAccountNotify, #myAccountGen, .reviews-wrapper, #accountHistInfo table td, #prevOrders td, #myAccountPaymentInfo, #myAccountShipInfo, #accountDefault #sendSpendWrapper{background:#eee;}
    Unter anderem auch diesen hier in der Kategoriebox, allerdings nur für Mouseover:

    Code:
    ul.list-links li:hover
    Wenn die Hintergrundfarbe dieser Kategorien generell z.B. hellgrün sein soll, dann müsste definiert werden:

    Code:
    ul.list-links li{
    background:#00ff00;
    }
    Diese Definition eintragen in:
    includes/templates/responsive_classic/stylesheet_colors.css

    Hochladen und bestehende includes/templates/responsive_classic/stylesheet_colors.css mit der geänderten ersetzen

    Seite neu laden, in Firefox z.B. mit Strg und F5 gleichzeitig

    Fertig, die Kategorien haben nun einen hellgrünen Hintergrund

    Mit z-index hat das alles wenig zu tun.
    Im Linkbereich gibt es einige nützliche Seiten für CSS Grundlagen:

    Kommentar


      #3
      Danke für die Antwort. Hat mir geholfen, aber nicht mein Problem gelöst.
      Z.B. die Kategorie Postkarten ist in einer Farbe hinterlegt. Das gesamte Feld aber mit einer etwas helleren. Die kann ich mit deiner Anleitung ändern, aber ich bekomme kein farbliches Feld hinter den Ausdruck "Postkarten".

      Grüße

      Kommentar


        #4
        So sieht der Quelltext aus obigem Beispiel aus:
        Code:
        <div id="categoriesContent" class="sideBoxContent"><ul class="list-links">
        <li><a class="category-top" href="https://irgendwas/index.php?main_page=index&cPath=1">Hardware</a></li>
        Mit

        Code:
        ul.list-links li{
        background:#00ff00;
        }
        wurde der Hintergrund der ungeordneten Liste mit der Klasse list-links auf hellgrün geändert und damit die Hintergrundfarbe aller Kategoriezeilen in der Kategoriesidebox

        Jetzt soll zusätzlich der Text der Kategorie (z.B. Hardware) mit einer anderen Hintergrundfarbe versehen werden.

        Dieser Text ist ein Link und kann daher gezielt angesprochen werden mit:

        Code:
        #categoriesContent ul.list-links li a
        = Link in der ungeordneten Liste mit der Klasse list-links im Bereich der ID categoriesContent

        Der wird nun im Styleheet z.B. so definiert:

        Code:
        #categoriesContent ul.list-links li a{
            background:#ffff66;
            }
        Dadurch ist mal der Text gelb hinterlegt

        Da wohl gewünscht ist, dass sich der gelbe Hintergrund über die gesamte Breite zieht. wird zusätzlich display:block gesetzt:

        Code:
        #categoriesContent ul.list-links li a{
            background:#ffff66;
            display:block;
            }
        Und da wohl auch gewünscht ist, dass es einen zusätzlichen Abstand gibt, um das Hintergrundgrün vom Hintergrundgelb abzuheben wird für die normale Liste ein zusätzlicher grüner Rahmen definiert:

        Code:
        #categoriesContent ul.list-links li {
        background:#00ff00;
        border:4px solid #00ff00;
        }
        Es gibt sicher noch andere Möglichkeiten das entsprechend zu stylen, dieses Beispiel verdeutlicht lediglich das Prinzip.

        Du musst Dich mit HTML und CSS beschäftigen, wenn Du solche Dinge selbst gestalten willst.

        Kommentar

        Info zu diesem Forenarchiv:
        Mit Release von 1.5.7 wurde die deutsche Zen Cart Version auf eine reine DIY-Lösung umgestellt.
        Für einen Support via Forum stehen keine personellen und zeitlichen Ressourcen mehr zur Verfügung.
        Dieses Supportforum bleibt im Nur-Lesen-Modus als Wissensarchiv noch online verfügbar.
        PM Funktionalität, Registrierung und Posten neuer Beiträge sind deaktiviert.
        Zugriff auf Anhänge in den Postings ist auch ohne Registrierung/Einloggen möglich.
        FAQ und Downloadbereich des Forums wurden in die neue umfangreiche Knowledgebase auf der zen-cart-pro.at Website übernommen.

        Das Development der deutschen Zen Cart Version geht wie bisher auf Github weiter.
        Wir werden auch weiterhin neue Versionen bereitstellen und die Onlinedokumentation/Knowledgebase aktualisieren.
        Fehler in der Software können auf Github als Issues gemeldet werden.
        Follow us
        aktuelle version
        Zen Cart 1.5.7g deutsch
        vom 12.12.2023
        [Download]
        Lädt...
        X