Tag Archives: CSS

Von ganz oben nach ganz unten: Nachdem wir vor kurzem viel über den Header gelernt haben, möchte ich heute einmal einen Blick mit euch auf den Footer werfen. Ein ansprechend gestalteter Footer, der in allen Ansichten des Shops gut dargestellt wird, gehört zu einer guten Shopgestaltung einfach dazu.

Häufig verkommt dieser allerdings zu einer Ansammlung von Links oder wird mit zu vielen Bildern überladen. Um diese – und noch andere häufige Fehler bei der Gestaltung des Footers – möchte ich mich mit diesem Tutorial kümmern

Continue reading →

Der Header ist das Aushängeschild eines Onlineshops. Ist dieser wenig ansprechend gestaltet oder mit Informationen überfrachtet, so ist ein potenzieller Kunde schnell wieder weg. Um einen professionellen Eindruck zu hinterlassen, ist ein durchdachter Header Pflicht.

Da wir im letzten Tutorial die wichtigsten Begriffe und Seitenelemente kennen gelernt haben, möchte ich heute zeigen, was man im StyleEdit 3 alles mit dem Header anstellen kann.

Ich möchte zudem auch die häufigsten Fehler aufzeigen und Lösungen anbieten, wie sich diese Probleme vermeiden lassen, damit die Darstellung des Headers nie kaputt aussieht. Außerdem möchte ich euch ein paar Tipps und Tricks zeigen, um den Header möglichst so zu gestalten, wie ihr ihn euch vorstellt.

Ich werde meine Beispiele möglichst so beschreiben, dass sie für alle drei Basisstyles im StyleEdit 3 durchführbar sind. Sollte es style-abhängige Einstellungen geben, werde ich bei diesen darauf hinweisen.

Continue reading →

Nachdem wir im letzten Artikel zum Thema StyleEdit 3 die wichtigsten Begriffe geklärt haben, wird es heute ein wenig technischer. Da sich dieser Artikel auf den vorherigen bezieht, empfehle ich, diesen vorab zu lesen.

Wie bereits im letzten Artikel angesprochen verwenden wir im Honeygrid-Template die Technologie – oder besser das Gerüst – “Bootstrap” und haben so die Möglichkeit auf sogenannte CSS-Präprozessoren zurückzugreifen, welche die gestalterischen Aufgaben erheblich erleichtern können. Ein Präprozessor kann Aufgaben erledigen, bevor es um die eigentliche Arbeit geht.

In unserem Fall bedeutet das, dass der Präprozessor schon etwas “Mathe machen” und Styles aus Einzelteilen zu einem Gesamten zusammensetzen kann, bevor wir diesen das erste Mal ausliefern. Er kann auch, wenn irgendwo tief in den Styles z.B. steht “benutze hier die Hintergrundfarbe” oder “verwende die Breite des Hauptinhalts”, diese an der entsprechenden Stellen auslesen und dann passend einsetzen.

Um wiederkehrende Werte für Farben, Höhen, Breiten und Abstände nicht jedes Mal neu schreiben zu müssen und den Aufwand zu minimieren, sollte sich an diesen Werten einmal etwas ändern, verwenden wir zahlreiche Variablen, in denen die benötigten Werte hinterlegt sind. Diese Variablen werden anschließend erst beim Erstellen des final ausgelieferten CSS in die richtigen Werte übersetzt.

Continue reading →