Elle fait pas mal de travaux manuels et elle a envie d’avoir un espace ou montrer ses œuvres. Elle a déjà essayer diverses plateformes de blog et au final m’a demandé de lui installer un petit WordPress.

Nous avons donc fait le tour des thèmes susceptibles de lui plaire et nous sommes tombés sur celui ci : Pretty Theme.

Je lui ai donc fait une petite traduction et je vous propose d’en profiter aussi !

Télécharger le thème !

De cette manière vous pouvez voir continuellement l’évolution de la création de ce template.

Comme d’habitude vos remarques sont les bienvenus !!!

Si vous êtes attentif vous avez sans doute aussi vu le module permettant de switcher de thème facilement. Dans ce module vous retrouvez les thèmes installés sur ce blog qui est un peu un lieu d’étude de WordPress pour moi.

Parmis ceux ci il y’a bien sur un premier essai de déclinaison de simple, j’ai nommé simple blue.

Mais il y’a aussi simple2 !

Pour l’instant c’est un chantier / brouillon / bordel, choisissez le nom qui vous convient le mieux. Voici pourtant les choses que j’ai prévu pour cette future version :

• Gestion des thumbnails via WordPress et ses nouvelles fonctions de thumbnail depuis la version 2.9.
• Ajout d’un fil d’ariane pour la navigation dans les archives.
• Changement de tous les éléments graphiques qui avaient été vite fait par des éléments plus propre.
• Menus retouches CSS pour améliorer le visuel.
• Affichage des catégories pour les billets.
• Un bloc “A la une”.
• Un bloc affichant des brèves (twitt, liens sociaux partagés, je ne sais pas encore comment ca va se faire).
• Des fonctionnalités que vous me demanderez via les commentaires !!!!

Simple est un thème que j’ai créé avec l’envie de choses simples, droites et légèrement ombrées.

Je voulais intégrer plusieurs petites choses dans ce thème :

• La gestion des thumbnail dans les billets.
• Une partie décrivant l’auteur sous le billet.
• Un module de partage ne nécessitant aucun plugin.

Pour l’instant le thème a une dominante de rouge, il est possible que je le décline en d’autres couleurs, vous pouvez le faire aussi tout est libre !

Télécharger le thème

]]> http://beta.chezwanders.info/2009/12/18/theme-simple-par-jw/feed/ 1 http://beta.chezwanders.info/2009/12/17/theme-notepad-choas-par-jw/ http://beta.chezwanders.info/2009/12/17/theme-notepad-choas-par-jw/#comments Thu, 17 Dec 2009 17:39:45 +0000 Jérémy Wanderscheid http://beta.chezwanders.info/?p=66 J’ai travaillé sur le thème Notepad Chaos comme vous avez pu le voir ici ou la.

J’ai fais deux packs, un avec les modifications en anglais et l’autre ou j’ai traduis les éléments textes en français. Ces deux packs sont disponibles au téléchargement en bas de l’article.

Voici les modifications apportées :

L’ajout d’une sidebar dynamique.

J’explique la méthode suivie dans ce billet.

Le principe était surtout de garder le style graphique du thème.

J’ai donc repris les puces, les effets de rollover, le style des titres.

Normalement le thème est bien conservé lors de l’ajout de widgets, si vous avez des bugs n’hésiter pas à me les remontés dans les commentaires !

L’ajout du plugin SexyBookmark dans le thème si le plugin est installé sur le blog.

L’affichage ne se fera pas si le plugin n’est pas installé.

L’ajout d’un script permettant d’afficher des articles relatifs sans aucuns plugins.

Vous pouvez télécharger ces deux packs :

• notepad-chaos by JW
• notepad-chaos_fr par JW

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 !

J’ai remédié a ce manquement en ajoutant le plugin wp-cumulus qui permet d’avoir un très beau nuage de tags avec effet 3D.

L’installation se fait comme d’habitude avec le classique :

• On télécharge sur ce lien.
• On décompresse.
• On active et on configure.

Maintenant il fallait l’intégrer de manière a ne pas dénaturer le thème NotepadChaos.

J’ai donc procédé comme suit :

Création d’une image tags en retouchant l’image des commentaires.

Puis ces lignes ont ajoutés au fichier style.css :

#content .col02 .tags-upper {
height:124px;
background:url(images/tags-upper.gif) no-repeat;
}

Et enfin ces lignes dans le fichiers sidebar.php :

<div class=”categories-btm”></div>
<div class=”tags-upper”></div>
<div class=”categories”>
<ul>
<?php wp_cumulus_insert(); ?>
</ul>
</div>
<div class=”categories-btm”></div>

Juste après la section affichant les catégories.

Une fois le thème Notepad Chaos installé on se rend compte que le pied de page fait appel au contenu de la page about.

Si on veut changer cette page il faut aller en créer une nouvelle, y mettre son contenu puis l’appeler depuis le footer.php du thème.

Changer l’appel de la page dans footer.php

Sur cette ligne :

<?php query_posts(‘pagename=footer’); ?>

Changer about par footer si vous avez créer une page Footer.

Modifier la CSS pour laisser apparaitre plus de texte

Dans le fichier css du thème vous avez une section footer.

#footer-holder .txt {
width:480px;
position:absolute;
top:116px;
left:186px;
font-size:11px;
line-height:16px;
color:#000;
z-index:105;
height:80px;
overflow:hidden;
}

Modifier la valeur height pour augmenter la hauteur de texte qui sera affichée.

J’utilise actuellement le thème Notepad Chaos de Smashing Magazine.

Ce thème est pour l’instant dans sa version d’origine, je vais donc le traduire et l’adapter un petit peu en lui ajoutant une sidebar supportant les widgets.

Pas mal de chose sont configurés en dur dans le thème, comme le menu ou les appels aux pages, je vais aussi adapter cela pour le rendre plus dynamique.

Une fois ce travail d’adaptation fini je fournirai un package complet ici avec un mode d’emploi.