WordPress eigene CSS Styles im MCE Editor hinzufügen

Füge das Dropdown-Menü in der zweiten Menureihe ein

function my_mce_buttons_2($buttons) { array_unshift($buttons, 'styleselect'); return $buttons; } add_filter('mce_buttons_2', 'my_mce_buttons_2');

Nun die eigene Klasse einfügen in das Dropdown-Menü

function my_mce_before_init($init_array)
{
	// weitere Klassen mit einem ; trennen
	$init_array['theme_advanced_styles'] = "KlasseName=meine-klasse;KlasseZwei=meine-klasse-zwei";
	return $init_array;
}
add_filter('tiny_mce_before_init', 'my_mce_before_init');

Nun können einzelne Wörter, Sätze, Absätze etc. mit den eigenen Klasse bestückt werden ohne in die HTML Ansicht zu switchen.

CSS Image Preloader

Es wird ein Hintergrundbild für IMG Tags eingeblendet solange das Bild nicht komplett geladen wurde.

img {  
  background:url(images/preloader.gif) no-repeat 50% 50%;  
}

CSS Box Shadow

CSS3 bietet uns eine Menge neuer Features. Unter anderem die neuen Box Shadows mit denen sich schöne Effekte erzielen lassen:

Ausserhalb:

.class {
  box-shadow: 5px 5px 5px 5px #000;
  -moz-box-shadow: 5px 5px 5px 5px #000;
  -webkit-box-shadow: 5px 5px 5px 5px #000;
}

Innerhalb:

.class {
  box-shadow: inset 0 0 8px #000;
  -moz-box-shadow: inset 0 0 8px #000;
  -webkit-box-shadow: inset 0 0 8px #000;
}

1. Wert: horizontaler Versatz
2. Wert: vertikaler Versatz
3. Wert: Unschärfe Radius
4. Wert: Ausdehnung
5. Wert: Farbe des Schattens

Stylesheet in WordPress Theme einbinden

Folgendes Snippet kommt zwischen die Tags in der header.php in Ihrem Theme Verzeichnis.

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

CSS: Einbettung von @font-face

@font-face {
  font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot#') format('eot'), 
    url('myfont-webfont.woff') format('woff'), 
    url('myfont-webfont.ttf')  format('truetype'),
    url('myfont-webfont.svg#svgFontName') format('svg');
}