TwentyTwelve: Header individualisieren

Heu zusammen,

ich stehe gerade vor einem Problem und zwar bin ich gerade im Rahmen einer Hausarbeit dabei ein Portal für meinen Fachbereich zu launchen.

Der Link zur Seite http://www.wp1142988.server-he.de/dialog_punkt/. Da sieht man im Grunde auch schon, was ich machen möchte.
Bis dato habe ich über ein Child-Theme nur Farben, Position des Header-Images und relative Größe von Widget-area und site-content Bereich verändert plus Navigation weiter nach oben verschoben.

Was ich irgendwie gerne umsetzen möchte ist, dass diese "blauen Kästen" programmiert sind und nicht ein "riesiges Header-Image" vorhanden ist. Also z.B. Das Logo und das Bild könnte man ja über das Header-Image noch einbinden, aber dann die "Slogans" müssten ja anders eingebunden werden. Wobei das ja auch wieder Blödsinn ist, da das Ganze ja auch responsive ist, wo auch der Knackpunkt der ganzen Sache liegt.

Hat jemand eventuell ein Tipp oder vllt sogar auf die Schnelle ne Variante, wie ich das gescheit umsetzen kann, sodass bspw. ab einer bestimmten media Größe, das Bild vom Hörsaal verschwindet und nur noch das Logo bleibt sowie dass die "blauen Kästen /Slogans" sich bspw. übereinander anordnen in der z.B. der mobile Version.

Die blauen Kästen ansich würde ich noch hinbekommen, aber diese responsive Sache ist mir jetzt nach 2 Stunden googln noch schleierhaft.

Wäre super :)

Danke...

Best,

Basti

Hej,

danke schonmal.
Was sich mir aber nicht ganz erschließt...das TwentyTwelve Theme ja folgendene Standard Code-Schnippsel

/* Minimum width of 600 pixels. */
Media screen and (min-width: 600px) {

d.h. doch in Bezug auf egados Text, dass ich erstmal den Teil sowieso ändern muss oder? Ab 600px Breite soll er ja im Standard-Code alle weiteren Sachen ausführen und dann gibt es noch ein Media screen and (min-width: 960px).

Oder verstehe ich da jetzt gerade etwas falsch...ich würde jetzt denken, dass ich ein max-width z.B. unterhalb von 600px Header-Bild float:none erstellen muss etc...

Der Standard-Code bewegt sich ja quasi in die entgegengesetzte Richtung, vom Kleinen zum Großen.

best,

Basti

Hallo,

ich steh grad echt auf dem Schlauch, aber irgendwie versuch ich seit einer Stunde, die wahrscheinlich einfachste Sache der Welt hinzubekommen.

Ich möchte ja diese 3 Boxen erstellen, dazu habe ich in meinem Child. Ich bekomme allerdings auch nur 2 hin, mir erschließt sich nicht, wie die dritte in die Mitte kommt bzw. brauch ich überhaupt diese unterschiedlichen Definitionen

Zitat

.blueboxeslinks {
width: 33%;
height: 100px;
background-color: #142f5a;
float: left;
}

.blueboxesrechts {
width: 33%;
height: 100px;
background-color: #142f5a;
float: right;
}

Alles anzeigen

in meiner child-header.php habe ich dann folgendes eingefügt

Zitat

<div class="blueboxeslinks">
<h2>Überschrift</h2>
</div>

<div class="blueboxesrechts">
<h2>Überschrift</h2>
</div>

Alles anzeigen

Außerdem habe ich den ganzen Spaß erstmal unter der Navigation angebracht, weil als ich das in der Header.php direkt nach dem Header-Image Code eingefügt habe, war alles total durcheinander.

Aktuelle Live-Version sieht man dann auch unter dem o.g. Link. Kann mich bitte jemand aufklären? :(
Danke!:wink:

ps. um responsive kümmere ich mich danach, aber das mit dem Ausblenden des Fotos hat schonmal ganz gut geklappt, also sollte das mit den Boxen auch kein Problem sein, wenn sie denn erstmal stehen.