Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS Buttons neu definieren

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

    CSS Buttons neu definieren

    Hallo,
    ich möchte gerne das Design der CSS Buttons festlegen. Leider sind einige noch nicht definiert.
    Welche Einträge sind dafür notwendig?
    Schritte
    Danke und viele Grüße,
    Ladenbesitzer

    #2
    Die Buttons sind alle gleich definiert in includes/templates/DEINTEMPLATE/css/stylesheet_css_buttons.css
    Ist nichts Besonderes definiert werden sie so aussehen wie mit .cssButton, .cssButtonHover festgelegt

    Wenn bestimmte Buttons anders aussehen sollen, dann gibst Du denen spezielle Definitionen, genauso wie Du das auch in jedem anderen Stylesheet machen würdest, die Klassen der Buttons sind im Quelltext ersichtlich.

    Um z.B. die Hintergrundfarbe des Buttons zur Kasse im Warenkorb grün zu machen und ihn anders als die anderen aussehen zu lassen:
    Code:
    .button_checkout {
    background: #B7E24C !important;
    color:#000000 !important;
    text-align:center;
    border:1px solid #B7E24C !important;
    }

    Kommentar


      #3
      Danke für die Erläuterung!
      Bei den meisten klappt es, weil diese in der Stylesheet vordefiniert waren.
      Konkret habe ich aber Probleme beim "Jetzt kaufen" und dem "Für Preis anfragen" Button.

      Ich habe im Quelltext folgende Klassen übernommen und mit einem text-decoration:none; versehen.
      Beim Hover wird der Unterstrich aber weiterhin angezeigt:

      .buttonHover {text-decoration:none;}
      .button_buy_now {}
      .button_buy_nowHover {text-decoration:none;}
      .cssButtonHover {text-decoration: none;}

      Hier mal ein Link zur Artikelliste:
      Zuletzt geändert von Ladenbesitzer; 27.05.2016, 08:10.

      Kommentar


        #4
        Zitat von Ladenbesitzer Beitrag anzeigen
        Konkret habe ich aber Probleme beim "Jetzt kaufen" und dem "Für Preis anfragen" Button.
        Das ist kein Button, das ist eine Grafik in includes/templates/template_default/images/call_for_prices.gif

        Kommentar


          #5
          Der Link "Für Preis anfragen" ist gemeint, nicht das Bild.

          Kommentar


            #6
            Zitat von Ladenbesitzer Beitrag anzeigen
            Der Link "Für Preis anfragen" ist gemeint, nicht das Bild.
            Der Link verweist aber genau auf das Bild, und nicht auf einen Button! Schau Dir die Datei includes\functions\functions_prices.php Zeile 282 mal an:

            Code:
                // If Call for Price, Show it
                if ($product_check->fields['product_is_call']) {
                  if (PRODUCTS_PRICE_IS_CALL_IMAGE_ON=='0') {
                    $call_tag = '<br />' . PRODUCTS_PRICE_IS_CALL_FOR_PRICE_TEXT;
                  } else {
                    $call_tag = '<br />' . zen_image(DIR_WS_TEMPLATE_IMAGES . OTHER_IMAGE_CALL_FOR_PRICE, PRODUCTS_PRICE_IS_CALL_FOR_PRICE_TEXT);
            Nachtrag: Obiger Code bezieht sich auf diesen Eintrag im Admin -> Konfiguration -> Artikeldetails -> Artikelbeschreibung: "Für Preis bitte anrufen" als Bild oder Text darstellen
            Zuletzt geändert von klartexter; 27.05.2016, 10:21.

            Kommentar


              #7
              Wenn du auf meienr Seite auf das Bild klickst, dann passiert nichts. Das ist ok so. Das Bild lässt sich auch direkt über die functions.php ausknippsen, darum geht es mir gar nicht.

              Der Link zeigt auf das Kontaktformular. Das ist ok so. Wo man den Ankertext bearbeitet habe ich auch gefunden. Nur möchte ich den Link gerne so gestalten wie die anderen CSS Buttons auch.

              Der Inspector zeigt mir alle aktiven Klassen mit text-decoration:none; an, die auch alle diesen Parameter aufweisen.
              Jedoch wird die Text-decoration des "Jetzt kaufen" Buttons bei onmouse trotzdem angezeigt.
              Zuletzt geändert von Ladenbesitzer; 27.05.2016, 18:22.

              Kommentar


                #8
                Dieser Link ist kein CSS Button, daher kann er auch nicht als CSS Button angesprochen werden.
                Das ist ein ganz normaler Link und wird daher so dargestellt wie alle anderen Links auch.

                Wenn Du den speziell stylen willst:
                Er kommt aus der includes/functions/functions_general.php
                ca. Zeile 1150:

                Code:
                $return_button = '<a href="' . zen_href_link(FILENAME_CONTACT_US, '', 'SSL') . '">' . TEXT_CALL_FOR_PRICE . '</a>';
                Am einfachsten ist wohl ihm hier eine Klasse mitzugeben und die dann im normalen Stylesheet nach Wunsch zu stylen, z.B.

                Code:
                $return_button = '<a class="callforpricelink" href="' .  zen_href_link(FILENAME_CONTACT_US, '', 'SSL') . '">' .  TEXT_CALL_FOR_PRICE . '</a>';
                oder ihm einen kompletten Container zuzuweisen

                Code:
                $return_button = '<div id="callforpricelink"><a href="' .  zen_href_link(FILENAME_CONTACT_US, '', 'SSL') . '">' .  TEXT_CALL_FOR_PRICE . '</a></div>';

                Kommentar


                  #9
                  Danke sehr!
                  Spannend ist für mich hier besonders auch der Unterschied zwischen Klasse und ID.
                  Während die Klasse überschrieben wird durch a:link so lässt sich die ID sofort frei konfigurieren.

                  Danach habe ich gesucht. Ich werde versuchen das für "Jetzt kaufen" anzuwenden.

                  Viele Grüße!

                  Kommentar


                    #10
                    Du kannst die Klasse auch sofort ändern,

                    es gibt 2 Varianten, warum, weiß ich auch nicht, habe jetzt auch nicht getestet, wo der Unterschied ist, aber wenn du:

                    Code:
                    #welcheButtonauchimmer a{meine Konfiguration;}
                    anwendest, dann sollte das auch gehen. Dies spricht dann nur die Klasse an, die sich in der ID befindet. Die ID ist der übergeordnete DIV oder der Bereich, wo dies angewendet werden soll.

                    Beispiele dafür findest du sicher auch in deiner stylesheet.css.

                    Kommentar


                      #11
                      hab jetzt nur noch ne Frage zur Text-decoration.

                      Beim .button_buy_now:hover {color:red;text-decoration:none;} wird alles bis auf die text-decoration angewendet.
                      Auch ein !important ändert nichts daran.

                      Gibt es da eine Möglichkeit das zu erzwingen?
                      Zuletzt geändert von Ladenbesitzer; 13.06.2016, 13:52.

                      Kommentar


                        #12
                        versuche es doch mal so

                        .button_buy_now a:hover {color:red;}
                        .button_buy_now a {text-decoration:none;}

                        Kommentar


                          #13
                          geht nicht. Schau mal bitte her: http://versuch.gienah.uberspace.de/i...=index&cPath=3

                          Kommentar


                            #14
                            und der?

                            Code:
                            [COLOR=#333333][COLOR=#333333][FONT=Ubuntu][FONT=Ubuntu].button_buy_now a:hover {[/FONT][/FONT][/COLOR][/COLOR][COLOR=#333333][COLOR=#333333][FONT=Ubuntu][FONT=Ubuntu]text-decoration:none;}[/FONT][/FONT][/COLOR][/COLOR]

                            Kommentar


                              #15
                              auch nicht

                              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