1.Réinitialisation de la feuille CSS

Ceci est le code CSS minimum à avoir avant de commencer à styler votre blog, comme chaque navigateur a son propre affichage par défaut des éléments, ce code permet de les unifier en les mettant à zéro, comme ça vous serais sûr d’avoir le même affichage partout.

@charset "UTF-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     font-weight: inherit;
     font-style: inherit;
     font-size: 100%;
     font-family: inherit;
     vertical-align: baseline;
}

:focus {
     outline: 0;
}
body {
     line-height: 1;
     color: black;
     background: white;
}
ol, ul {
     list-style: none;
}

table {
     border-collapse: separate;
     border-spacing: 0;
}
caption, th, td {
     text-align: left;
     font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
     content: "";
}
blockquote, q {
     quotes: "" "";
}
/* Enlever le padding et le margin */
* {
     margin: 0;
     padding: 0;
}
/* Class pour séparer les flottant */
.clear {
     clear:both;
}
/* Enlever les bordure autours des images avec des liens */
img {
     border: 0;
}

2.Réaliser de beaux blockquotes avec CSS seulement

Ici, pas besoins d’utiliser des images pour représenter une citation, car on peut obtenir le même effet en utilisant ce code CSS, que vous pouvez bien sur personnalisé à volonté.

blockquote {
     background:#f9f9f9;
     border-left:10px solid #ccc;
     margin:1.5em 10px;
     padding:.5em 10px;
     quotes:"201C""201D""2018""2019";
}
blockquote:before {
     color:#ccc;
     content:open-quote;
     font-size:4em;
     line-height:.1em;
     margin-right:.25em;
     vertical-align:-.4em;
}
blockquote p {
     display:inline;
}

3.Info-bulle personnalisée avec CSS

Cette astuce vas surement vous plaire, elle vous permet de créer des infos-bulle personnalisé pour votre site avec CSS sans avoir recours au javascript.

Dans un premier temps, pensez à ajouter ce qui suit dans votre feuille de style :

.tooltip {
    position:relative;
 }

.tooltip span {
     background-color:#FFF;font-size:11px;color:#8A8A8A;
     position: absolute;margin-left: -999em;padding:4px 8px;width: 230px;border:1px solid #ACCEFF;
     border-radius:5px;-moz-border-radius:5px;webkit-border-radius:5px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);-moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.1);webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.tooltip:hover span {
     left: 10px;top: 25px;z-index: 99;margin-left: 0;
}

Ensuite, pour faire appelle à cette info-bulle, vous devez vous habituer à utiliser la classe tooltip et la balise span pour le contenu.

<a class="tooltip" href="#">Pointez votre curseur ici pour afficher l'info-bulle<span>Le contenu de votre info-bulle va se mettre ici.</span></a>

4.Mise-à-jour automatique de la date

Plus besoins d’apporter des modification à votre site pour actualiser sa date, PHP le fera pour vous

 Copyright &copy; 2009-<?php echo date('Y'); ?> 

5.Commentaires Conditionnels Pour IE 6

Si vous avez une feuille de style ou un contenu spécialement pour IE6, vous pouvez utiliser cette syntaxe pour le faire :

<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="styles/ie-styles.css" />
<![endif]-->

6.Centrer le contenu d’un site web dans le navigateur

Ce petit code CSS permet simplement de centrer votre site au milieu de votre navigateur, pensez juste à changer #wrapper par la division principale dans laquelle se trouve tout votre contenu.

#wrapper {
     width: 960px;
     margin: 0 auto;
}

7.Feuille de style pour impriment (mode économie de papier)

Il est important de prévoir une feuille de style pour chaque média affichant vos articles, vous pouvez faire cela en utilisant l’attribut media de la balise link lorsque vous importez vos CSS.

<link rel="stylesheet" href="yourpath/print.css" type="text/css" media="print" />

Maintenant, dans la feuille de style, vous devez remplir tout les espace possible avec votre contenu, et donc réinitialiser les propriété margin/padding à 0, réduire le plus possible les espaces entre les lettre, les mots, et les lignes ; ensuite il faudra aussi choisir une police non gourmande en espace et non volumineuse, Arial fera l’affaire.

En gros vous allez obtenu quelque chose comme ça :

/*réinitialisation de la feuille print.css*/
body {margin:0; padding:0; line-height: 1.4em; word-spacing:1px; letter-spacing:0.2px; font: 13px Arial, Helvetica,"Lucida Grande", serif; color: #000;}

Tout ce que vous jugez inutile pour l’impression, comme le logo, la barre de recherche, la sidebar, etc… vous devez l’omettre en mettant la propriété display à none
Ainsi vous obtiendrais quelque chose du genre :

/*Enlever ces élements*/
#logo, #nav, #sidenav, #advertisements, #commentform, .comments {display:none;}

Du moment que l’utilisateur ne pourra pas cliquer sur les URLs pour savoir ou est ce qu’il mènent, Il est important aussi de faire apparaitre les URLs sur les impressions. Pour cela Ajoutez ce qui suit à la feuille de style print.css

/* Afficher les URLs entre paranthèses */
a:link, a:visited {background: transparent; color:#333; text-decoration:none;}
a:link[href^="http://"]:after, a[href^="http://"]:visited:after {content: " (" attr(href) ") "; font-size: 11px;}
a[href^="http://"] {color:#000;}

8.Titre de page dynamique

Le code suivant affiche un titre unique pour chacun de vos articles et pages, vous n’avez qu’as remplacer la balise title qui se trouve dans header.php par celle là :

<title>
	<?php
	if (is_home()) {
		echo bloginfo('name');
	} elseif (is_404()) {
		echo 'Erreur 404 - Page non Trouv&eacute;;
	} elseif (is_category()) {
		echo 'Category:'; wp_title('');
	} elseif (is_search()) {
		echo 'R&eacute;sultats de la Recherche';
	} elseif ( is_day() || is_month() || is_year() ) {
		echo 'Archives:'; wp_title('');
	} else {
		echo wp_title('');
	}
	?>
</title>

9.Afficher votre flux RSS

Faire apparaitre un lien vers votre flux RSS pour augmentez le nombre de vos abonnés.

<div id="rss"> <a href="<?php bloginfo('rss2_url'); ?>" title="Abonnez Vous aux flux RSS"></a> </div>

N’oubliez pas de personnaliser le bouton dans votre feuille de style en utilisant #rss

10.Ajoutez des boutons « Partager dans les réseaux sociaux »

Pour promouvoir vos articles et attirer encore plus de monde, vous pouvez faciliter le partage de vos articles à vos lecteur en mettant à leur dispositions des boutons vers les réseau sociaux les réseaux sociaux les plus connus comme facebook, digg, ou encore twitter.

<a rel="nofollow" href="http://delicious.com/post?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Bookmark sur Delicious">Bookmark sur Delicious</a>

<a rel="nofollow" href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink(); ?>" title="Envoyer cet article &agrave; Digg">Digg this!</a>

<a rel="nofollow" href="http://twitter.com/home?status=<?php echo urlencode("Currently reading: "); ?><?php the_permalink(); ?>" title="Partager cette article sur twitter">Tweet this!</a>

<a rel="nofollow" href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Partager cette article sur StumbleUpon">Stumble this!</a>

<a rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;t=<?php echo urlencode(get_the_title($id)); ?>" title="Partager cet article sur Facebook">Partager sur Facebook</a>

<a rel="nofollow" href="http://blinklist.com/index.php?Action=Blink/addblink.php&amp;url=<?php the_permalink(); ?>&amp;Title=<?php echo urlencode(get_the_title($id)); ?>" title="Partager cet article sur Blinklist" >Blink This!</a>

<a rel="nofollow" href="http://furl.net/storeIt.jsp?t=<?php echo urlencode(get_the_title($id)); ?>&amp;u=<?php the_permalink(); ?>" title="Partager cet article sur Furl">Furl This!</a>

<a rel="nofollow" href="http://reddit.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Partager cet article sur Reddit">Partager sur Reddit</a>