Hallo, wer kann helfen, vorweg, ich arbeite mit der aktuellen Gambio GX3 Version und benutze StyleEdit. Den Shop habe momentan Offline. 1.) Nachdem ich in StyleEdit unter Header die Höhe auf 180px vergrößert habe, hat sich die seitliche Navigation und die Breadcrumbs nach oben verschoben. Die kleben sozusagen zu dicht am Header. Habe schon viele Einstellungen durchprobiert aber immer noch keine Lösung gefunden. Wer hat eine Idee. 2.) Desweiteren würde ich auch gern unten im Footer die Hover-Linkfarbe und die Klick-Linkfarbe von grau auf rot ändern. Wo finde ich diese Funktion. Im StyleEdit Handbuch habe ich das irgendwie nicht gefunden.
Ich könnte es dir morgen beantworten, auch ohne Link. Habe das bei mir nämlich auch alles geändert. Vorab zu 1.) ist eine Einstellung im SE. Zu 2.) Geht nur mit eigenem CSS.
Moin, den Abstand zum Header korrigierst mit dieser Einstellung, Wert entsprechend erhöhen. Hover Farbe im Footer geht mit diesem Code. Code: #footer .nav > li > a:hover {color: #deine Farbe;} Klick-Link Farbe mußt du noch mal erläutern.
So der Shop ist wieder Online unter www.smoketrend.de Zu1. Das erste Problem ist fast gelöst. Danke schon mal. Leider geht die Headerunterkante jetzt noch unter die oberen Kategorie Leiste, sodas ein schwarzer Rand darunter zu sehen ist. Zu2. Die Linkfarbe unten im Hover ist leider immer noch grau. Hat nicht geklappt. Das kann man doch sicher auch in StyleEdit irgendwo einstellen, oder?
@Wulfmin Ich habe dein Shop grad mal geprüft und gesehen, dass die Höhe nun mit 220px zu hoch ist. Die optimale Höhe in deinem Fall ist genau 200px, wenn die diese im StyleEdit im Header einstellst, verschwindet auch der schwarze Bereich unter den Kategorien. Damit die Farbe im Footer für die Links korrekt übernommen wird, musst du noch !important hinter die Farbe setzen. Code: #footer .nav > li > a:hover { color: #fff !important; }
Klasse Jetzt passt alles. Danke!!! Nur noch eine Frage zum Footer. Habe die Zeile Mehr über.. umbenannt in Informationen. Leider ist die Zeile etwas tiefer als die anderen 3. Wo kann man das ändern?
im ersten Bereich des Footers wird die Überschrift mit h4 gekennzeichnet, aber in den anderen Bereich ist diese nicht der Fall. Wenn du also die Überschrift ebenfalls mit h4 kennzeichnest, sollten die anderen Bereiche ebenfalls in der gleichen Position angezeigt werden. Für die 1. Spalte kann man das leider nicht direkt ändern, da man dann das h4 per CSS ändern oder im HTML entfernen müsste. Daher ist es einfacher die anderen drei Bereich im Content-Manager anzupassen und hier ebenfalls h4 einzufügen.
Hab jetzt nur noch ein Problem mit dem Header. Sobald ich die Startseite aktualisiere erscheint ganz kurz unter der oberen roten Navigation eine schwarze Kante vom Header. Anschl. verschwindet die wieder.
Hab die Überschrift zu Testzwecken mal in der 2 Footerbox auf Überschrift 2 und Schriftgröße 16 geändert. Bin mir aber nicht sicher ob das H4 ist. Ergebnis Text jetzt grau, etwas tiefer als in Box 1 und ein weißer Unterstrich. ???
@Wulfmin Die Überschrift 4 ist dann auch h4 im HTML, das ist im Editor so definiert, Überschrift 1 = h1 usw. Wegen dem kleinen schwarzen Balken probier mal 195px als Höhe für den Header. @bt012ss Es kann sein, dass er schon Styles hat, die das bereits setzen und somit greift das nur mit !important. Wir haben auch in einer Shopversion Styles für den Footer geändert, sodass diese bereits in einigen Shopversionen vordefiniert sind.
Danke Jungs Nun passt es im Footer auch. Hab alle Überschriften auf h4. Jetzt nur noch eine Kleinigkeit. Nachdem ich zB in der 2. Footerbox Kundenservice auf den Link Online Hilfe geklickt habe, wird dies so angezeigt.
Für die Schriftfarbe oder für den Hintergrund? Hier ein Vorschlag (als Eigenes CSS einfügen, da das mit reinen StyleEdit3 Einstellungen nicht geht): Code: .panel { .panel-body { ul, li { a { &:focus { color: #99000; //für Schriftfarbe background-color: #990000; //für Hintergrund } } } } } @bt012ss Zu Erklärung was !important macht: Normalerweise gibt es in CSS eine Vererbung von Styles, d.h. Styles von Elternelementen gelten auch für Kindelemente, wenn diese keine Styles besitzen, die die der Eltern überschreibt. D.h. auch um so genauer ein bestimmtes Element im CSS Selektiert wird, desto "stärker" ist dieser Selektor und überschreibt die Styles der "schwächeren" Selektoren. Einen Style Inline, also direkt am HTML-Element zu definieren, ist ohne !important die stärkste Art etwas zu selektieren und somit überschreibt ein Inline-Style alles was in einer CSS-Datei steht. Möchte man das jetzt aus irgendwelchen Gründen überschreiben, ohne den Inline-Style zu entfernen, oder ein in der CSS-Datei definierter Selektor kann nicht mehr durch einen noch stärkeren Selektor überschrieben werden, kommt !important ins Spiel. Dies bewirkt dann, dass alle anderen Anweisungen von anderen Selektoren überschrieben werden. Im optimalen Fall benutzt man !important eigentlich gar nicht, sondern versucht ersteinmal den Style mit einem stärkeren Selektor zu überschreiben. Ist dies nicht möglich, kann man !important verwenden. Ein inline definierter Style mit !important kann nicht mehr durch andere Anweisungen überschrieben werden und sollte daher nur im absoluten Notfall, falls nichts mehr hilft, verwendet werden. Ist man bei einem solchen Fall, kann man sich alerdings sicher sein, dass die HTML und CSS Struktur, die man da gebaut hat absolute Grütze ist.
Sobald ich mit der Maus über die obere Navigation einer Einzelkategorie gehe, wird unter dem Hover eine rote Kante angezeigte. Vermutlich ist das Hoverfeld nicht groß genug. Wo kann ich das einstellen?
Ich habe Probleme die richtigen Einstellungen für die mobile- und Tablet Portrait Ansicht im StyleEdit zu finden. Problem 1; Mobile Ansicht (siehe Screen 1 und 2) die Suche, der Warenkorb und das Kategorie Icon sind noch nicht an der richtigen Stelle. Die sollten sich schon im schwarzen Hintergrundbereich befinden, wie aktuell im StyleEdit angezeigt, müssten die noch ein Stück nach unten rutschen und der schwarze Hintergrundbereich müsste noch etwas nach unten erweitert werden, damit es gut aussieht. In Screen 2 sieht man dann wie es auf meinem Smartphone 5 wirklich aussieht. Die Suche ist völlig nach unten in den content gerutscht. Sieht also noch nicht so wirklich gut aus. Problem 2; Iconfarben (siehe Screen 1) Finde auch grad nicht, wo ich die Farben der beiden Icon (Lupe und Kategorie) auf weiss ändern kann. Aktuell sind sie noch grau. Passt aber nicht wirklich finde ich. Problem 3; Tablet Portrai Ansicht, (Screen 3) Auch in der Table Portait Ansicht, passen die Einstellungen leider nicht. Der Header ist zu hoch, der Warenkorb unten und die die Suche und die Kategorien sind erst Gar nicht zu sehen. Auch geht der content in die obere Kategorie über. Was bedeutet eigentlich Sticky und wofür dient diese Einstellung, zB. Suche Höhe Sticky. Im Internet stand nur bedeutet "angeklebt oder angeheftet". Nur in welchem Zusammenhang?
Wie nebenan schon erwähnt, das Logo ist zu groß. Ebenso die Gridanzahl für die Suche verringern. Beispiel für die Gridspalten klein -> Logo/Suche/Warenkorb = 6/3/3 oder 4/4/4 Das gleiche gilt für Gridspalten medium, solange verringern bis alles passt und am Ende eine Summe von 12 raus kommt. Das wären z.B. 8/2/2, das Menüsymbol wird im mobile Style nicht mitgerechnet.