Twenty Twelve Header- und Footer-Anpassung

WinfriedH · 27. November 2012

Hallo zusammen,
es wär' klasse, wenn jemand hier einen heißen Tipp für mich hätte.
Ich such' seit Tagen nach der Möglichkeit, den Header und Footer bei Twenty Twelve über einen definierten Bereich über die ganze Breite der Seite zu strecken und einzufärben. Mein "Kunde" (mein Schwager) möchte es so, und ich such' mir einen Wolf... (style.css, header.php. footer.php...).

Im style.css habe ich folgendes gemacht:

/* Header */
.site-header {
height:150px; position:center;
background:#02923b; width:1000px;
}
wobei "position:center;" überhaupt nicht interessiert, aber die Breite von 1000 pixel den farbigen Bereich bis ganz nach rechts erweitert hat (siehe Bild). Ich hätte die Farbe nun gerne noch links bis zum Rand und in die Ecke..., aber da kann ich machen, was ich will...

Ähnlich geht's mir mit dem Footer - den hätte ich auch gerne bis in die Ecken (ebenfalls im Bild zu sehen).
Hier der bisherige CSS-Code für den Footer:

/* Footer */
footer[role="contentinfo"] {
background-color:#02923b;
border-top: hidden;
clear: both;
font-size: 12px;
font-size: 0.857142857rem;
line-height: 2;
max-width: 960px;
max-width: 68.571428571rem;
margin-top: 24px;
margin-top: 1.714285714rem;
margin-bottom: 24px;
margin-bottom: 1.714285714rem;
margin-left: auto;
margin-right: auto;
padding: 24px 0;
padding: 1.714285714rem 0;
}
footer[role="contentinfo"] a {
color: #686868;
}
footer[role="contentinfo"] a:hover {
color: #21759b;
}

Ich weiß, dass ich irgendwo was falsch gemacht habe bzw. etwas einfach nicht finde.

Vielleicht hat jemand hier den heißen Tipp und ich komm weiter.
Oder es gibt ein Theme ähnlich dem Twenty Twelve, bei dem das ganz einfach geht und ich auch noch ein png-Bildchen mit einem Logo drüberlegen kann.... das wär' auch ein klasse Hinweis.

Vielen Dank an alle im Voraus.
Viele Grüße
Winfried

Variabel · 27. November 2012

Hallo Winfried. Also, die Lage sieht wahrscheinlich so aus: die Conttainer für den Header und den Footer findest Du ja letztlich im <body> oder in irgendeinem anderen Container drin eingebaut. Oft hat dieser Container in der css ein padding:xyz; zugewiesen bekommen. Das gibt dem <body> innenabstand und folglich das obige Resultat.

Nun hast Du mehrere Möglichkeiten.

Entweder du beseitigst das paddingim <body> (oder wo auch immer es auch sei). Das wäre aber eher nicht so optimal. Da Du so an verschiedenen anderen Stellen auchnoch weiter nacharbeiten musst, weil ja der umgebende Abstandshalter weg ist.

Oder: Der <body> hat padding: 0 20px;? Dann gebe dem Header die gleiche Menge margin als negativen Wert. Also margin: 0 -20px;. Das zieht den Header wieder zurecht, rechnerisch bis auf 0. Naja, kann man machen. Optisch das Ergebniss, aber cool? Hm. Was meinen andere. Spricht da was gegen, gegen diese Vorgehensweise? Könnte das irgendwo crashen? Also ich mache es des öfteren so, dasich mir mit negativen Werten die DInge wieder zurecht-stretche.

Oder: Du gibst dem Header- und Footer-Container eine Positionierung mit position:was du magst, wie es soll; und stellst über left:0; und right:0; oder bottom:0; oder top:0; sicher, dass das Element bis an den Rand zieht.

Wenn Du so die Hauptnavigationsbalken oben fixierst mit position:absolute;, hast Du übrigends eine sehr schöne Lösung zur leichten Navigation auf der Website. FInde ich Besucherfreundlich - kommt auch immermehr, weil es einfach besucherfreundlich ist. Besonders, wenn das Layout im Tablet-, oder Handymodus ist, da ist scroolen ja teils ein Graus.

Hilft die Beschreibung? Grüße!

pixselig · 28. November 2012

also vom twentyeleven weiss ich, dass das vergrössern des headers und footers über den gesamten screen (bei gleichzeitigem gleichbleiben des contents, sidebar etc.) garnicht so ganz einfach ist. man muss sich schon ein wenig mit dem box-model und css auskennen um dies sauber zu realisieren. (problem: der header und footer befinden sich bei twentyeleven innerhalb des wrappers welcher eine max-width: XXXpx; besitzt -> wird jetzt der wrapper erweitert wächst auch der content etc. -> dies gilt es alles anzupassen. oder aber du nimmst den header und footer aus dem wrapper heraus und positionierst sie unabhängig von selbigem. oder... (es gibt dafür mehrere lösungen))

so du dich damit nicht so gut auskennst, würde ich eher dazu raten, ein theme zu verwenden welches von haus aus deinen vorstellungen entspricht.

lg, pixselig

ps: mein statement bezieht sich auf twentyeleven - twentytwelve kenne ich (noch) nicht - aber eventuell sind sie ähnlich aufgebaut?

WPDE.org

Twenty Twelve Header- und Footer-Anpassung

WinfriedH Member

Anhänge:

2012_issue.jpg

Variabel Member

pixselig Well-Known Member

Nützliche Suchen

Twenty Twelve Header- und Footer-Anpassung

WinfriedH Member

Anhänge:

2012_issue.jpg

Variabel Member

pixselig Well-Known Member