Twenty eleven kleinere Anpassungen bitte um Hilfe

timmaeh

Hallo liebes Forum,

ich würde gern einige Dinge an meinem Twenty Eleven anpassen, denn ich finde das ist das idealste Theme da draussen. Ein Childtheme wurde erstellt.

1. Ich habe mich für die einspaltige Variante entschieden, nun würde ich dort gern die Suche entfernen um mehr Platz in der Navigation zu schaffen.

2. Ich würde die Navigation gern etwas über den eigentlichen Contentpart der Seite ragen lassen. Sagen wir mal so 20px beide Seiten, dazu käme noch das ich dann die Enden der Navi gern Abrunden würde, ist sowas möglich?

3. Wo finde ich den absoulten Headerpfad, sprich wo kann ich den Header als Link definieren um nicht die Uploadfunktion nutzen zu müssen? Denn dort wird es immer als JPG genommen, ich möchte gern ein Transparentes PNG nutzen.

Das war es soweit erstmal ich hoffe das ihr mir helfen könnt, bin für jegliche Hilfe dankbar. Bei weiteren Sachen melde ich mich dann hier im Thread.

Gruß

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

ocean90

Direkt mal vorweg, für diese Änderungen solltest du dir ein Child Theme anlegen.

Die Suche kannst du dann mit

Code

#branding .only-search {
    display: none;
}

ausblenden.

Die Navi kannst du zum Beispiel damit vergrößern und abrunden:

Code

#access {
    padding-right: 40px;
    margin-left: -20px;
    border-radius: 10px;
}

Für dein transparentes Headerbild kannst du die Funktion register_default_headers verwenden. Heißt du registrierst dein eigenes Bild und kannst es dann im Backend auswählen. Beispiel:

PHP

function my_register_transparent_image() {
register_default_headers( array(
		'transparent' => array(
			'url' => '%s/images/transparent.png', // Pfad zum Bild, %s entspricht dabei wp-content/themename
			'thumbnail_url' => '%s/images/transparent-thumbnail.jpg', // Pfad zum Thumbnail, %s entspricht dabei wp-content/themename
			'description' => 'Transparent' // Bildbeschreibung
		)
	) );
}
add_action( 'after_setup_theme', 'my_register_transparent_image' );

Dieser Codeschnipsel gehört dann in die functions.php deines Child Themes.

timmaeh

Hey schonmal vielen dank, wie ich oben schon schrieb ein Childtheme ist schon erstellt worden ;).

Allerdings hätte ich da noch etwas, wie kann ich denn die functions.php etc auch ins Child bringen? Mit den style.css und rtl.css funktionierte das laut Codex ganz einfach aber das mit den anderen Dateien habe ich nicht so recht verstanden.

Gruß

Edit: Habe nun bis auf den Header alle Änderungen vorgenommen und es schaut gut aus. Jedoch tauchten dadurch noch ein paar Dinge auf.

Und zwar: wie kann ich es anstellen das der Platz zwischen den Buttons geringer ist sowie die Schriftart kleiner? Und wie bekomme ich es hin das alles in einer Zeile untergebracht wird, momentan wird der Platz der nicht mehr vorhandenen Suche nicht mitgenutzt.

ocean90

Die functions.php einfach in den selben Ordner legen, wo auch die style.css liegt.

timmaeh

Gesagt getan funktioniert wunderbar :).

Hast du zufällig hierfür auch noch einen Rat?

Zitat von timmaeh

Und zwar: wie kann ich es anstellen das der Platz zwischen den Buttons geringer ist sowie die Schriftart kleiner? Und wie bekomme ich es hin das alles in einer Zeile untergebracht wird, momentan wird der Platz der nicht mehr vorhandenen Suche nicht mitgenutzt.

Und dann scheint es da noch ein Problem mit der Transparenz zu geben beim Header. Photoshop hats als PNG-24 gespeichert auch unter Windows ist der Hintergrund Transparent. Wenn ich das PNG jedoch als Header einfüge ist der Hintergrund - Weiss.

Gruß

ocean90

Das es weiterhin weiß ist, liegt daran, dass der komplette Block weiß ist.
Nochmal alles zusamengefasst:

Code

#access {
    padding-right: 40px;
    margin-left: -20px;
    border-radius: 10px;
    margin-bottom: 0;
}


#page {
    background: none;
}


#main, #primary, #colophon {
    background: #fff;
}


.only-search {
    display: none;
}


#branding .only-search + #access div {
    padding-right: 0;
}


#access a {
    padding: 0 5px;
    font-size: 12px;
    line-height: 30px
}

Alles anzeigen

Mit den '#access a' Werten halt nach Belieben rumspielen.

timmaeh

Hat alles prima geklappt, nun gibt es noch einen letzten Punkt den ich nicht selber zum abschluss bringen kann.

Es geht um das Hintergrundbild. Dieses soll aus 2 Teilen bestehen, einmal ganz oben aus einer 48x48 Grafik die sich nur in der einen Zeile wiederholt. Darunter soll dann ebenfalls eine Grafik mit 48x48 sich für den Rest des Hintergundes wiederholen.

Gruß

ocean90

Da könntest du dir eine neue CSS3 Eigenschaft zu Nutzen machen.

Code

body {
    background: url(image/first.png) repeat-x left top,
        url(image/second.png) repeat left top;
}

timmaeh

Und das ganze muss ich dann wo einfügen und klappt das dann auch mit dem Childtheme?

Gruß

ocean90

Alle Codes sind für das Child Theme. Obiger gehört wieder in die style.css.

timmaeh

Habe es nun so

Code

body {
    background: url(image/cobble_bg.png) repeat-x left top,
        url(image/wood_bg.png) repeat left top;
}

in meine style.css vom Childtheme getan jedoch zeigts nichts an bzw der Hintergrund ist nun weiß.

Gruß

ocean90

Ich nehme mal an, dass du den Ordner images im Child Theme Ordner auch angelegt hast?

timmaeh

Ja hatte ich ;). Jedoch war in deinem Codeschnippsel der Ordner als "Image" betitelt.

Nun passt alles. Kann man das eigentlich beliebig fortführen? Sprich könnte ich auch die letzte Zeile des Hintergrundes mit derselben Grafik bestücke wie "Zeile" 1?

Und kann man dem Footer auch eine Rundung verpassen wie der Navigation?

Gruß

timmaeh

Und zum obigen ist mir noch etwas eingefallen, wäre es möglich den Blog Linksbündig zu machen also innerhalb des Monitors? Und neben dem eigentlichen Blog einen Container einzufügen welcher eine Art banner mit anklickbaren Links enthält.

Sprich eine Grafik sagen wir mal 300x300 welche den Hintergrund dieses Containers darstellt und auf ihr dann ein Text mit Links geschriebe werden kann.

Gruß

ocean90

Ja, du kannst mehrere Hintergründe festlegen, so viele wie du willst und sie Sinn machen.

Möglich ist alles. ;)

Um es nach links zu schieben muss #page angepasst werden, zum Beispiel:

Code

#page {
margin: 2em 0;
}

2em ist der Abstand oben und unten, 0 dann von rechts und links.

Wenn du rechts wieder was haben willst, warum nutzt du dann die einspaltige Version?

Ansonsten einen Container vor oder nach dem #page Komplex erstellen und denn dann mit CSS nach rechts fließen lassen (CSS float).

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Twenty eleven kleinere Anpassungen bitte um Hilfe

Jetzt mitmachen!