Brauche bitte Eure Hilfe bei Header- und Navianpassung

[DCP2018]

Mit contain oder cover macht er leider nicht. Da bringt er mir wieder kein Header-Bild.

Ich habe das Banner mal auf 1800x325px formatiert, in die Mediathek geladen und dann in der Header.less den neuen Bildpfad eingetragen, hochgeladen und danach cache geleert. Jetzt habe ich zumindest die richtige Breite und es läuft auch responsiv. Aber die Höhe ist nicht passend.

Gibt es noch eine andere Lösung? Kann ich den Bereich Background nicht direkt auf die Größe (z.B. 1800x325px) festlegen?

Interessant auch, der Footer ist ja eine tpl und das Bild dort hat eine Auflösung von 3162 x 496px und ist responive und eingepasst von shopware. Warum macht es das nicht im header? Evtl. doch eine tpl erzeugen und einsetzen? Kann mir zwar nicht vostellen, dass es daran liegt, aber vielleicht gibt es einen Denkanstoß für eine passende Lösung!

[DCP2018]

Hier mal der Link zu einer Vergleichswebsite mit Shopware, wo es mit dem Header funktioniert.

Wyvern Crafts

Evtl. werdet ihr beim Untersuchen der dortigen Website schlauer aus den Daten. Mir schwirrt dabei der Kopf.

Mir ist auch aufgefallen, dass es ggf. später Sinn machen dürfte, wenn ich das Suchfeld an einer anderen Stelle im Header platzieren würde. Aber eines nach dem Anderen!

[DCP2018]

Also ich habe mir das bei mir ( http://shop.darkcrypt.de/ ) nochmals alles genauer angeschaut und mich stören ganz massiv einige Dinge, die ich nun bald gelöst haben möchte:

1. Header-Background ist nicht in der richtigen Höhe angezeigt.
2. Search-Bereich sollte links sitzen und nicht mittig, also da wo derzeit DemoShop-Logo ist
3. Das DemoShop-Logo soll gar nicht vorhanden sein
4. Der Bereich Service/Hilfe geht über die ganze Seite, das sollte nicht sein. Optimal wäre ein kleines Kästchen oben rechts als Dropdown
5. Die Bereiche Merkzettel (Herzchen), Mein Konto und Warenkorb sollten unten rechts sein (denke, dass ist auch automatisch der Fall, wenn der Headerbackground die richtige Höhe mal hat)

So wie ich das sehe, muss ich damit mehrere less-Dateien schreiben und hochladen, richtig?

Hatte mich bezüglich Search- und Logo verschieben mal mit dem Post beschäftigt:

https://forum.shopware.com/discussion/27150/logo-und-suchfeld-verschieben-responsive/p1

Daraus werde ich aber nicht schlau. Mir wird einfach nicht klar, in welche Less ich welchen Code nun wie schreiben muss für die Searchverschiebung. Die Löschung für die Demo-logo Datei geht da gar nicht hervor. Und auch der nette Hinweis auf die .header-main .logo-main .logo–shop .shop–navigation .entry–search bringt mich nicht weiter. Außerdem muss man doch bestimmt die All.less wieder anpassen. Warum ist die Headerbearbeitung in Shopware eigentlich so kompliziert und schwer, wenn alle anderen Bereich so absolut easy und verständlich sind? Ich verstehe es einfach langsam nicht mehr. Den Header individuell anzupassen ist doch heute mit einer der wichtigsten Funktionen. 

HHHHHhhhhhhhiiiiilllllllfffffffeeeee bitte, bitte, bitte!

 

[BestShopPossible]

Mir wird einfach nicht klar, in welche Less ich welchen Code nun wie schreiben muss für die Searchverschiebung.

Das obliegt vollkommen dir. Sollte natürlich logisch aufgebaut sein.

 Die Löschung für die Demo-logo Datei geht da gar nicht hervor.

 Möchtest du dein eigenes Logo verwenden? Dann guck dir mal die Theme-Einstellungen an. Wenn du gar kein Logo darstellen möchtest, solltest du den entsprechenden Block anpassen.

Warum ist die Headerbearbeitung in Shopware eigentlich so kompliziert und schwer, wenn alle anderen Bereich so absolut easy und verständlich sind?

Naja auch nicht komplizierter als andere Bereiche die man mit HTML(Smarty) und CSS(less) Kenntnissen anpassen muss. 

Den Header individuell anzupassen ist doch heute mit einer der wichtigsten Funktionen. 

Da bin ich klar anderer Meinung #DSGVO. 

HHHHHhhhhhhhiiiiilllllllfffffffeeeee bitte, bitte, bitte!

@simkli  hat dir schon viel geholfen. Lies dir den ersten Post von @simkli noch mal durch. Ansonsten:

HTML Tutorial

CSS Tutorial

PHP Template Engine | Smarty

http://www.lesscss.de/

Frontend Guides

und auch Schulungen | Shopware

[DCP2018]

@BestShopPossible, erstmal danke für die ganzen Links, damit beschäftige ich mich dann mal intensiv am WE, wenn ich mehr Zeit dafür habe. Beim Überfliegen scheinen die mir aber wirklich weiter zu helfen.

Simkli ist große Klasse und seine Hilfe war und ist auch gold wert. Ihm danke ich dafür auch. Keine Frage. Das stand auch nie ihm Raum, dass ich dafür nicht dankbar bin. Genau so sollte es ja auch im Forum sein - hilfreiche Unterstützung. Daher nochmals Danke und Top an Simkli.

@BestShopPossible zu meinen einzelnen Punkten:

zu 1. Klar obliegt es mir, da ich es auch ändern möchte. Arbeite ja auch intensiv daran seit Wochen! Und Dank Simkli bin ich auch schon deutlich weiter. Der Developer-Guide ist da bestimmt sehr hilfreich, aber leider nur in Englisch verfügbar (habe jedenfalls keine deutsche Version bisher gefunden) und damit teilweise für mich nicht nachvollziehbar (wegen Fachbegriffen im Englischen), auch mit einem Übersetzer nicht, weil die halt stumpf übersetzen und nicht inhaltlich. Aber ich werde dran bleiben und weiter forschen dank Deiner Links!

zu 2. Ich möchte das Logo löschen, kann das aber nicht in der Theme-Konfi finden. Habe aber ggf. einen anderen Ansatz, den ich erstmal ausprobieren möchte. Gedanke kam mir durch die Rücksetzung des Logos im Theme-Konfi-Bereich, was vesehentlich passierte. Nehme aber gerne weitere Hilfestellungen dazu an und bin dafür auch dankbar.

zu 3. War nicht auf html oder CSS bezogen, sondern auf die Einstellmöglichkeiten innerhalb Shopware z.B. im Theme-Konfi-Bereich. Etwas unkonkret von mir ausgedrück, sorry dafür!

zu 4. Was soll die Deutsche Datenschutz Grundverordnung damit zu tun haben, wenn man seinen eigenen Headerbereich individuell anpassen mag? Zumal, wenn ist es die EU-DSGVO seit dem 25.05.2018, aber die regelt das auch nicht. Sonst dürfte auch kein Websiteprogramm/Hoster das möglich machen, davon abgesehen, dass es dann auch gar nicht machbar sei dürfte, auch nicht durch die Hintergrundarbeit via Umprogrammierung.
Wordpress, Joomla, Piwigo, Woocommerce Germanized, etc. z.B. sind da super simple und absolut rechtskonform.
Reicht doch schon, wenn man die Möglichkeit in der Theme-Konfi einbaut oder gar in der Einkaufswelt. Dort kann man die unteren Banner und alles andere ja auch passen einstellen. Wir reden hier nicht von Sachen wie Cookie-Hinweisen, AGB-Annahmen, etc. - das ist klar, die sind in Deutschland ein Mußbereich. Und selbst die kann ich in Shopware beeinfluss und sogar abschalten - ist dann halt mein Rechtsproblem im Klagefall, da mein Shop und meine Einstellungen und meine Daten, blablabla…

Der Gedankengang bzw. Hinweis auf die DSGVO (EU-DSGVO) geht in die völlig falsche Richtung und den würde ich hier mal klar ausschließen, da er niemandem hierbei weiter hilft!

Anmerkung zum Schluss:
Ich werde mich jetzt auch nochmals bzgl. Plugins dazu schlau machen, da hatte ich bei einer Websuche nach passenden Lösungen schon einige gefunden und mir die Links gespeichert, die das angeblich alles machbar machen sollen. Noch kann ich bei mir da nicht viel kaputt machen und halt ausprobieren, bis es passt und gelöst ist.

Grundlage eines Forums:
Hilfestellung für Hilfesuchende und Plattform zum Wissenaustausch, auch Informationsquelle für Entwickler eines Firmenproduktes zur Verbesserung und/oder Erweiterung nach entsprechenden Kundenaufrufen. Gleichfalls eine Disskussionplattforum zur gemeinsamen Klärung vorab genannter Punkte unter dem Aspekt des freundlichen Miteinanders. Alles andere kann man auf FB machen und selbst die arbeiten an entsprechenden Veränderungen!

Wer mir trotzdem helfen mag, der ist herzlich willkommen! Ich freue mich über jede Hilfe und bin genau deswegen in das Forum gekommen! 

Ach ja, und wer mal Hilfe braucht in Sachen Photoshop oder AfterEffect oder Airbrushdesign (privat) oder Fragen im Versicherungswesen oder Datenschutzverordnung (beruflich) hat, oder in Sachen Vereinswesen sowie Ehrenamt und Gememinnützigkeit, Formbau, Polsterwaffenbau oder Kulissenbau (nebenberuflich) der kann sich z.B. gerne an mich wenden, weil das sind meine Fachbereiche!

 

 

[DCP2018]

So, ich habe jetzt mal einiges ausprobiert.

1. für das Logo einfach eine transparente PNG.Datei hochgeladen und in den Themes hinterlegt. Die Datei ist 50x50px groß

2. Mein Bannerbild für den Background auf 2000x363px geändert und hocgeladen und in der header.less neu verlinkt. -> Desktop damit im Header-Background top ausgefüllt, wie ich es wollte. Leider nicht responsive, aber Gut, kann man ggf. später auch noch lösen.

3. Die Header.less wie folgt angepasst:

   .header-main{
   background: url(„http://shop.darkcrypt.de/media/image/3a/34/6c/BannerDCP12000.jpg“ ) repeat;
   }
   .header–navigation{
   background: none !important;
   }

   .header-main {
   .logo-main {
   .logo–link, .logo–shop {
   // Smartphone
   .unitize(height, 40); // Logohöhe = 40px

      // Smartphone Landscape
      @media screen and (min-width: @phoneLandscapeViewportWidth) {
        .unitize(height, 60); // Logohöhe = 60px
      }
   
      // Tablet
      @media screen and (min-width: @tabletViewportWidth) {
        .unitize(height, 60); // Logohöhe = 60px
      }
   
      // Tablet Landscape
      @media screen and (min-width: @tabletLandscapeViewportWidth) {
        .unitize(height, 80); // Logohöhe = 80px
      }
   
      // Desktop
      @media screen and (min-width: @desktopViewportWidth) {
        .unitize(height, 310); // Logohöhe = 310px
      }
    }
   

   }
   }

   .entry–search {
   .unitize(font-size, 8);
   position: absolute;
   left: 90%;
   top: 275px;
   margin-right: 10%;
   background: #fff;
   padding: 0;
   border: 0 none;
   width: 50%;

        .entry--trigger { display: none }
   

   }

   .logo–shop {
   .unitize-height(50, 16);
   width: 82%
   }

Dadurch zumindest das Searchfeld nach unten verschoben. Nach links funktioniert irgendwie nicht, egal ob ich nun den Bereich left oder padding ändere oder nicht. Es bleibt immer mittig.

4. im Bereich less die modules.less geändert auf:

   @import „_modules/header“;
   @import „_modules/entry–search“;
   @import „_modules/.logo–shop“;

Soweit mein heutiger Stand der Eigenforschung und Probiererei!

Bleibt also nur noch:

1. Searchfeld nach links zu verschieben unterhab des transparenten Logos
2. den Header-Background responsive zu machen
3. den Balken von Service/Hilfe-Dropdown-Menü so einkürzen, dass er nur noch bis über das Merkzettel-Herz geht von rechts gesehen
4. sollte ich es rausfinden, dann das transparente Logo samt Link auf die Shop-Homesite rauslöschen aus dem Header und dafür das Searchfeld nach oben links bringen (dann fällt Punkt natürlich raus)

Wünsche eine erholsame Nacht!

Aktueller Stand, bis es morgen oder so weiter geht, wie immer unter:

Darkcrypt-Onlineshop

[malzfons]

Das hier wäre genau deine Lösung mit ein paar Mausklicks:

https://store.shopware.com/graph42792222815/graphics4everyone-header-helfer-5-ultimate.html

 

[DCP2018]

HI malzfons,

das liest sich zumindest ziemlich genial. Der Preis ist allerdings auch heftig für ein Plugin. Aber die bieten eine komplette 30-Tage-Testversion an, mit welcher ich mal schauen werde. Sollte es für mich passen, dann werde ich mir das Plugin wohl kaufen, wenn es hält, was es verspricht. Die Bewertungen sind ja eher gemischt, gerade bzgl. dem Support. Aber wenn es wirklich so einfach ist, wie die es vorstellen, dann braucht man ggf. auch keinen Support.

Vielen, vielen lieben Dank malzfons, ggf. bist Du mein Retter. Gibt doch noch geniale Leute hier. Ich informieren Euch, wenn ich erfolg damit hatte.

[hds]

Ich würde mich an deiner stelle einfach einwenig mehr in Shopware einarbeiten, Hilfe und Super Tipps hast du schon bekommen. Das du das auch kannst sieht man doch schon auf deiner Website.

Im Backend unter Einstellungen / Theme Manager öffnen ( oben rechts Einstellungen anklicken und bei CSS Source Map erstellen Haken setzen, speichern und Theme kompilieren ).

Im Frontend mit F12  Entwicklertools aufrufen, den Bereich den du ändern willst mit rechtsklick und dann auf Untersuchen und schon wird dir unten rechts die less Datei angezeigt. Hier kannst du ändernund anpassen ohne etwas kaputt zumachen. Wenn es dir dann gefällt kannst du das dann in deinem Thema übernehmen. Eigentlich ist das ganz einfach.

Viel Spaß

 

[DCP2018]

@hds‍ vielen Dank für die Info und Kurzanleitung. Dann kann ich mich damit auch mal an meinem privaten Rechner versuchen und austoben. Wenn ich das dann so hinbekomme, dass wäre natürlich der Hammer.

Und ja, ich bin nicht ganz doof ;), stehe aber manchmal in solchen Sachen einfach auf dem Schlauch und brauche nur den richtigen Anstupser. Den habe ich nun dank Dir und auch allen Anderen. Danke dafür vielmals!

Halte Euch dann weiter auf dem Laufenden! 

Ps.: Ich gehe gerade auch die gesamte Dokumentation und auch die Tutorials nach und nach durch. Bei der Menge dauert das natürlich etwas, aber die Sachen sind eigentlich gut und lkeicht verständlich bisher. Schön ist, ich habe keinerlei Zeitdruck und wenn der Shop erst 2019 richtig steht und dann voll aktiv online geht, dann ist dem so.

[DCP2018]

Hallo zusammen,

also das Plugin (s. o. Link von malzfons) habe ich als Testversion installiert mit dem Effekt, dass die Testversion nicht funktioniert. Man kan wunderschön die Sachen einzeln auswählen und anpassen und dann am Ende alles speichern, aber eine Auswirkung hat das nicht. Man hätte es auch sein lassen können - vielleicht ändert sich das erst, wenn man die Vollversion gekauft hat, was mir dann doch zu teuer ist. Mein eigenes Fazit: wer das Plugin kauft, wirft Geld aus dem Fenster und Testversion ist für den A…!

Nun zu dem genialen Tipp von @hds‍ - das war pures Gold wert dieser Tipp. Wenn man sich erst mal daran gewöhnt hat, dass man auch alle unterbereihce sich anschauen muss und dann den gesamten Weg immer in die Header.less schreiben muss für die einzelnen Bereiche, dann kann man damit echt super schnell und leicht alles anpassen, was man möchte.

Mein derzeitiges Ergbnis könnt ihr ja live auf der Website sehen http://www.shop.darkcrypt.de - ich bin soweit mit der Basis erstmal zufrieden, das an Table und Handy nochmals feinabgestimmt im responsive Verhältnis und es passt. Habe sogar einiges mehr noch angepasst, als ich eigentlich hier mal geschrieben hatte. Mir gefällt es.

Wer aber noch einen Tipp oder eine Anregung hat - bin ganz Ohr und offen dafür!

@hds‍ - 1.000 Dank, Du bist mein persönlicher Held! Evtl. poste ich nochmals die Header.less-Daten für die jeweiligen Anpassungen als eine Liste für die, die nicht lange tüfteln wollen! Wenn das hier ok wäre für alle?

[malzfons]

Passt gut. Der suchbutton ist nur nach unten gewandert. Bei Handy Ansicht.

[hds]

Das sieht doch schon nach was aus. Aber du musst natürlich deine less Datei um die einzelnen Viewports anpassen, sonnst pasiert das was Malzfons geschrieben hat.

// Breakpoints
@phoneLandscapeViewportWidth: 30em; // 480px
@tabletViewportWidth: 48em; // 768px
@tabletLandscapeViewportWidth: 64em; // 1024px
@desktopViewportWidth: 78.75em; // 1260px

hier noch ein Beispiel

@media screen and(min-width: @tabletViewportWidth){
hier machst du deine Anpassung die nur für diese Ansicht bestimmt ist.
}