Logo anpassung mittig - Mobile

Shopware 5 Themes & Design
1

Hallo zusammen =)

Ich möchte gern das Logo anpassen, damit es in der Mobile-Version (auch Landscape) mittig angezeigt wird. Derzeit ist es ja nach links ausgerichtet.

Auch soll es etwas größer dargestellt werden als bisher. Um folgende Webseite geht es: www.steinemann-shop.de

 

Der Code in der “header.less” schaut derzeit so aus:

.header-main {
background:#571234;
.container {
background:transparent;
.entry--search .main-search--form .main-search--field {
    background: #f5f5f5;
}
}
}

// Smartphone
.header-main {
  .logo-main {
    .logo--link, .logo--shop {
      .unitize-height(45, 16); // Logohöhe = 40px
	  text-align: center;
    }
  }
}

// Smartphone Landscape
@media screen and (min-width: @phoneLandscapeViewportWidth) {
  .header-main {
    .logo-main {
      .logo--link, .logo--shop {
        .unitize-height(65, 16); // Logohöhe = 50px
      }
    }
  }
}

// Tablet
@media screen and (min-width: @tabletViewportWidth) {
  .header-main {
    .logo-main {
      .logo--link, .logo--shop {
        .unitize-height(60, 16); // Logohöhe = 60px
      }
    }
  }
}

// Tablet Landscape
@media screen and (min-width: @tabletLandscapeViewportWidth) {
  .header-main {
    .logo-main {
      .logo--link, .logo--shop {
        .unitize-height(80, 16); // Logohöhe = 80px
      }
    }
  }
}

// Desktop
@media screen and (min-width: @desktopViewportWidth) {
  .header-main {
    .logo-main {
      .logo--link, .logo--shop {
        .unitize-height(80, 16); // Logohöhe = 100px
      }
    }
  }
}

.header-main { .top-bar--navigation .navigation--entry, .header-main .top-bar--navigation .navigation--link {
    color: #f5f5f5;
    cursor: pointer;
}
}


.entry--search .main-search--form .main-search--field {
    background: #f5f4f5;
}

Um es mittig zu bekommen, habe ich es schon versucht mit “text-align: center;” bzw. mit dem “punkt” davor “.text-align: center;” , aber gibt keine änderungen.

Ein eigenes Template, mit eigener “all.less” ist vorhanden und auch verlinkt. Bei jeder änderung leere ich den Cache, führe Themes Kompilieren durch und drücke auch STRG+F5.

2

Beschäftige Dich mit CSS / LESS. 1000 Wege führen nach Rom.

Du könntest bspw. dem folgenden DIV die Klasse block wegnehmen und der Klasse logo–shop margin:auto geben.

1 „Gefällt mir“
3

Hey, danke für deine Antwort.

Ich bin dabei mich mehr und mehr mit LESS / CSS zu beschäftigen - aber aller anfang ist schwer.

Ich habe schon einiges hinbekommen, aber bei dem Thema hier komme ich leider nicht so weiter.

 

Würdest du mir eventuell bitte den kompletten Code darstellen können?

Also so wie ich es einfügen müsste bzw. welche Datein?

4

Da wo Du text-align: center; eingesetzt hast, schreibe margin:auto rein.

Die Zeile

müstest Du in den .tpl Datein finden und mit 


 

ersetzen.

Ansonsten arbeite Dich hier mal ein: https://developers.shopware.com/designers-guide/
1 „Gefällt mir“
5

Vielen lieben Dank!

6

@media screen and (min-width: @desktopViewportWidth) {
  .header-main {
    .logo-main {
      .logo–link, .logo–shop {
        position: relative;
        float: right;
        margin-right: 5px;
        z-index: 999;
      }
    }
  }
}

–this change happens only for DesktopView, and other views (tablet, smartphones- are not affected) so it works well for me :slight_smile: