mate header logo proportionale größe, wie...?

**kwiesatz** · 12.05.2020, 08:30

hallo...

ich möchte dem logo beibringen, dass es die größe proportional verändert...
...ich weiß, ich weiß, oder auch nicht, dass ich das im artikel "mate elements - header - logo" einstellen kann, aber ich scheine zu blöd dafür...
...wenn ich "proportional" auswähle, besteht contao darauf, dass ich noch größenangaben mache und dann ist es eine fixe größe...

es handelt sich um https://bouldershirts.org
das erste logo past noch einigermaßen, wobei sich aufm handy die navigation drüber schiebt...
...und das weiße logo beim runterscrollen passt gar nicht...

habe contao 4.9.2
und imho alles versucht, was an einstellungen einzustellen war...

...bin noch ganz arg anfänger, also habt erbarmen mit mir bitte...<3

**mlweb** · 12.05.2020, 09:21

Das musst Du mit css machen. Die Bildgröße beim Artikel sagt Contao nur in welcher Größe das Bild berechnet werden soll. Den Rest macht man mit css.

Derzeitiger Stand bei Dir - das grüne Logo wird in einer stolzen Größe von 3000x600px verwendet, das weisse in einer Größe von 800x85px.
Begrenzt werden die Logos im CSS durch die zur Verfügung stehende Höhe. Das ist z.B. für Viewports bis 767px für das grüne Logo diese Anweisung

Code:

.brand-logo .ce_image:not(.fixed-nav) img {
    max-height: 80px;
    padding: 0;
}

und für das weisse Logo diese

Code:

#header .mod_mateNavbar .nav-wrapper .brand-logo .ce_image.fixed-nav img {
    max-height: 80px;
}

Reduzierst Du diese maximale Höhe je nach Bildschirmbreite, ggf. mit einem zusätzlichen Breakpoint, wird das Logo kleiner und auch nicht meht überlagert. Wahrscheinlich musst Du für eine gute Optik auch noch die Abstände justieren.

Das alles kannst Du in den Entwicklertools des Browsers Deiner Wahl sehen und austesten.

**kwiesatz** · 14.05.2020, 23:06

...erst mal VIELEN DANK...<3

eine so detailierte antwort hätte ich mir nicht zu wünschen gewagt...
...und ehrlich gesagt hab ich das mit den entwicklertools noch nie verstanden...

...aber soweit ich das jetzt kapiert hab, ist das hier die datei, in der ich alles (mate) ändern kann:
/public_html/bouldershirts/assets/css/mate.scss-89ef7986.css

...dann versuch ich das gleich mal...
...also gleich morgen...

noch mal: vielen dank...<3

**kwiesatz** · 14.05.2020, 23:53

...nee, ich muss doch noch mal fragen, sorry...

...also...

Code:

@media only screen and (max-width:992px) {
 .pagination {
  width:100%
 }
 .pagination li.prev,
 .pagination li.next {
  width:10%
 }
 .pagination li.pages {
  width:80%;
  overflow:hidden;
  white-space:nowrap
 }
}
.breadcrumb {
 font-size:18px;
 color:rgba(255, 255, 255, 0.7)
}
.breadcrumb i,
.breadcrumb [class^="mdi-"],
.breadcrumb [class*="mdi-"],
.breadcrumb i.material-icons {
 display:inline-block;
 float:left;
 font-size:24px
}
.breadcrumb:before {
 content:'\E5CC';
 color:rgba(255, 255, 255, 0.7);
 vertical-align:top;
 display:inline-block;
 font-family:'Material Icons';
 font-weight:normal;
 font-style:normal;
 font-size:25px;
 margin:0 10px 0 8px;
 -webkit-font-smoothing:antialiased
}
.breadcrumb:first-child:before {
 display:none
}
.breadcrumb:last-child {
 color:#fff
}
.parallax-container {
 position:relative;
 overflow:hidden;
 height:500px
}
.parallax-container .parallax {
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 z-index:-1
}
.parallax-container .parallax img {
 opacity:0;
 position:absolute;
 left:50%;
 bottom:0;
 min-width:100%;
 min-height:100%;
 transform:translate3d(0, 0, 0);
 transform:translateX(-50%)
}
.pin-top,
.pin-bottom {
 position:relative
}
.pinned {
 position:fixed !important
}
ul.staggered-list li {
 opacity:0
}
.fade-in {
 opacity:0;
 transform-origin:0 50%
}
@media only screen and (max-width:600px) {
 .hide-on-small-only,
 .hide-on-small-and-down {
  display:none !important
 }
}
@media only screen and (max-width:992px) {
 .hide-on-med-and-down {
  display:none !important
 }
}
@media only screen and (min-width:601px) {
 .hide-on-med-and-up {
  display:none !important
 }
}
@media only screen and (min-width:600px) and (max-width:992px) {
 .hide-on-med-only {
  display:none !important
 }
}
@media only screen and (min-width:993px) {
 .hide-on-large-only {
  display:none !important
 }
}
@media only screen and (min-width:1201px) {
 .hide-on-extra-large-only {
  display:none !important
 }
}
@media only screen and (min-width:1201px) {
 .show-on-extra-large {
  display:block !important
 }
}
@media only screen and (min-width:993px) {
 .show-on-large {
  display:block !important
 }
}
@media only screen and (min-width:600px) and (max-width:992px) {
 .show-on-medium {
  display:block !important
 }
}
@media only screen and (max-width:600px) {
 .show-on-small {
  display:block !important
 }
}
@media only screen and (min-width:601px) {
 .show-on-medium-and-up {
  display:block !important
 }
}
@media only screen and (max-width:992px) {
 .show-on-medium-and-down {
  display:block !important
 }
}
@media only screen and (max-width:600px) {
 .center-on-small-only {
  text-align:center
 }
}


//da kommt noch mehr @mediazeugs, aber ich dacht mir, ich hör mal auf irgendwo...

^^da bin ich im allgemeinen schon richtig oder...?
wenn ja... ...gut... ...dann versteh ich ab hier nur bahnhof...
...wenn nein... ...dann versteh ich noch weniger als bahnhof...

...verrätst du mir bitte, wo ich was eintragen muss, damit der breakpoint funktioniert, wie ich das will...<3

und wenn ich grad schon dabei bin...
...stimmt das nu so...?

Code:

.brand-logo .ce_image:not(.fixed-nav) img {
 max-height:80px;
 width:auto;
 padding:15px
}

//bzw...

 #header .mod_mateNavbar .nav-wrapper .brand-logo .ce_image.fixed-nav img {
  max-height:80px
 }

sorry...
...aber mir is grad aufgefallen, dass ich das letzte mal ne webseite selbst gemacht hab, als es noch keine smartphones gab...

**mlweb** · 15.05.2020, 00:00

Zitat von kwiesatz

...aber soweit ich das jetzt kapiert hab, ist das hier die datei, in der ich alles (mate) ändern kann:
/public_html/bouldershirts/assets/css/mate.scss-89ef7986.css

Nein diese Datei ist sozusagen eine "flüchtige" Datei. Die Dateien unter assets werden von Contao immer wieder neu generiert. Dort würden Deine Änderungen über kurz oder lang wieder verschwinden.
Die meisten Themes bringen eine custom.css mit. Die kann ggf. auch anders heißen, ist aber immer leer wenn noch keiner etwas angepasst hat (außer einem Kommentar, der drauf hindeutet, das man da sein eigenes css reinschreiben soll). Falls nicht vorhanden, legt man sich eine solche Datei selbst an und bindet sie im Layout als letzte Datei ein.
Dahinein kommt Dein eigenes CSS. Also auch alle Änderungen, die Du am Theme durchführst. Diese Datei sollte man sich dann durchaus auch lokal noch einmal sichern/archivieren.

**tab** · 15.05.2020, 00:07

Ich denk nicht, dass die oben erwähnte Datei die richtige ist um Änderungen zu machen. Siehe hier:
https://docs.contao-themes.net/#/mat...-und-schriften
und auch allgemein die Dokumentation des Themes

**kwiesatz** · 15.05.2020, 00:15

Zitat von mlweb

Nein diese Datei ist sozusagen eine "flüchtige" Datei. Die Dateien unter assets werden von Contao immer wieder neu generiert. Dort würden Deine Änderungen über kurz oder lang wieder verschwinden.
Die meisten Themes bringen eine custom.css mit. Die kann ggf. auch anders heißen, ist aber immer leer wenn noch keiner etwas angepasst hat (außer einem Kommentar, der drauf hindeutet, das man da sein eigenes css reinschreiben soll). Falls nicht vorhanden, legt man sich eine solche Datei selbst an und bindet sie im Layout als letzte Datei ein.
Dahinein kommt Dein eigenes CSS. Also auch alle Änderungen, die Du am Theme durchführst. Diese Datei sollte man sich dann durchaus auch lokal noch einmal sichern/archivieren.

danke sehr...<3

nee, echt jetzt... ...VIELEN VIELEN DANK...!!!
nach dieser info hab ich jetzt drei tage lang gesucht...

danke...<3

**kwiesatz** · 15.05.2020, 00:18

Zitat von tab

...
und auch allgemein die Dokumentation des Themes

^^öhm... ...joar... ...da hätt ich auch selbst drauf kommen können...

VIELEN DANK...<3

ich geh jetzt ma schlafen...
...gn8...

...und noch mal danke...

**mlweb** · 15.05.2020, 00:19

Ich arbeite in meinen Projekten fast überall auschließlich mit min-width - typisch für reinen mobile First Aufbau. Das sollte soweit ich den Code gesehen haben für diesen Bereich des Themes auch ausreichen. Bei welchen Breakpoints Du welche Höhe brauchst musst Du testen.
Für kleine Viewports brauchst Du keine Mediaqueries sondern einfach meinen Code von oben mit entsprechend angepasster Höhe. Für größere Viewport kommt das dann in die entsprechenden Mediaqueries. Wie die prinzipiell aufgebaut werden findest Du z.B hier.

Nachtrag: Gerade noch mal geschaut. Das Mate Theme arbeitet in diesem Bereich zumindestens mit max-with. Ich glaube dann würde ich das auch mit max-width überschreiben. Der Unterschied zwischen den beiden "Arten" für responsive Design ist hier schön erklärt https://blog.kulturbanause.de/2013/0...e-enhancement/