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;
}

Ce travail consiste à ajouter certaines fonctions qui me sembles essentielles à ce thème. Pour l’instant, j’en suis a l’état de WIP, c’est à dire Work In Progress.

Vous aller donc voir des choses étranges, parfois aussi des bugs ou des erreurs sur ce blog. Les choses changent au fur et à mesure de mon travail car je travail en live et mes lecteurs peuvent donc voir en direct ce travail.

Quand le travail sera aboutie je publierai tout ici même !

Et quand mes étapes seront franchies je posterai des tutos pour les expliquées. Vous pouvez donc apprendre en même temps que je découvre et aussi me faire partager ce que vous savez déjà et ainsi participer à ce travail !