Runde Ecken bei den Kategorien - rechts ja, links nein

Thema wurde von shop4cats, 10. August 2016 erstellt.

  1. shop4cats

    shop4cats Mitglied

    Registriert seit:
    31. Juli 2016
    Beiträge:
    19
    Danke erhalten:
    0
    Danke vergeben:
    2
    Guten Morgen an Alle,

    unser Shop ist gerade im Entstehen und ich entdecke gerade erst die vielen Möglichkeiten.

    Ua. habe ich abgerundete Ecken entdeckt und würde die gerne verwenden.

    Ich habe in der Kategorienleiste mittels Content Manager ein zusätzliches Feld in Positon TopMenu hinzugefügt um auf der rechten Seite "Sale %" in einer anderen Farbe darstellen zu können.

    Die abgerundeten Ecken werden jetzt zwar links (bei Kategorienfeld) gemacht, jedoch nicht rechts (beim TopMenu-Feld).
    [​IMG]

    Interessanterweise, wenn ich runterscrolle (während der Sticky-Funktion) sehe ich auch rechts runde Ecken, jedoch nur währen wirklich gescrollt wird....

    Kann mir vielleicht jemand einen Tipp geben?

    Vielen Dank!

    Liebe Grüße
    Oliver
     
  2. Dennis (MotivMonster.de)

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

    Registriert seit:
    22. September 2011
    Beiträge:
    30.984
    Danke erhalten:
    6.096
    Danke vergeben:
    1.079
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    Designprobleme bitte IMMER mit Link, da man das html / CSS sehen muss für solche Fehler.
     
  3. shop4cats

    shop4cats Mitglied

    Registriert seit:
    31. Juli 2016
    Beiträge:
    19
    Danke erhalten:
    0
    Danke vergeben:
    2
    Guten Morgen,

    Danke für die Rückmeldung, das war mir nicht bekannt.
    Wird aber leider etwas schwierig, Shop ist noch nicht "geöffnet" und geht derzeit nur mit Login. Bzw. ist der TestShop sicherheitshalber mit PW-Schutz versehen damit man nicht versehentlich drauf stößt und bestellt wo's doch noch gar nichts gibt.

    Ich hab aber jetztmal die Authentifizierung rausgenommen - für heute mal.

    http://server.heo.at/testshop - sieht man ja gleich auf der Startseite

    Interessanterweise ist mir aufgefallen das ich direkt gleich ein, zwei Sekunden nach dem Aufruf rechts sehr wohl eine Rundung sehe, die dann direkt automatisch zu eckig geändert wird.

    Schonmal Danke für's Schauen!

    LG
    Oliver
     
  4. M. Zitzmann

    M. Zitzmann Erfahrener Benutzer

    Registriert seit:
    3. März 2016
    Beiträge:
    367
    Danke erhalten:
    118
    Danke vergeben:
    39
    Hier kannst Du die Radien grundsätzlich testen und den Code kopieren:

    http://border-radius.com/

    Danach muß Du die id des Feldes suchen und eine entsprechende css-datei in den Ordner templates/Honeygrid/usermod/css laden:

    Code:
    #deine-id {
    -webkit-border-top-right-radius: 50px;
    -webkit-border-bottom-right-radius: 50px;
    -moz-border-radius-topright: 50px;
    -moz-border-radius-bottomright: 50px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    }
     
  5. shop4cats

    shop4cats Mitglied

    Registriert seit:
    31. Juli 2016
    Beiträge:
    19
    Danke erhalten:
    0
    Danke vergeben:
    2
    Danke, ich werd's mal versuchen.

    LG
     
  6. shop4cats

    shop4cats Mitglied

    Registriert seit:
    31. Juli 2016
    Beiträge:
    19
    Danke erhalten:
    0
    Danke vergeben:
    2
    Bitte um entschuldigung wenn ich mich ungeschickt anstelle, aber das ist Neuland für mich....

    Ich hab im Quelltext der Seite geschaut und folgendes für das "Sale %" gefunden:

    <li class="dropdown custom topmenu-content" data-id="top_custom-0">
    <a class="dropdown-toggle" href="http://server.heo.at/testshop/shop_content.php?coID=201" target="" title="Sale %">
    Sale %
    </a>
    </li>

    Also hab ich im angegeben Verzeichnis eine Datei "runde_ecken.css" gemacht mit dem Inhalt:

    #top_custom-0 {
    -webkit-border-top-right-radius: 50px;
    -webkit-border-bottom-right-radius: 50px;
    -moz-border-radius-topright: 50px;
    -moz-border-radius-bottomright: 50px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    background-color: red;
    }

    background damit ich sehe ob sich überhaupt was verändert.

    Leider bleibt das Feld wie's ist, auch nach löschen von template_c

    Was mache ich falsch?

    Danke!
     
  7. M. Zitzmann

    M. Zitzmann Erfahrener Benutzer

    Registriert seit:
    3. März 2016
    Beiträge:
    367
    Danke erhalten:
    118
    Danke vergeben:
    39
    data-id="top_custom-0" ist keine id...

    Versuch mal das:

    Code:
    .custom .dropdown-toggle {
    -webkit-border-top-right-radius: 50px;
    -webkit-border-bottom-right-radius: 50px;
    -moz-border-radius-topright: 50px;
    -moz-border-radius-bottomright: 50px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    background-color: red !important;
    }
    



    .
     
  8. shop4cats

    shop4cats Mitglied

    Registriert seit:
    31. Juli 2016
    Beiträge:
    19
    Danke erhalten:
    0
    Danke vergeben:
    2
    Super, vielen, vielen Dank für die rasche Hilfe!
    Seht jetzt so aus und funktioniert somit :)
    [​IMG]

    Darf ich noch - für mein Verständnis und etwaige zukünfige Änderungen - fragen wie genau sich das jetzt nur auf dieses Feld bezieht?
    Code:
            <li class="dropdown custom topmenu-content" data-id="top_custom-0">
                <a class="dropdown-toggle" href="http://server.heo.at/testshop/shop_content.php?coID=201" target="" title="Sale %">
                    Sale %
                </a>
            </li> 
    Weil "dropdown-toogle" bezieht sich doch auf den Wert bei <a class "dropdown-toggle"> oder?

    Jetzt gibt es den Wert <a class="dropdown-toggle"> aber auch an anderen Stellen, zb Spielzeug bei den Kategorien:
    Code:
    <li class="dropdown level-1-child" data-id="2">
                            <a class="dropdown-toggle" href="http://server.heo.at/testshop/index.php?cat=c2_Spielzeug-spielzeug.html" title="Spielzeug">
                                Spielzeug                        </a>
                        
                                                        <ul data-level="2" class="level-2 dropdown-menu dropdown-menu-child">
                                    <li class="enter-category">
                                        <a class="dropdown-toggle" href="http://server.heo.at/testshop/index.php?cat=c2_Spielzeug-spielzeug.html" title="Spielzeug">alle anzeigen</a>
                                    </li>

    Darauf hat die css-Datei richtigerweise aber keine Auswirkung. Ist es leicht zu erklären wieso? Oder würde das zu weit führen und einen CSS-Crash-Kurs benötigen?

    LG
    Oliver
     
  9. M. Zitzmann

    M. Zitzmann Erfahrener Benutzer

    Registriert seit:
    3. März 2016
    Beiträge:
    367
    Danke erhalten:
    118
    Danke vergeben:
    39
    Es folgen zwei Klassen hintereinander:

    .custom .dropdown-toggle { ......

    Damit wird nur die Klasse .dropdown-toggle angesprochen die sich "hinter" der Klasse .custom befindet.

    Und .custom ist nur einmal vorhanden...

    Danke-Knopf nicht vergessen ;)

    Gruß
    Mike
     
  10. shop4cats

    shop4cats Mitglied

    Registriert seit:
    31. Juli 2016
    Beiträge:
    19
    Danke erhalten:
    0
    Danke vergeben:
    2
    Hallo Mike

    Dann nochmal vielen Dank, da hab ich jetzt einiges gelernt und werd ausprobieren ob ich noch Feintuning vornehmen kann.

    LG
    Oliver

    P.S.: Beim angegebenen TestShop ist wieder die Authentifizierung aktiviert.
     
  11. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    31. Juli 2014
    Beiträge:
    718
    Danke erhalten:
    115
    Danke vergeben:
    148
    wo finde ich die runden Ecken? :)
     
  12. shop4cats

    shop4cats Mitglied

    Registriert seit:
    31. Juli 2016
    Beiträge:
    19
    Danke erhalten:
    0
    Danke vergeben:
    2
    Hallo Nic,

    kennst Du keine runden Ecken?
    Stehen im Normalfall gleich neben dem quadratischen Ball ;)

    Aber OK; sollte abgerundete Ecken heißen. Und auch links und rechts ist in der Themenüberschrift falsch - wenn man sich schon die Mühe macht ;-)