Logo und Suchfeld verschieben (Responsive)

Hallo Zusammen, Kleine Frage an euch. Wo (vermutlich in einer .less) kann ich bei Responsive Theme das Logo und Suchfeld verschieben? Mein Wunsch ist das Logo ein wenig höher und das Suchfeld weiter nach rechts unter den “Mein Konto” Button. Ich danke euch. Grüsse Marco

Das was Du suchst ist in der header.less zu finden: .header-main .logo-main .logo–shop und .shop–navigation .entry–search Gruß Frank

und wie bekomme ich das Suchfeld weiter nach rechts? Kleiner machen und links mehr Platz bekomme ich wohl hin. Aber irgendwie wandert die nicht weiter nach rechts … Richtung Merkzettel :frowning:

[quote=“ffinkelm”]Das was Du suchst ist in der header.less zu finden: .header-main .logo-main .logo–shop und .shop–navigation .entry–search Gruß Frank[/quote] Hallo Frank. Erstmal danke für die schnelle und freundliche Antwort.:thumbup: Ich weiss, ist ein ein wenig viel verlangt: Da ich nicht ganz der Profi bin in dem, die Dateien habe ich, aber welche Werte sind genau um das Logo und die Suche zu positionieren? Sorry, ich weiss das solche Anfragen mühsam sind… :quite: Danke dir (euch) für eure Hilfe. Gruss Marco

[quote=„SWISSMonopol“] Da ich nicht ganz der Profi bin in dem, die Dateien habe ich, aber welche Werte sind genau um das Logo und die Suche zu positionieren? Marco[/quote] Hallo Marco, Installiere dir mal Firebird, das gibt es als Plugin für Chrome und Firefox, mit diesem kannst du die Werte erst mal live im Browser hantieren so das du das Ergebnis sofort siehst. Hier ist es ein bisschen erklärt: templates-und-design-f14/firebug-richtig-nutzen-t485.html#p2764 Dann habe ich hier noch ein zwei Links für CSS/Less: http://wiki.selfhtml.org/wiki/Startseite http://www.lesscss.de/#docs Auf langer Sicht ist es immer besser selbst ein wenig mit Materie zu beschäftigen. Auch ich müsste es erst in Testshop ausprobieren, bevor ich eine Antwort geben könnte, was aus Zeitmangel nicht immer zeitnah möglich ist.

Suchfeld in der header.less, den Wert “left:3%;” ändern und schon wandert das Suchfeld: // Search entry .entry--search { .unitize(font-size, 14); position: absolute; left: 3%; margin-right: 10%; background: #fff; padding: 0; border: 0 none; width: 50%; Das Logo: .logo--shop { .unitize-height(50, 16); width: 82% Unabdingbare Werkzeuge sind Chrome (hat die Entwicklerwerkzeuge integriert) und ein vernünftiger Texteditor (z.B. Notepad++). CSS Source MApping sollte aktiviert sein, siehe: Theme Manager Gruß

Hallo zusammen Erstmals besten Dank für eure detaillierten Antworten. Ich werde dies heute Nachmittag mal ausprobieren und eine Rückmeldung geben. Besten Dank. Gruss mMrco

ich komme damit immer noch nicht klar :frowning: Hab nen Logo 583 × 55 px Suchfeld hab ich mit „left: 30%;“ nach rechts verschoben. Soweit ok wenn ich jetzt mit .logo--link { .unitize-height(55, 16); das Logo größer mache, dann klappt das bei Firefox und IE. Im Chrome und Safari bleibt das Logo klein. Wenn ich, wie im Beispiel oben, noch zusätzlich width: 82% oder width: 100% Irgendwo hab ich nen Problem :wink: reinschreibe, dann ist es bei allen wieder klein…nirgendwo mehr gross :sunglasses:

[quote=“ffinkelm”]Suchfeld in der header.less, den Wert “left:3%;” ändern und schon wandert das Suchfeld: // Search entry .entry--search { .unitize(font-size, 14); position: absolute; left: 3%; margin-right: 10%; background: #fff; padding: 0; border: 0 none; width: 50%; Das Logo: .logo--shop { .unitize-height(50, 16); width: 82% Unabdingbare Werkzeuge sind Chrome (hat die Entwicklerwerkzeuge integriert) und ein vernünftiger Texteditor (z.B. Notepad++). CSS Source MApping sollte aktiviert sein, siehe: Theme Manager Gruß[/quote] Ich bins nochmal. Nochmals ein Dank für die Antwort. Das Logo mit “left:3%;” nach rechts zu verschieben geht schon, wie auch das Logo. Es sind nur 2 Punkte die ich nicht hinbekomme: 1. Das Suchfeld nach UNTEN zu verschieben (Ziel währe unter Merkzettel, Login etc) 2. Das Logo um ein paar Millimeter nach OBEN zu verschieben. Geht dies überhaupt? Beste Grüsse Marco

Sicher geht das, da müsstest Du aber noch Werte hinzufügen um eine Verschiebung nach unten zu bekommen, z.B. „top: 10%“. Aber da bin ich auch nicht so sicher, wie sich das auf das Responsive Design auswirkt, ist auch neu für mich. Das muss man dann eben mal ausprobieren. Gruß

Um das Suchfeld unter Mein Konto etc. zu bekommen musst du in die Template Dateien(n) eingreifen. Alleine mit CSS bzw. LESS geht es so nicht bzw. nicht sauber. Allerdings wäre der header dann hier relativ hoch, wenn das Suchfeld dann noch unter Mein Konto & Co liegt. Alternativ wenn du es per CSS machen willst, verpassen dem Suchfeld top:60px und left:60%; Für die Tablet Ansicht usw. musst du die Werte entsprechend nochmal anpassen.

Hallo kayyy, mich interessiert an dieser Stelle der andere angefragte Teil: Wie bekommt man das Logo ein Stück nach oben geschoben? Ich habe schon einiges probiert, allerdings bekomme ich das Logo nicht nach oben verschoben. Beste Grüße Mario

Hat sich gerade erledigt. Habs selbst gefunden. Mittels Padding für .logo–main funktioniert es.

hat denn auch jemand noch ne idee, warum mein Logo im Safari und Chrome klein angezeigt wird? siehe Post auf 1. Seite

[quote=“VolkerSchröder”]hat denn auch jemand noch ne idee, warum mein Logo im Safari und Chrome klein angezeigt wird? siehe Post auf 1. Seite[/quote] Ein Link zur Seite würde helfen :wink:

@kayyy aber gerne doch :slight_smile: http://www.mydog-shop.de/sw5/mytraining/?p=1

dann versetzt es jetzt nach unten… Wie hast Du das mit den 50% ausprobiert? Mit CSS bei SW4 war das irgendwie simpler…hier verstehe ich die Zusammenhänge noch nicht… Ich kann irgendwie in Firebug auch nicht erkennen welches .logo-main oder .shop–navigation ist…und warum z.B. eine Breite von 50% helfen soll. :frowning: Kannst Du mir das erklären?

[quote=“kayyy”]Um das Suchfeld unter Mein Konto etc. zu bekommen musst du in die Template Dateien(n) eingreifen. Alleine mit CSS bzw. LESS geht es so nicht bzw. nicht sauber. Allerdings wäre der header dann hier relativ hoch, wenn das Suchfeld dann noch unter Mein Konto & Co liegt. Alternativ wenn du es per CSS machen willst, verpassen dem Suchfeld top:60px und left:60%; Für die Tablet Ansicht usw. musst du die Werte entsprechend nochmal anpassen. [/quote] Hallo kayyy Besten Dank für deine Antworten und Hilfestellung.:thumbup: Bin sehr froh darüber.:thumbup: Das mit der Suche verschieben habe ich hin bekommen. Meine TEST Seite: http://test.swissmonopol.ch/ Das Logo ist ja im “.header-main .header–navigation”. Dort ist ja das Logo Zentriert (oben/unten) im Container. Hoffe ich kriege das auch noch hin dass das Logo am oberen Rand des Containers ist und nicht mittig zentriert… :frowning: Gruss Marco

[quote=“greenlabs”]Hat sich gerade erledigt. Habs selbst gefunden. Mittels Padding für .logo–main funktioniert es.[/quote] Hallo greenlabs Kannst du dies eventuell kurz genau erläutern? Genau diese Problem besteht bei mir noch. Das mit der Suche geht nun. Danke dir und Gruss Marco