Frust nach update 3.6 zu 3.93 - geht es nur mir so?

Sorry für das Ungemach, wir wollen weder dich noch irgendwen frusten. Darum gehts ganz und gar nicht, wir sitzen nur manchmal auch in ner Zwickmühle.

Uns gehts so:
Man entdeckt was, was nicht funktioniert wie gewollt oder den Leuten so wie es ist Probleme macht oder was auch immer. Dann hat man immer 2 Optionen, die eine ist lassen wie es ist um Bestandsschutz walten zu lassen, das andere ist anpassen und riskieren Änderungen bei den Leuten auszulösen, die die nicht haben wollen. Ich kann dir versichern egal was wir machen, irgendwer findet uns hinterher blöd.

Bei dir scheints soweit ich verstanden habe jetzt ziemlich exklusiv um nun nötige CSS Anpassungen zu gehen. Das ist nicht so undankbar, das kriegen wir zusammen wieder hin. Unser grösster Fachmann für Template CSS ist Torben, den stupsen wir gleich morgen früh an sich bei dir mal reinzuschauen, und dann sehen wir mal was dem so einfällt. Meist viel.

 

Moin Monika,

ich schau mir das mal an, bekommen wir bestimmt wieder hin

 

Eine Empfehlung noch - Mach Updates immer erst mal in einem Testshop (Anleitung dazu im Forum). Damit du dir nicht den liveshop kaputt machst. Und solang es nur CSS Fehler sind bekommt man das doch wieder in den Griff. Vielleicht kann man dabei auch gleich einiges geschickter lösen.

 

Als erstes vorweg: Ich verstehe ja so ein eigenen Ärger vollkommen und man möchte gerne irgendwas zerschlagen und durchdrehen.

ABER: WARUM macht Ihr Updates nicht erst an einem Testshop und erst wenn alles funktioniert dann im Liveshop. Das erspart eine Menge an Frust und Ärger ;-)

 

Soooo, achtung viel Text

Verschobene Menüeinträge:

Die Struktur im Header hat sich ein wenig verändert, deswegen greift da dein CSS nicht mehr korrekt. Das hier

Code:

#header .navbar-categories {
    margin-top: -150px;
}

Ist jetzt quasi eine Ebene zu hoch angesetzt, ändere das mal auf

Code:

#header {
   .navbar-categories {
       > .level-1 {
               margin-top: -150px;
       }
   }

   &.sticky {
       .navbar-categories {
           > .level-1 {
                   margin-top: -100px;
           }
       }
   }
}

ab. Dann sollten die Menüeinträge wieder an der richtigen Stelle sein.

Punkte im Menü:

Das sieht mir gerade so aus, als hättest du einen Content im Content Manager, der diese Punkte erzeugt. Schau da mal unter "Hauptkategorien" nach, da müsste ein entsprechender Eintrag sein. Wenn du den nicht brauchst, einfach löschen

Logo:

Das Logo ist kein Hintergrundbild mehr, deswegen funktioniert da ein background-position: 50% 50%; zum Zentrieren nicht mehr. Dass das kein Hintergrundbild mehr ist, sorgt dafür, dass dein Logo auch bei Google in der Bildersuche gefunden wird, ist also eine kleine SEO-Verbesserung unsererseits.
Die Anweisung

Code:

#navbar-brand a {
    background-position: 50% 50%;
}

kannst du aus deinen Anpassungen entfernen, da sie nicht mehr benötigt wird.

Wenn ich das richtig in Erinnerung habe, war dein Logo auch mal größer oder? Soll das gerade so oder willst du das wieder größer haben? Wenn ja, dann schau mal im StyleEdit 3 unter Header > Logo > Logo Höhe nach und ändere da den Wert nach deinen Wünschen ab.

Warenkorb:

Du hattest da mal das Warenkorbsymbol, welches wir auch in Demoshop 3 verwenden, oder? Wenn das nicht mehr da ist, dann scheint eine HTML-Anpassung nicht mehr da zu sein, oder nicht mehr zu greifen. Die entsprechende Datei ist die templates/Honeygrid/boxes/box_cart_head.html. Davon legst du dir einmal eine Kopie an und nennst sie box_cart_head-USERMOD.html. Da drin änderst du folgende Zeile ab:

HTML:

<i class="gm-cart-basket"></i>

Ändern zu:

HTML:

<i class="gm-cart"></i>

Anschließend brauchen wir noch etwas CSS, damit das wieder gut aussieht. Füg das hier mal als eigenes CSS im StyleEdit 3 ein:

Code:

#cart-container.navbar-cart > ul > li {
   > a.dropdown-toggle {
       text-shadow: none;
       .gm-cart {
           color:      #FFFFFF;
           font-size:  40px;
           position:   absolute;
           right:      10px;
           top:        inherit;
           margin-top: -11px;
       }
   }
   &.open > a.dropdown-toggle,
   a.dropdown-toggle:hover {
       .gm-cart {
           color: #FFFFFF;
       }
   }
}

Produkt-Bilder in Produkt-Ansicht:

An der Stelle haben wir soweit ich weiß eigentlich nichts geändert. Die Größe der Bilder ist da abhängig von der Höhe, die man im StyleEdit 3 unter Produkte > Artikelbild > Höhe einstellt. Den Wert kannst du da natürlich erhöhen, damit die Bilder wieder größer angezeigt werden.

Silbentrennung:

Mein Lieblingsthema im Moment. Diese Art der Worttrennung ist momentan verbaut, da es einen Chrome-Bug gibt, der verhindert, dass wir eine korrekte Silbentrennung durchführen können. Der Bug sorgt dafür, dass die Anweisung hyphens: auto; nicht korrekt funktioniert und dann geht im Chrome leider mehr kaputt, als es heil zu machen. Deswegen verwenden wir da jetzt gerade als Workaround die Anweisung word-break: break-all; Das sorgt dafür, dass die Browser versuchen, so viele Buchstaben in eine Zeile zu bekommen, wie die Breite des Elements zulässt und bricht dann hart um. Das vorherige Verhalten Wörter, die eigentlich umbrechen sollten, direkt abzuschneiden, ohne den Rest des Textes noch lesen zu können, fanden wir nicht mehr so gut und haben das deswegen umgestellt. Leider gibt es keinerlei CSS-basierte Browserweichen für den Chrome, die nicht auch von anderen Browsern ausgeführt werden, sonst hätten wir den Workaround nur für den Chrome eingebaut. Wenn du das resetten willst, kannst du dafür folgendes CSS verwenden:

Code:

.productlist-viewmode-grid .product-container .product-tile .title-description,
.productlist-swiper .product-container .product-tile .title-description,
.product-container.flyover .product-tile .title-description {
   word-break: normal;
}

.productlist-viewmode-grid .product-container .product-tile .title-description .title a,
.productlist-swiper .product-container .product-tile .title-description .title a,
.product-container.flyover .product-tile .title-description .title a {
   max-width: 175px;
}

Wir werden aber auch auf die korrekte Silbentrennung umstellen, sobald der Bug im Chrome erledigt worden ist.

Footer:
Da brauchen wir wohl inzwischen ein bisschen extra CSS, um das wieder korrekt hinzubekommen. Versuchs mal mit

Code:

#footer {
   .footer-header {
       .row {
           margin: 0;
       }   
   }
}

Damit sollte dann der horizontale Scrollbalken verschwinden, sodass der Shop wieder korrekt Seitenfüllend angezeigt wird.

Wenn ich gerade noch irgendwas übersehen haben sollte, sag einfach Bescheid. Dann schau ich mir das nochmal an . Ich würde dir allerdings auch empfehlen, einen Testshop anzulegen, in dem du erstmal deine Updates testen kannst und, sollte etwas kaputt gehen, nicht deinen Live-Shop gefährdest.

 

Kleine Ergänzung zum Footer, da ich hier nicht genau weiß, wie es vorher ausgesehen hat:
Man könnte hier noch dafür sorgen, dass die einzelnen Elemente des Footer-Headers zentriert sind. Dafür müsste man das CSS von eben wie folgt abändern:

Code:

#footer {
    .footer-header {
        .row {
            margin: 0;
           
            > div {
                text-align: center;           
            }
        }   
    }
}

 

Für den Warenkorb im Sticky hätte ich hier folgendes:

Code:

#header.sticky {
   #cart-container.navbar-cart > ul > li {
       > a.dropdown-toggle {
           text-shadow: none;
           .gm-cart {
               color:      #000;
               margin-top: 0;
           }
       }
       &.open > a.dropdown-toggle,
       a.dropdown-toggle:hover {
           .gm-cart {
               color: #000;
           }
       }
      
       .cart-products-count {
           top: 60px;   
       }
   }
}

Für das Logo hab ich leider gerade nur eine etwas unschöne Idee, da könnte man folgendes machen:

Code:

#navbar-brand a img {
   display: block;
   margin: 0 auto;

   @media (min-width: $screen-sm-min) {
       padding-left: 10%;
   }
}

Wenn man das schön machen will, muss man da glaube ich mehr am Template selbst ran. Ich hatte hier mal beschrieben, wie das gehen könnte: https://www.gambio.de/blog/styleedit-3-tutorials-teil-3-header/#Mit_Anpassung_des_Templates

Für die mobile Ansicht:

Da müssen wir auch ein bisschen tricksen, damit das wieder richtig aussieht:

Versuch da mal folgendes als eigenes CSS einzutragen:

Code:

@media (max-width: $screen-xs-max) {
   #header {
       .inside {
           .navbar-header {
               #navbar-brand {
                   a {
                       img {
                           margin-top: -20px;
                       }
                   }              
               }

               button {
                   &.navbar-toggle {
                       margin-top: 0;
                       position: absolute;
                       right: 0;
                       top: 10px;

                       &.cart-icon {
                           right: 60px;
                       }

                       > i {
                           color: #FFFFFF;
                       }
                   }
               }
           }
          
           #cart-container {
               display: none;
           }
       }
   }
}

 

Wir müssen am Verschieben der Kategorien nach oben noch was verändern. Änder mal

Code:

#header {
   .navbar-categories {
       > .level-1 {
               margin-top: -150px;
       }
   }

   &.sticky {
       .navbar-categories {
           > .level-1 {
                   margin-top: -100px;
           }
       }
   }
}

in das hier:

Code:

@media (min-width: $screen-sm-min) {
   #header {
       .navbar-categories {
           > .level-1 {
                   margin-top: -150px;
           }
       }

       &.sticky {
           .navbar-categories {
               > .level-1 {
                       margin-top: -100px;
               }
           }
       }
   }
}

Und bei dem hier

Code:

@media (max-width: $screen-xs-max) {
   #header {
       .inside {
           .navbar-header {
               #navbar-brand {
                   a {
                       img {
                           margin-top: -20px;
                       }
                   }               
               }

               button {
                   &.navbar-toggle {
                       margin-top: 0;
                       position: absolute;
                       right: 0;
                       top: 10px;

                       &.cart-icon {
                           right: 60px;
                       }

                       > i {
                           color: #FFFFFF;
                       }
                   }
               }
           }
           
           #cart-container {
               display: none;
           }
       }
   }
}

müssen wir noch was ergänzen:

Code:

@media (max-width: $screen-xs-max) {
   #header {
       .inside {
           .navbar-header {
               #navbar-brand {
                   a {
                       img {
                           margin-top: -20px;
                       }
                   }               
               }

               button {
                   &.navbar-toggle {
                       margin-top: 0 !important;
                       position: absolute;
                       right: 0;
                       top: 10px;
                       z-index: 2;

                       &.cart-icon {
                           right: 60px;
                       }

                       > i {
                           color: #FFFFFF !important;
                       }
                   }
               }
           }
           
           #cart-container {
               display: none;
           }
       }
   }
}

Dann sollten die Buttons in der mobilen Ansicht, wieder richtig sichtbar sein und auch klickbar.

Zur Tablet-Ansicht:

Auch hier müssen wir ein bisschen mit CSS tricksen, damit das wieder ordentlich sitzt:

Code:

@media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
   #header {
       .navbar-categories {
           width: auto;
           margin-left: 10%;

           > .level-1 {
                   margin-top: -150px;
               > li {
                   > a {
                       font-size: 14px;
                       padding: 5px;
                   }           
               }
           }
       }

       .navbar-cart {
           margin-top: -200px;
       }

       &.sticky {
           .navbar-categories {
               > .level-1 {
                       margin-top: -115px;

                   > li {
                       > a {
                           font-size: 15px;
                           padding: 5px;
                       }           
                   }
               }
           }
           
           .navbar-cart {
               margin-top: -180px;
           }
       }
   }
}

Ich hoffe diesmal hab ich alles erwischt xD

 

Das müsste gehen, wenn du die Werte für margin-top anpasst, da wo wir schon negative Werte haben. Die ziehen die Elemente weiter nach oben.

 

Das sieht doch wieder ziemlich gut aus. Na also!

 

Werde mir auch ein weibliches Avatar zulegen.
Bin hier noch nie, so schnell, ausführlich und umfangreich bedient worden.
Noch nicht einmal ansatzweise.

 

Schöne Idee, könnte wirken

Jetzt mal im Ernst: Wir sind immer bermüht so schnell zu helfen wie möglich. Jeder soll seine Antwort bekommen. Das gilt für Tickets genauso wie für Forenbeiträge. Ich hab eben gerade mal etwas in deine Forenhistorie geschaut um zu sehen ob du irgendwo misachtet wurdest, da hab ich jetzt nichts entdeckt. Ich glaube du hast auch immer zügig von uns oder anderen sachkundigen Hilfestellungen bekommen. Übersehe ich etwas? Dann zeigen, dann können wir darüber reden.

 

Das Angebot nehme ich gerne in Anspruch, wenn es mal wirklich brennt.