Logo anpassen (Größe, Position etc.)

[Sebmane]

Hallo liebe Community,

ich habe leider etwas Probleme mit dem Anpassen eines Logos im Header Bereich meiner Seite. Ein Modul ist erstellt und ein Stylesheet welches sich auf das Logo bezieht ebenfalls. Allerdings wirkt sich kaum etwas aus wenn ich Änderungen innerhalb des Stylesheets vornehme. Also Größe, Position etc. Laut Firebug befindet sich das Logo im "innerwrapper".

Ich weiß allerdings nicht wie ich das Logo vernünftig anpasse, da es bei mir über Stylesheets nicht vernünftig funktioniert.

Ich danke euch vorab für Eure Hilfe.

Viele Grüße.


Sebmane

[jscholtysik]

Ein Link auf Deine Seite wäre (wie immer) schön...

[mlweb]

Ein Link auf Deine Seite wäre (wie immer) schön...

In dem Fall sogar zwingend erforderlich, dann sonst geht nur die pauschale Antwort kann man mit Sicherheit mit css anpassen.

[Sebmane]

sorry, ja klar! :-)

http://relaunch.homburg-verpackungstechnik.de

einen schönen Sonntag schon mal!! :-)

[mlweb]

Ansprechen kannst Du das Logo in einer css-Datei wie folgt

.logo {
...
}

Falls das Logo an verschiedenen Stellen mit der Klasse "logo" verwendet wird z.B. mit

#header .logo {
...
}

Außerdem ist da noch das Bild selbst (innerhalb von logo)

.logo img {
...
}

Wie genau soll es denn aussehen?

[Sebmane]

Ich würde gerne das Logo und die Bildleiste (direkt unter dem Logo) so groß darstellen wie den Block unterhalb der Navleiste (Beautiful, Health, Navigator und Theme.) Sodass es dann etwas blockiger wirkt. Eine Formatdefinition (.logo) hatte ich schon erstellt. Die Änderungen dort wirken sich aber irgendwie nur teilweise aus.

[mlweb]

Soweit ich da vorhin gesehen habe, musst Du dafür aber an mehreren Schrauben drehen.
Verstehe ich es richtig, dass nichts auf Fullwidth haben willst (Desktop)?

[Sebmane]

die Seite soll auf jeden Fall dieses zentrierte Verhalten beibehalten, also dieses blockige in der Mitte. Also quasi so wie sie jetzt auch aufgebaut ist. Ich hoffe ich drücke mich richtig aus. Kenn noch nicht so viele Fachbegriffe in dem Bereich. Bin erst seit 1-2 Monaten dabei. :-)

Also wenn man die Seite an dem Anfasser unten rechts vergrößert soll rechts und links nur noch Hintergrund und nicht Inhalt erscheinen. Das meinst du mit "nicht Full width" oder?

[mlweb]

So ganz grob finde ich das per Bildbearbeitung irgendwie zusammengestückelte Headerimage nicht geschickt, aber das nur am Rande.
Gib #headerimage erst mal gleiche Breite und Margin mit wie .innerwrapper.

[mlweb]

Ansonsten sehe ich da einige Spielereien mit transform, deren Sinn ich auf die fixe Schnelle nicht durchschaut habe
Sind die von Dir oder kommen die aus einem fertigen Theme?

[Sebmane]

die sind aus einem Theme:

https://themes.contao.org/de/themes/...navigator.html

"Spielerein" kann ich noch nicht. ;-) Das Headerimage ist nur ein Platzhalter. Das wird hinterher schön. :-)

[mlweb]

Wenn das Logo auch über die gesamte Breite gehen soll, solltest Du dort das Floaten entfernen. Alle Elemente innerhalb (zusätzlichen div und img) sollten weder in Breite noch in der Höhe begrenzt werden.
Außerdem scheinst Du das .right-elements ja nicht zu benötigen.

Kennst Du die Entwicklertools der Browser? Dort kann austesten, was sich wie auswirkt.

[mlweb]

Insgesamt wirst Du Dich intensiv mit css beschäftigen müssen, wenn Du Themes anpassen oder erstellen willst.

[Sebmane]

ja, ich arbeite mit Firebug. Der ist sehr hilfreich und ich verstehe ihn jeden Tag besser. :-) Was verrückt ist, dass ich in der Formatdefinition ".logo" gar keine Größe angegeben habe, er mir über Firebug folgendes ausgiebt:

"height: auto;
max-height: 70px;
max-width: 100%;"

Wenn ich das im Firebug verändere wirkt es sich auch direkt aus.

Ja CSS ist noch ein ziemlich weißer Fleck für mich. Ich bleibe dran!! :-) Ich danke dir auf jeden Fall vielmals für deine Hilfe! Ich bin ja jetzt schon einen Schritt weiter mit dem Headerimage. Das ist ja jetzt zentriert und in der Größe etwas nagepasst! :-)

[mlweb]

Was verrückt ist, dass ich in der Formatdefinition ".logo" gar keine Größe angegeben habe, er mir über Firebug folgendes ausgiebt:

"height: auto;
max-height: 70px;
max-width: 100%;"

Das ist nicht verrückt, das steht im css und das gibt er Dir auch nicht für .logo aus, sondern für img innerhalb von .logo.
Schau mal genau hin. Da steht

.logo h1 img, .logo div img {
    height: auto;
    max-height: 70px;
    max-width: 100%;
}

[Sebmane]

Ah ok. dann kann ich ja mit .logo direkt nicht darauf einwirken. Dann schaue ich mal ob ichs raus bekomme. :-) Danke für den Tip!!

[mlweb]

Jetzt dürfte es doch optisch schon so sein wie Du es haben willst.
Mal ein Tip. Ich würde für kleine Bidschirme ein "abgespecktes Logo" verwenden. Unter ca. 500px ist der graue Text im Logo nicht mehr lesbar.
Außerdem gibt es natürlich auch die bekannten Probleme bei Geräten mit Retina Display. Das Logo an sich ist aber prima für eine svg-Format geeignet. Da treten dann keine Probleme mit Retina auf.

[Sebmane]

ja so langsam wirds! :-) Freue mich, dass es jetzt Form annimmt. Ja grundsätzlich muss ich mal schauen wie ich das mit dem Logo anstelle. Jetzt kommt erst mal Kontaktformular und Navleiste dran. :-)

[Sebmane]

Hallo nochmal,

ich weiß nicht ob ich ein neues Thema eröffnen soll oder einfach hier weiter schreiben soll. Hab mich mal für zweiteres entschieden. :-)

Na ja ich beiße mir noch an zwei Sachen noch die Zähne aus.

Hier noch mal der Link zur Seite:

http://relaunch.homburg-verpackungst....php/home.html

Habe der Navleiste einen Bckground verpasst und würde es gerne etwas schmaler halten. Quasi so schmal wie der Hintergrund (also dieser Verlauf) angelegt ist. Habe einen Rahmen um die Navleiste gelegt um zu verdeutlichen wie es nicht sein soll. :-)

Dann bekomme ich oben diesen "inner wrapper" nicht weg. Das Logo der Seite soll ja eigentlich ganz oben beginnen. Ich vermute es im Seitenlayout bin aber noch nicht fündig geworden.

Vielleicht hat der/die Eine oder Andere ja noch eine Idee wo ich mal suchen kann.

Ich bedanke mich schon mal für Eure Mühe!! :-)

Viele Grüße

Sebmane

[fiedsch]

Dann bekomme ich oben diesen "inner wrapper" nicht weg.

Du solltest natürlich klären, wo der eingebunden wird, aber mit CSS wäre es:

.innerwrapper {
    display: none;
}

[Andreas]

Ich empfehle dir, das Layout nochmal von vorne zu beginnen. Und dann ohne angepasste Templates. Die Anpassungen sind wahrscheinlich nicht nötig und auch fehlerhaft (nicht geschlossener DIV). Und das CSS nochmal ganz neu machen. Da ist zu viel Klumpatsch drin.

Lade als erstes die normalize.css https://necolas.github.io/normalize.css/
Im Layout dann nur Layout-Builder und "Responsives Layout" anhaken.

Den Rest kannst du dir dann selber erarbeiten, benutze aber z.B. kein "rem" als Breiten und Höhenangabe. "rem" bezieht sich auf die vom Besucher eingestellte Browserschriftgröße.

Kommentiere dein CSS, Block für Navigation, Formular usw. Halte dich an die CSS-Syntax (Einrückung usw.) Versuche nur CSS zu schreiben, welches auch nötig ist.

[Sebmane]

danke fiedsch, das hat schon mal geklappt!

und Andreas, du hast vollkommen Recht, das Template ist völlig überladen und ich habe mir zwischenzeitlich auch schon meine Gedanken darüber gemacht nochmal neu zu starten... :-) Weniger ist mehr, das ist definitiv richtig. Ich werde mir deine Anregungen zu Herzen nehmen!

Danke Euch und einen schönen Abend!

[Sebmane]

Hallo nochmal, :-)

ich habe jetzt mit der Navleiste nochmal von vorne angefangen. CSS erst einmal komplett rausgenommen und dann Schritt für Schritt wieder aufgebaut. Leider bekomme ich die Schrift immer noch nicht horizontal zentriert. Wäre nett wenn mir jemand einen Hinweis geben könnte.

Hier noch mal der Link zur Seite:

http://relaunch.homburg-verpackungst....php/home.html



Viele Grüße

Sebmane

[tab]

Welche Schrift meinst du? Soll die gesamte Navigation zentriert werden oder was? Das ginge wohl am einfachsten wenn die nav text-align:center bekommt und die ul.level_1 display:inline-block

[Sebmane]

ich meine die Menüpunkte der Nav Leiste. Die sollen schön zentriert dargestellt werden. Die Frage ist, da ich mich noch nicht so gut auskenne, wie spreche ich Contao an um das hinzubekommen. Vielen Dank schoneinmal! :-)

[07alex07]

könntest z.B. für folgendes machen

.mod_navigation.main {text-align:center;}
.mod_navigation.main > ul {display:inline-block;}

[Andreas]

@07alex07: Das klappt nicht ganz. So sollte es gehen. (Selektoren aus der Demo)

#main-nav > ul {
  text-align: center;
}
#main-nav > ul > li {
  display: inline-block;
}

Damit kann man allerdings nicht pixelgenau designen. Besser so:

#main-nav > ul {
  display: flex;
}
#main-nav > ul > li {
  flex-grow: 1;
  text-align: center;
}

[Sebmane]

Hi,

danke für Eure Antworten! Ich muss also in den Selektor der Stylesheet Seite in Contao unter Selektor:

#main-nav > ul

eingeben

und dann bei Textausrichtung in der Rubrik Margen Padding etc.

"zentriert"

oder? Ich hoffe ich habe es richtig verstanden. Sorry, bin noch nicht ganz so fit in CSS, wie man merkt. :-)

[mlweb]

Das was Du da baust scheint doch eine Firmenwebsite werden zu sollen.
Wenn man dafür ein Theme erstellen bzw. anpassen möchte sollte man wenigstens mit den Grundlagen von css soweit vertraut sein, dass man einen hier vorgegebenes Codeschnippsel übernehmen kann.

[Andreas]

Vergib der Navigation mal ne aussagekräftigere Klasse, z.b. mainnav.

Ja, du kannst dann den Selektor ".mainnav > ul" dort eingeben. Aber am einfachsten ist es, wenn du eine Datei erstellst

files/css/style.css

und den Code dort einfügst.

Die Datei kannst du dann im Layout auswählen, oder besser noch in die eigenen Head-Tags eintragen.

<link rel="stylesheet" href="files/css/style.css">

Ich empfehle dir diese CSS-Regel zu entfernen

* {
  padding: 0;
  margin: 0;
} 

Für Navigationen allgemein dann diese Regel benutzen

.mod_navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* und für deine Zentrierung */
.mainnav > ul {
  display: flex;
}
.mainnav > ul > li {
  flex-grow: 1;
  text-align: center;
} 

Bei deinem CSS kannst du dann einiges rausschmeißen. Klarer Anfängerfehler: "zuviel gemacht".

.mod_navigation.main {
    width: 100%;
    top: 355px;
    position: absolute;
    /* margin-right: auto; */
    /* margin-left: auto; */
    /* vertical-align: middle; */
    /* text-align: justify; */
    /* use linear-gradient for background */
    /* background-image: url("../../files/theme_health-navigator/images/layout_images/navleiste_bg.png"); */
    /* background-repeat: repeat-x; */
}
.mod_navigation.main ul {
    /* text-align: center; */
}
.mod_navigation.main li {
    /* overflow: auto; */
    /* float: left; */
}
.mod_navigation.main li a,
.mod_navigation.main span {
    /* min-width: 100px; */
    display: block;
    padding: .5rem;
    /* vertical-align: middle; */
    /* text-align: center; */
    text-decoration: none;
} 

[mlweb]

Bei deinem CSS kannst du dann einiges rausschmeißen. Klarer Anfängerfehler: "zuviel gemacht".

Ich weiß nicht was davon direkt aus dem Theme kommt. Ich hatte mit diesem Theme vor kurzem für eine kleine Anpassung bei einem Kollegen zu tun. Ich war gelinde gesagt nicht begeistert.

[Sebmane]

Das war ausführlich! Herzlichen Dank für deine Mühen!!

Ich werde mich am Wochenende durchwurschteln und dann berichten! :-)

Ein schönes Wochenende wünsche ich euch!

Sebmane

[Andreas]

Ach, sehe ich erst jetzt, dass dies ein Theme ist. Dann würde ich die Navigation so lassen, wie vom Theme vorgegeben und höchstens ganz kleine Anpassungen updatesicher in einer eigenen Datei vornehmen. Wenn du dann was geändert haben möchtest, dann zeigst du am besten direkt den Link zur Online-Demo http://theme-preview.org/de/theme2go-1-health-navigator und erklärst, was dir nicht gefällt. So kann man sicherstellen, dass da nicht bereits eigenes CSS von dir dazwischen funkt.