CSS-Frage: Positionierung Slideshow im Header

[thobie]

Moin, Moin,

ich habe meinem Foodblog https://www.nudelheissundhos.de ein neues Design, sprich Theme, verpasst.

Ich bin derzeit mit fast allem zufrieden, will dem Theme aber mit CSS beibringen, dass die Slideshow im Header sich nicht über die ganze Breite des Browserfensters erstreckt. Sondern nur auf der Breite des Inhalts der Site. Sprich, etwa so breit wie von Logo links bis Menü rechts.

Die Slideshow ist mit dem Plugin MetaSlider eingerichtet.

Da das Theme kein Widget für einen Header mit Slideshow hat, habe ich den MetaSlider-Code in die header.php eingebunden:

<?php echo do_shortcode('[metaslider id="41037"]'); ?>

Wer kann helfen?

Grüße aus Hamburg

Thobie

 

[thobie]

Entschuldigung, ich habe das eben erst am Desktop geprüft und da hat der Slider tatsächlich die Breite der Site. Da hat anscheinend über Nacht die Einstellung in MetaSlider, den Slider nicht auf 100 % zu ziehen, gewirkt.

Anyway, jetzt brauche ich nur noch Hilfe beim schwarzen Balken des Menüs, das ebenfalls nicht über die ganze Browserfenster-Breite laufen soll.

 

[Difool]

Du kannst z.B. die css-Angabe für die row erweitern mit:

max-width: 1200px;
margin: 0 auto;

style.css:1246

.bottom-header-row {
  background-color: var(--sydney-dark-background);
  z-index: 999;
  max-width: 1200px;
  margin: 0 auto;
}

Allerdings scheint das in den Theme "sydney" eine top-navigation zu sein.
Alternativ setze mal den Slider im Header unter die Navigation.

Sähe dann so aus: (mit der oben genannten max-width und dem zentrierten margin)

 

[thobie]

.bottom-header-row {
  background-color: var(--sydney-dark-background);
  z-index: 999;
  max-width: 1200px;
  margin: 0 auto;
}

Danke, funktioniert mit Deinem Code.

Darf ich eine Frage anhängen? Das Theme hat in seinen Einstellungen die Möglichkeit, ein Logo in den Header einzubinden („Nudelheissundhos – Nudeln, Fleisch und Sauce … und ein Stück Kuchen“ und auch dessen Höhe in Pixeln zu wählen, von 0–500 px. Ich habe das Logo schon vor dem Hochladen in das Foodblog mit PhotoZoom um 300% hochgerechnet. Ich möchte das Logo im Foodblog deutlich größer als zur Zeit haben. Ich kann jedoch über diese genannte Option nur bis etwa 80 px Höhe vergrößern, alle anderen Einstellungen von 200, 300 oder 400 px werden nicht übernommen. Ist da irgend eine Beschränkung im Header vorhanden, dass das Logo nicht größer sein kann?

 

[Difool]

Der Container (div), in dem der .site-branding Container drin ist, bekommt von dem bootstrap-Responsive seine Größe mit 33.33333333% –
was so die gesetzte "auto"-Größe des Bildes bzw. des Logo bedingt.
Schätze, dass es so "Theme-Logik" bedingt und daher von den Erstellern des Themes so gewollt ist.

Du könntest nun aber eine zusätzliche direkte Ansprache an diese header column (Spalte) via Media Queries für das css dort setzen.
In dem du die .top-header-row Klasse hinzufügst, sagst du der .col-md-4, dass sie nur dort in der top-header Zeile 100% Breite haben soll.
Und die Media Query Angabe sagt zusätzlich, dass es nur bei Devices mit einer Mindestbreite oder einer exakten Breite von 992px passieren soll.
Darunter greift dann das vorhandene Responsive und/oder fluid-design.

 @media (min-width: 992px)
.top-header-row .col-md-4 {
  width: 100%;
}

Probiere es aus und teste alle Display-Ansichten durch, ob es ok ist.
Das css-Snippet aber komplett in das css hinzufügen – nicht das vorhandene ergänzen!

 

[thobie]

 @media (min-width: 992px)
.top-header-row .col-md-4 {
  width: 100%;
}

Probiere es aus und teste alle Display-Ansichten durch, ob es ok ist.
Das css-Snippet aber komplett in das css hinzufügen – nicht das vorhandene ergänzen!

Also nicht im Customizer in das zusätzliche CSS einfügen, damit das CSS ergänzt wird? Sondern direkt in die style.css einfügen?

Ich habe beides getestet, es funktioniert nicht. Das Logo stoppt bei 80 px Höhe.

 

[Difool]

Ach, ok – dann via Customizer in das zusätzliche CSS einfügen, weil sonst beim nächsten Theme-Update ja überschrieben würde.
Evtl. besser ein Child-Theme deines Themes verwenden.

Dann evtl. folgende Schreibweise:

entweder:

 @media (min-width: 992px)
.top-header-row .col-md-4 {
  width: 100% !important;
}

oder:

 @media (min-width: 992px)
.top-header-row.col-md-4 {
  width: 100% !important;
}

 

[thobie]

Die Verwendung eines Child-Themes gehört für mich mittlerweile als Selbstverständlichkeit dazu.

Deine beiden Codes funktioniert leider nicht.

Ich habe in den Einstellungen nun noch folgendes gefunden: Der "Container Type" kann auf "wie Inhalt" oder "Full-width" eingestellt werden. Ich habe ihn nun von ersterem zu letzterem eingestellt. Und nun bekomme ich das Logo zumindest auf 90 px Höhe und damit deutlich größer.

 

[Difool]

Ja, das bootstrap ist via Customizer-Function eingebunden, wodurch dann diese Einstellungen der "Container Type" möglich ist/gemacht wird.
Ich weiß jetzt nicht wie das im css mit welcher Priorität geladen wird bei diesem Theme.

Ohne die "@media"-Zeile bzw. einem Media Query sollte das css-Snippet schon greifen –
nur dann halt auch im Responsive, was aber doof und contraproduktiv wäre.

Alternativ könntest du dir dein Logo aber auch ebenso wie den Slider-Shortcode in die header.php reinsetzen.
Musst nur den richtigen image-Pfad dafür nehmen und den img-tag richtig platzieren.

 

[thobie]

Der Code funktioniert leider nicht.

Ich werde jetzt nachher einmal selbst versuchen, ob ich mir da einen geeigneten Code zurechtschreiben kann.

 

[JARVIS1187]

Müssen Media-Queries nicht immer auch eingeklammert sein?

@media (min-width: 992px) {
    .top-header-row.col-md-4 {
        width: 100% !important;
    }   
}

DAS sollte funktionieren.

 

[thobie]

Moin, Moin, Jarvis, Dein Code funktioniert leider auch nicht.

Ich kann durch die geänderte Einstellung im Customizer das Logo bis auf 90 px Höhe vergrößern, alle Werte darüber werden nicht angenommen.

 

[JARVIS1187]

@media (min-width: 992px) {
    .top-header-row .col-md-4:not(.header-elements) {
        width: 100%;
    }  
}

Check das mal. Das sollte aber hinhauen. Das Logo ist jetzt jedenfalls bei mir damit groß, wenn ich das DOM/CSS bearbeite..
Das "!important" sollte nicht (mehr) nötig sein, da der Selector in dem Fall genauer ist. Ich hab das daher weggelassen.

(das blau hinterlegte kommt von der Entwicklerkonsole, lass dich davon nicht beirren!)

 

[Difool]

@media (min-width: 992px) {
    .top-header-row .col-md-4:not(.header-elements) {
        width: 100%;
    }
}

Check das mal. Das sollte aber hinhauen. Das Logo ist jetzt jedenfalls bei mir damit groß, wenn ich das DOM/CSS bearbeite..
Das "!important" sollte nicht (mehr) nötig sein, da der Selector in dem Fall genauer ist. Ich hab das daher weggelassen.

(das blau hinterlegte kommt von der Entwicklerkonsole, lass dich davon nicht beirren!)

Auch 'ne Idee mit :not() – ich wär sonst gleich mit nth-child(2) gekommen.

Das Ding ist ja auch, dass ich vermute, dass die .col-md-4 – da dort 3 Mal vorhanden – evtl. weitere Optionen im Customizer des Themes mitbringt;
wie irgendwelche Widgets und/oder weitere Images/Banner dort reinzusetzen usw. Sind halt 3 Spalten.

Das Logo sitzt in der mittleren .col – meine, dass die Bereiche nicht unbedingt für Logos gedacht sind; eher Banner-Zeugs.

 

[JARVIS1187]

Auch 'ne Idee mit :not() – ich wär sonst gleich mit nth-child(2) gekommen.

Macht aus meiner Sicht wegen der 3 Columns da drin halt mehr Sinn. So muss er wenigstens nicht das Template anpassen und hat eventuell nach einem Update des Themes Probleme

Das mit den Bannern dachte ich mir auch schon, heißt aber ja nicht, dass man das nicht zweckentfremden kann

 

[thobie]

Mir ist das schon klar geworden, dass der Platz über der Navigation für das Menü anscheind dreispaltig ist. Denn links kann ein Hamburger-Menü wie bei Tablets/Smartphones sitzen. Und rechts die Lupe für die Suche.

Im Customizer besteht aber eindeutig die Auswahlmöglichkeit von fünf unterschiedlichen Gestaltungen des Headers mit diesen drei Inhalten und der Navigation. Und in den Vorschaubildern dieser Gestaltung steht „Logo“. Und auch im Bereich „Website-Information“ heißt es ausdrücklich „Logo hochladen“.

 

[JARVIS1187]

Das ist ja ok und auch nicht schlimm. Es gibt ja andere Möglichkeiten, das Problem, was du hast, zu umgehen

 

[thobie]

Das ist ja ok und auch nicht schlimm. Es gibt ja andere Möglichkeiten, das Problem, was du hast, zu umgehen

Das hat jetzt gefunzt. Prima. Danke.

Ich kann jetzt das Logo bis auf 162 px Höhe vergrößern. Maximal sind zwar 500 px möglich. Aber schon mit den 162 px Höhe ist es sehr groß. Und ich habe es nun auf 140 px Höhe eingestellt.