Nach Vergrößerung Headerhöhe seitliche Navigation nach oben verschoben

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.

 

würde gerne helfen aber ohne Link zum Shop nicht möglich!

 

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?

 

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?

 

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.

???

 

Nabend Till, warum muß er und ich nicht?
Bei mir geht´s ohne !important

 

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.

 

Hätte da gern stattdessen den Farbwert 990000.

 

Verstehe, da wo dieser Befehl steht wird also das Gesetz geschrieben, danke für die Aufklärung.

 

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.

 

Merci

 

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.