Mantra CSS Anpassungen

css photo

Photo by Maurice Svay from flickr

CSS Änderungen

Manche gewünschte Änderungen am Layout können nicht über Theme-Parameter eingestellt werden, für solche Fälle sollte Ihre Theme die Möglichkeit bieten, nutzerspezifische CSS Angaben in den Einstellungen zu hinterlegen. Wenn die Theme diese Möglichkeit nicht bietet, müssten Sie das Style-Sheet der Theme manuell modifizieren, und müssten dieses bei jedem Update der Theme nachholen. Besser wäre es dann, wenn Sie gleich mit der Child-Theme starten. Aber die meisten Themes bieten ja diese Möglichkeit, und die sollten Sie nutzen, wenn sie Änderungen erzielen wollen.

Im folgenden beschreibe ich beispielhaft die Änderungen, die ich auf diese Weise an der Mantra Theme vorgenommen habe:

Diese Links entsprechen nicht immer der logischen Lesefolge, da sie im Standard auf die  rein zeitliche Abfolge der Beiträge wirken. In einem Blog wie diesem passt das nur selten. Dies sollte auf alle Themes wirken, die dem WordPress Standard entsprechen.

/* Ignore prev / next */

#nav-above { display: none !important; } 
#nav-below { display: none !important; }

Das Layout des „aufgeklappten“ Textes“ beim Plugin „Textexpander“ wird hiermit beeinflusst. In der Beschreibung des Plugins gibt es da ein Beispiel, dass man einfach übernehmen kann, und dann die Farben ein bisschen verändert. (Das sind die HEX-Werte).

/* Textexpander Layout */

.te_div {background: #F4F4F4; margin: 8px 0 0 12px; padding: 8px;
 border: 4px solid #DDDDDD; font-size: 14px; }

Im Contact-Form Plugin war das Eingabefeld für die Nachricht nur eine Zeile hoch. Offenbar ein Fehler im Plugin. Wenn man ermittelt, wie das Eingabefeld „benamst“ ist, kann man auf diese Weise erreichen, dass genau das Feld 100 Pixel hoch ist.

/* Contact Form Patch */

.textarea-905 textarea {height:100px;}

Der Rand war mir bei der Einfügung von Bildern mit Caption einfach zu brei:

/* Caption bei Bildern kleiner */

#content .wp-caption  {
 padding:2px 7px 4px;
} 

Sie fragen sich jetzt wahrscheinlich, wie Sie an die Namen wie „te_div“ oder „textarea-905“ etc. kommen. Aber das ist relativ einfach. Alle modernen Browser haben Entwicklertools, mit denen können Sie eine beliebige Seite analysieren. Suchen Sie damit auf dieser Seite mal das Text-Expander Feld (te_div). Wenn Sie auf diese Weise identifiziert haben, welcher CSS „Style“ für die Formatierung verantwortlich ist, können Sie über Einstellungen wie oben die Voreinstellung der Theme oder eines Plugins überschreiben.

Kleine Anleitung dazu gibt es hier für den Internet-Explorer: https://msdn.microsoft.com/de-de/library/Cc817576.aspx

Und so sieht es bei der Mantra Theme aus, wenn Sie diese Änderungen hinterlegen wollen:

Screenshot 2015-08-28 19.13.02

Bookmark the permalink.

About Uwe Sprenger

Uwe Sprenger ist ein IT Generalist, der in seiner Freizeit immer gerne neue Möglichkeiten ausprobiert. Und so ist hier dieses Blog zu Wordpress im entstehen. Beruflich bin ich (zur Zeit) intensiv im Lizenz Management unterwegs.  

4 Responses to Mantra CSS Anpassungen

  1. Pingback: UweS Blog - Der doppelte Boden

  2. Pingback: UweS Blog - Child Theme Aufbau 1 - Das Gerüst

  3. Pingback: UweS Blog - Die Kontakt Form mit Captcha

  4. Pingback: UweS Blog - Child Theme Step 1 - Das Gerüst

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

16 + zwölf =