Wer weiss rat?

Hallo zusammen.

Ich bin fast am verzweifeln.

ich möchte oben in der Navigation unser Logo auf die ganze breite haben.

Das ganze sollte wenn irgendwie möglich auf Desktop,Tablets und Mobile angepasst werden.

Leider bringe ich mit diesem Code auf der Desktopvariante mein Logo nicht in die Mitte des Top Navi? Irgendwie muss da doch der Befehl “center” noch rein?

Und auf der Mobilevariante ist es eine Katastrophe.

Ich weiss schon es fehlt der Code für die Anpassung aber wo muss dieser genau rein?

Bin euch wirklich für jeden Tipp und Rat Dankbar.

Meine Seite ist www.tutto-napoli-speciale.ch

Meine header.less sieht im Moment so aus…

.header-main {
    .logo-main {
      width: 30%;

      .logo–shop {
        .unitize-height(177, 16);
        .unitize-width(800);
left: 60%;
        img {
          width: 100%;
          height: auto;
        }
      }
      .logo–link {
        .unitize-height(177, 16);
        .unitize-width(800);
    left: 60%;
      }
    }

    .shop–navigation{
      width: 60%;
    }
  }

        .header–navigation {
            right: 7.5%;
        }

Auch wollte ich gestern noch den Warenkorb,Merkzettel und das Konto verschieben in die Top Navi aber das ging auch in die Hose und mein Templates wurde nicht mehr geladen.

Danke euch Profis vielmal für Hilfe wie ich den Code umschreiben muss.

Grüssli Chrigi

das ganze ist nicht mal so schnell erledigt, denn wenn das Logo über den ganzen Header geht verschieben sich auch der ganze “shop–navigation block-group” unter das Logo.

Und erschwert kommt noch dazu das es bei alles Ansichten passen muss.

1 Like

Ja das habe ich auch gemerkt.

Wie könnte man dieses realisieren?

Was sonst für mich auch eine Lösung wäre wenn das evtl. einfach zu lösen ist.

Mein Logo grösser und zentriert in die Mitte des Headers? 

Danke vielmal für eure Professionelle Hilfe…

 

Wäre es eine Alternative den Hintergrund in Italia Farben zu ändern und dann dein Logo zu Positionieren?

1 Like

Ja auch da bin ich dran.

Habe den Code vom alten Onlineshop aber geht nicht bin am versuchen so war er im Phpeepershop auf www.tutto-napoli.ch das ist unsere akueller Shop

.header-main {
background: linear-gradient(to right, #009356 41%, #FFF 41%, #fff 59%, #C73F4B 59%);
.container {
background:transparent;
}
@media (max-width:1200px) {
  .header-main {
    background: linear-gradient(to right, #009356 35%, #FFF 35%, #fff 64%, #C73F4B 64%);
  }
}
@media (max-width:767px) {
  .header-main {
      background: linear-gradient(to right, #009356 11%, #FFF 11%, #fff 30%, #C73F4B 30%);
  }
}
 

Nur mit einem Link wird das leider auch nichts…

.header-main {
background:url(/media/image/42/3b/b2/Logo_65-3x9-98.jpg)
.container {
background:transparent;
}
}

 

@Wolfsdraft‍

Hast Du eine Idee wie ich das mit der Italienfahne machen könnte  Undecided Thumb-Up

die Fahne als Hintergrund bekommst du schon mal so hin.

    background: linear-gradient(90deg, #008000 33%, #fff 33%, #fff 66%, #f00 66%);

Uwe

1 Like

schon über die ganze Breite?? Wow

Danke versuche ich morn. Und das Logo zentriert

Hi Uwe danke vielmals für Deinen Tipp. Super Tipp bin Dir sehr sehr Dankbar.

Habe es mal auf meiner Testsite gemacht… http://web321.122.hosttech.eu/shopware/

Hatt jetzt jemand noch so ein super Tipp wie ich nun mein Logo in die mitte des Italienwappen bringen könnte?

Ich muss es vergrössern das ist mir klar und das Suchfeld ausblenden.

Nur wie könnte ich das realisieren?

habe noch einen Code gefunden aber wie könnte ich das ganze zusammenbringen und dann das Logo noch im Header zentrieren?

.header-main { // Logo .logo-main { .logo–link { .unitize-height(45); // Anpassen der Höhe, Angabe in px } // Smaller logo for mobile viewports .logo–shop { .unitize-height(45); // Anpassen der Höhe, Angabe in px } } }

Danke vielmals Ihr seid super.

Gruss Chrigi

 

 

Also zum Thema zentriertes Logo habe ich zwei Plugins veröffentlicht, die gibt’s auch im Bundle. Einfach im Store mal „zentriertes Logo“ suchen.

Logo beginnend ab ipad breit grösser machen ist relativ simpel, vorraussetzung ist aber, dass das Logo selbst dann nicht zu breit ist(sonst wirds verzerrt):

@media (min-width:48em){
.logo–link img{
max-height: 80px;
height: 80px;
margin-top:-30px;
}
}

Das erhöht die Höhe von 50 auf 80 Pixel und schiebt das ganze einfach 30px nach oben :wink:
Bitte beachte aber, dass Du dann die Vergleichen Funktion ausschaltest, sonst wirds im Header zu eng (zumindest wenn du das Logo zentrierst).

Edit: waren zwei Tippfehler drin, so sollte es gehen

1 Like

@webdesignhoehne schrieb:

Also zum Thema zentriertes Logo habe ich zwei Plugins veröffentlicht, die gibt’s auch im Bundle. Einfach im Store mal “zentriertes Logo” suchen.

Logo beginnend ab ipad breit grösser machen ist relativ simpel, vorraussetzung ist aber, dass das Logo selbst dann nicht zu breit ist(sonst wirds verzerrt):

@media (min-width:48em){
.logo–link img{
max-height: 80px;
height: 80px;
margin-top:-30px;
}
}

Das erhöht die Höhe von 50 auf 80 Pixel und schiebt das ganze einfach 30px nach oben ;)
Bitte beachte aber, dass Du dann die Vergleichen Funktion ausschaltest, sonst wirds im Header zu eng (zumindest wenn du das Logo zentrierst).

Edit: waren zwei Tippfehler drin, so sollte es gehen

Hallo,

das verfolgt den responsiven Ansatz (von Shopware) aber nicht wirklich, wenn man einfach irgendwelche Bereiche so verschiebt und vor allem auch noch in Pixelwerten. Die sauberste Lösung ist der Code nun wirklich nicht. Oben em-Werte verwenden, unten Pixel-Werte Gasp.

Beste Grüße

Sebastian

1 Like

Danke vielmal für eure Hilfe.

@Sebastian‍ was heisst jetzt das für meinen Code.

Bin noch viel am lernen.

Auch habe ich mühe mit mehreren “befehlen” in der header.less oder allg. in den Dateien.

Wie ich das kann schreiben damit er alles so übernimmt.

Darum wende ich mich an euch Ihr seid da ja alte Hasen.

Danke vielmals.

Chrigi

 

@sschreier schrieb:

Hallo,

das verfolgt den responsiven Ansatz (von Shopware) aber nicht wirklich, wenn man einfach irgendwelche Bereiche so verschiebt und vor allem auch noch in Pixelwerten. Die sauberste Lösung ist der Code nun wirklich nicht. Oben em-Werte verwenden, unten Pixel-Werte Gasp.

Beste Grüße

Sebastian

em/rem kann man ja noch einsetzen. Die 48em sind Shopware Standard.
height: 50px; height: 3.125rem Somit rechnet man nur 3.125/50*80 und kennt auch den rem Wert 5rem danach.
Gleiches kann man natürlich auch für die 30 px anwenden, kommt 1.875rem raus.
Das obere Beispiel wäre demnach
@media (min-width:48em){
.logo–link img{
max-height: 80px;
max-height: 5rem;
height: 80px;
height: 5rem;
margin-top:-30px;
margin-top:-1.875rem;
}
}

@webdesignhoehne schrieb:

@sschreier schrieb:

Hallo,

das verfolgt den responsiven Ansatz (von Shopware) aber nicht wirklich, wenn man einfach irgendwelche Bereiche so verschiebt und vor allem auch noch in Pixelwerten. Die sauberste Lösung ist der Code nun wirklich nicht. Oben em-Werte verwenden, unten Pixel-Werte Gasp.

Beste Grüße

Sebastian

em/rem kann man ja noch einsetzen. Die 48em sind Shopware Standard.
height: 50px; height: 3.125rem Somit rechnet man nur 3.125/50*80 und kennt auch den rem Wert 5rem danach.
Gleiches kann man natürlich auch für die 30 px anwenden, kommt 1.8875rem raus.
Das obere Beispiel wäre demnach
@media (min-width:48em){
.logo–link img{
max-height: 80px;
max-height: 5rem;
height: 80px;
height: 5rem;
margin-top:-30px;
margin-top:-1.8875rem;
}
}

Wieso so? So steht das nicht in der Doku. Das versteht doch kein Mensch. Dafür gibt es doch die unitize-Methoden:

@media (min-width:@tabletViewportWidth){
    .logo-link img {
        .unitize-max-height(80);//?
        .unitize-height(80);//? Wieso max height wenn height im Anschluss gesetzt wird?
        .unitize-margin(30, 0, 0, 0);
    }
}

siehe auch:

https://developers.shopware.com/styletile/_variables-structure.html

und

https://developers.shopware.com/styletile/_mixins-unitize.html

1 Like

@steinsoftware schrieb:

@webdesignhoehne schrieb:

@sschreier schrieb:

Hallo,

das verfolgt den responsiven Ansatz (von Shopware) aber nicht wirklich, wenn man einfach irgendwelche Bereiche so verschiebt und vor allem auch noch in Pixelwerten. Die sauberste Lösung ist der Code nun wirklich nicht. Oben em-Werte verwenden, unten Pixel-Werte Gasp.

Beste Grüße

Sebastian

em/rem kann man ja noch einsetzen. Die 48em sind Shopware Standard.
height: 50px; height: 3.125rem Somit rechnet man nur 3.125/50*80 und kennt auch den rem Wert 5rem danach.
Gleiches kann man natürlich auch für die 30 px anwenden, kommt 1.8875rem raus.
Das obere Beispiel wäre demnach
@media (min-width:48em){
.logo–link img{
max-height: 80px;
max-height: 5rem;
height: 80px;
height: 5rem;
margin-top:-30px;
margin-top:-1.8875rem;
}
}

Wieso so? So steht das nicht in der Doku. Das versteht doch kein Mensch. Dafür gibt es doch die unitize-Methoden:

@media (min-width:@tabletViewportWidth){
.logo-link img {
.unitize-max-height(80);//?
.unitize-height(80);//? Wieso max height wenn height im Anschluss gesetzt wird?
.unitize-margin(30, 0, 0, 0);
}
}

siehe auch:

https://developers.shopware.com/styletile/_variables-structure.html

und

https://developers.shopware.com/styletile/_mixins-unitize.html

Hallo,

mehr als von steinsoftware beschrieben gibt es zu dem Thema auch nicht zu sagen. Genauso wäre es richtig. Ich will gar nicht wissen, wie der Code der Plugins von webdesignhoehne aussieht Grin.

Beste Grüße

Sebastian

1 Like

So passt es noch nicht ganz @steinsoftware‍ der top-margin ist negativ (sonst schiebt es das Logo nach unten und nicht nach oben), bis darauf sollte dein Beispiel aber passen.

max-height muss dazu gesetzt werden, da es mit 100% max-height sonst auch nur 50px hoch wäre ;)

 

1 Like

Besten Dank Jungs.

Nur bitte nicht noch streiten wegen meiner Frage.

Wie soll ich jetzt den Code schreiben in der header.less ?

Die Flagge habe ich ja schon ( finde ich mega cool)

Sind denn die Plugins notwendig damit mein Logo in die mitte kommt?

Dieses habe ich ja schon am funktionieren:

header-main {
background:linear-gradient(90deg, #008000 33%, #fff 33%, #fff 66%, #f00 66%);
.container {
background:transparent;
}
}

Jetzt der obengennante Code unten ran kopieren? Sorry meine ungewissheit.

Ist relativ neues Land für mich.

Bin euch wirklich dankbar für euren Support den Ihr leistet-

 

 

 

Wollte euch mein Erfolg mitteilen http://web321.122.hosttech.eu/shopware/

Bis jetzt bin ich für meinen Geschmack schon sehr sehr weiter gekommen.

Wie bringe ich nun mein Logo in die mitte der Flagge in den Weissen Hintergrund?

Ist das eine grosse Herausforderung?

Danke für eure weiteren Tipps. 

Grüsse Chrigi