Voyons aujourd’hui une application directe de cette technique par la mise en forme de dates.

Visualiser la démo ou télécharger le code source.

• rotations
• translations
• zoom

directement depuis la feuille de style.

La directive à utiliser est :

• -moz-transform
• -webkit-transform

en fonction du navigateur cible.

Vous pouvez visualiser la démo ou bien télécharger les sources de cette dernière.

Je suis preneur de toute remarque ou commentaire pour améliorer les choses !

Ajoutons donc un peu de dynamisme.

Le thème Notepad Chaos a une “sidebar” fixe qui se base sur l’image de fond du thème. Il y’a donc certains éléments qui doivent rester en place pour ne pas dénaturer le travail fait par le designer.

Nous allons donc insérer notre “sidebar dynamique” juste en dessous de la partie “Categories”.

Pour se faire, rien de bien compliquer :

• Dans le fichier sidebar.php ajouter ce code :

<ul>
<?php if ( function_exists(‘dynamic_sidebar’) && dynamic_sidebar(1) ) : else : ?>
<?php endif; ?>
</ul>

• Puis créer un fichier functions.php avec ce code dedans :

<?php
if ( function_exists(‘register_sidebars’) )
register_sidebars(1);
?>

Il est temps de donner du style à cette sidebar !

On peut maintenant ajouter des Widgets via l’interface d’administration de WordPress. Mais tous ces Widgets arrivent sur le site avec le style par défaut qui n’est pas très esthétique.

Qu’a cela ne tienne, allons donc faire un tour dans le fichier style.css et ajoutons ceci :

#content .col02 ul li { list-style-type:none;}
#content .col02 ul li h2 {
font-size:18px;
line-height:22px;
font-weight:normal;
font-family: Times New Roman, Times, Georgia, serif;
margin:20px 0 0 0;
padding:0 0 16px;
background:url(images/line.gif) repeat-x bottom;
}
#content .col02 ul li ul li {
color:#21565E;
border-top:1px solid #ffffbe;
display:block;
padding:4px 0 4px 25px;
background:url(images/bullet-postit.gif) no-repeat 5px 8px;
}

#content .col02 ul li ul li a, #content .col02 ul li a {
color:#21565E;
}

#content .col02 ul li ul li a:hover, #content .col02 ul li a:hover {
color:#000;
text-decoration:none;
}

#content .col02 ul li ul li:hover {
text-decoration:none;
color:#000;
background:url(images/bullet-postit-on.gif) no-repeat 5px 8px #ff5092;
}

#content .col01 .post-inner ul li {
list-style-type:circle;
list-style-position:inside;
}

Je me contente ici de reprendre les éléments graphiques du thème Notepad Chaos pour incorporer ma modification dans le style général du thème.

par contre je me rend compte qu’il n’y a pas de “reset css” sur la feuille de style du thème, je vais donc mettre celui que j’utilise habituellement en place.

/*
Reset CSS by Eric Meye (for more informations please go to :

http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/

*/
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,
b, u, i, center,
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-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}