Blueprint CSS – Grundformatierung und Typography

Unser Basis Template soll zwar schlicht sein, damit es jeder als Grundlage für sein eigenes Template nutzen kann, doch wir können mit einem kleinen Handgriff noch etwas mehr aus diesem schlichten Template rausholen. Der Trick ist, dass wir einfach das CSS Framework Blueprint CSS in unser Template einbinden. Dieses gibt uns eine saubere Grundformatierung, die in allen Browsern gleich aussieht.

1. Schritt – Blueprint CSS runterladen & installieren

Als erstes musst du dir das Blueprint CSS Framework runterladen: Download. Als nächstes entpacke die Datei und lade den Ordner „blueprint“ in den Tutorial Template Ordner:

2. Schritt – Stylesheets einbinden

Damit unser Tutorial Template die Stylesheets auch verwendet, müssen wir sie noch in der header.php einbinden. Dazu öffne die Datei „header.php“ und füge den markierten Code ein:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//DE" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head profile="http://gmpg.org/xfn/11">
	
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

	<title><?php wp_title(' - ', true, 'right'); ?> <?php bloginfo('name'); ?></title>
	
	<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/blueprint/screen.css" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/blueprint/print.css" type="text/css" media="print">	
	<!--[if lt IE 8]><link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
	
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
	
	<?php wp_head(); ?>
	
</head>
<body>

<div id="wrapper">
	
	<div id="header">
		<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
		<h3><?php bloginfo('description'); ?></h3>
	</div><!-- header -->

Damit sollte das Template nun optisch was besser aussehen und trotzdem ein leicht anpassbares WordPress Basis Template bleiben.

Vorher:

Nachher:

Wer nicht am blueprint CSS Framework selbst interessiert ist und dieses für sein Layout nutzen möchte, sollte vielleicht lediglich die Datei „Typography.css“ aus dem Blueprint-Ordner einbinden, um das gleiche zu erreichen was wir hier sehen. Wer allerdings daran interessiert ist, kann sich hier das Quickstart Tutorial für Blueprint CSS anschauen.

hier geht's weiter...



Kommentare


das ist natürlich ein großer Schritt für einen Neuling, nach der Einbindung des Blueprint CSS wurde an alle Links die Permalinks angehängt, die sonst versteckt waren. Sowohl in der Sidebar als auch an die Artikellinks. Müßte also irgendwie mit der CSS-Formatierung zusammenhängen.

Besten Dank


Hey! Vielen Dank für das sehr gute Tutorial.
Bei mir erscheint das Wort Blogroll und Seiten doppelt und eingerückt. Irgendeine Idee???


Hast du deinen Widgets einen Titel gegeben? Wahrscheinlich gibst du einmal im Template den Titel aus und dann nochmal im Backend den Titel für das Widget, dann wird es 2x ausgegeben.


das stimmt nicht, ich hab das auch genau nach deiner vorlage gemacht und bei mir stehen auch wie bei ümit seiten und blogroll doppelt. ich habe gar keine widgets bisher


Hey endlich alles geschafft und ich muss sagen, dass ich jetzt keine 4 Tage damit zugebracht habe ohne irgendwelche Grundkenntnisse.

Nur ein Problem habe ich, dass Backend ist irgendwie verschwunden. Das Theme funktioniert einwandfrei aber mir ist grade erst aufgefallen, als ich mich anmelden wollte. Das ich nirgends die Möglichkeit dazu habe im Frontend. Hab ich vergessen irgendein Template oder eine Funktion einzubinden?


Hier kannst du dich einloggen: http://deinedomain.de/wp-login

Ich baue die Login-URL grundsätzlich nicht in meine Templates ein, sorry.


meintest wohl wp-admin :D …. mit login kommt man nicht weit, ausser zu eienr "seite nicht gefunden".


Oh ja du hast recht: http://deinedomain.de/wp-admin

Kommentar schreiben

Kommentar

Hilfe:

<strong>fettgedruckt</strong> => fettgedruckt

<em>kursiv</em> => kursiv

<a href="http://wordpress.lernenhoch2.de">Link</a> => Link

[code]<?php echo 'hello world'; ?>[/code]

*

Feedback Formular