Ergebnis 1 bis 4 von 4

Thema: Kategorien mit zusätzlichem Farbfeld hinterlegen

  1. #1
    Padawan Stufe II Avatar von kidax
    Registriert seit
    15.06.2008
    Beiträge
    83
    Themen
    42
    DANKE
    5
    Erhaltene Danke: 0

    Standard 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

    Kategorien.jpg
    Geändert von kidax (12.08.2021 um 16:52 Uhr)

  2. #2
    Jedi-Ritter Avatar von webchills
    Registriert seit
    30.10.2004
    Ort
    Österreich
    Beiträge
    7.200
    Themen
    98
    DANKE
    3
    Erhaltene Danke: 1.324

    Standard

    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, ul.list-links li:hover, 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:
    https://www.zen-cart-pro.at/forum/vb...howcat&catid=3
    !!! kostenloser Support ausschließlich im Forum - Nicht per Email, nicht per Telefon und nicht per PM !!!

  3. #3
    Padawan Stufe II Avatar von kidax
    Registriert seit
    15.06.2008
    Beiträge
    83
    Themen
    42
    DANKE
    5
    Erhaltene Danke: 0
    Erstellt von

    Standard

    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

  4. #4
    Jedi-Ritter Avatar von webchills
    Registriert seit
    30.10.2004
    Ort
    Österreich
    Beiträge
    7.200
    Themen
    98
    DANKE
    3
    Erhaltene Danke: 1.324

    Standard

    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.
    !!! kostenloser Support ausschließlich im Forum - Nicht per Email, nicht per Telefon und nicht per PM !!!

  5. Folgender User sagt Danke zu webchills für den nützlichen Beitrag:

    kidax (15.08.2021)

Ähnliche Themen

  1. (Zen-Cart 1.5.6) Neuen API-Key für Sofortüberweisung erstellen und neuen Key im Shop hinterlegen
    Von webchills im Forum SOFORT Überweisung
    Antworten: 0
    Letzter Beitrag: 02.03.2020, 18:20
  2. Antworten: 0
    Letzter Beitrag: 05.05.2017, 21:09
  3. Widerruf richtig hinterlegen
    Von Uckerwelle im Forum Archivierte Beiträge Zen-Cart Support
    Antworten: 1
    Letzter Beitrag: 29.07.2014, 00:14
  4. Bankdaten hinterlegen bei Sofortkauf
    Von stylisti im Forum Archivierte Beiträge Zen-Cart Support
    Antworten: 8
    Letzter Beitrag: 06.04.2010, 19:23
  5. Reseller Preise hinterlegen
    Von skiller2010 im Forum Archivierte Beiträge Zen-Cart Support
    Antworten: 4
    Letzter Beitrag: 21.10.2009, 09:01

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •  
zen-cart-pro.at
Zen Cart ist eine kostenlose unter der GPL-Lizenz veröffentlichte Open-Source Shopsoftware. Das System wird in den USA entwickelt, die amerikanische Website dazu ist www.zen-cart.com

Die deutsche Zen-Cart Version, um die es hier auf zen-cart-pro.at geht, ist eine Anpassung der amerikanischen Version an die Bedürfnisse von Onlineshopbetreibern im deutschsprachigen Raum.
Die amerikanische Zen-Cart Version berücksichtigt viele rechtliche Erfordernisse nicht, denen ein Onlineshop im deutschsprachigen Raum unterworfen ist. Daher wurde die deutsche Zen-Cart Version nicht nur bloß ins Deutsche übersetzt, sondern auch funktional auf die Anforderungen, die an Onlineshops in Deutschland, Österreich und der Schweiz gestellt werden, angepasst.

Die amerikanische Version ist extrem abgespeckt und stellt weiterführende Funktionalitäten durch zusätzliche Module bereit, die erst mühsam manuell installiert werden müssen. Zahlreiche häufig genutzte Erweiterungen und eigene Entwicklungen sind in der deutschen Zen Cart Version bereits vorinstalliert.
Die deutsche Zen-Cart Version bietet außerdem einen völlig multilingualen Adminbereich. Weitere für die deutsche Zen Cart Version angepasste Erweiterungen stehen in unserem Downloadbereich zur Verfügung.

Die deutsche Zen Cart Version wird seit 16 Jahren von einem Team von Entwicklern in Österreich und Deutschland betreut, weiterentwickelt und supportet und steht kostenlos in unserem Downloadbereich zur Verfügung.

[mehr]
Follow Us
  • zen-cart-pro-at auf Twitter
  • zen-cart-pro-at auf Github
  • zen-cart-pro-at auf SourceForge
Aktuelle Version
Zen Cart 1.5.6f deutsch
vom 20.06.2021
[Download]

unterstützen
Unterstütze die Weiterentwicklung der deutschen Zen Cart Version mit einer Spende!

Spende für die Weiterentwicklung der deutschen Zen Cart Version