dKret : créer une feuille de style

Le thème que nous utilisons, dKret, permet de personnaliser assez facilement son blog. En effet, Jörn Kretzschmar, le développeur, l’a conçu de telle sorte, qu’il est possible de fabriquer sa propre feuille de style. Cela permet, notamment, de conserver sa présentation lors des mises à jour du thème.

Mise à jour le

Les modifications proposées ici ont été utilisées avec les versions de dKret3 jusqu’à la version 2.4. A partir de la version 2.5, l’architecture de dKret3 a été modifiée

Quelques exemples de blogs utilisant dKret

Quelques blogs utilisant dKret sont mentionnés sur la page dKret : des blogs utilisant dKret.

Téléchargez nos feuilles de styles

Si vous voulez utiliser nos feuilles de style ou si vous souhaitez vous en servir comme point de départ pour personnaliser la vôtre, téléchargez-les !

La feuille de style de Lise pour dKret3 version 2.0 (compatible jusqu’à WordPress 2.6)

• Téléchargez ma feuille de style pour dKret3 2.0

La feuille de style de Lise pour dKret3 2.4 (pour WordPress 2.7)

Mise à jour le 20 décembre 2008

dKret3 depuis la version 2.1 prend en compte les modifications de WordPress 2.7 mais devrait être compatible avec WordPress 2.6.

• Téléchargez ma feuille de style pour dKret3 2.4

La feuille de style de Yin-Yin

Téléchargez la feuille de style de Yin-Yin.

PREMIERE PARTIE PAR LISE

Les options déjà proposées

En standard, dKret permet déjà une certaine personnalisation.

Il est par exemple possible

• de choisir un entête personnalisé,
• de montrer une image d’entête aléatoire,
• d’afficher ou non les fils RSS dans la barre de menu,
• d’afficher ou non des sous-menus, et de choisir le nombre de niveaux affichés,
• ou de choisir un des styles proposés : une barre latérale, à droite ou à gauche, deux barres latérales, aucune barre latérale, petite police, affichage de la page à la taille de l’écran,…

[Diaporama]

Les feuilles de styles

La présentation du thème est défini dans le fichier style.css. Les différents styles proposés se trouvent dans le répertoire …/themes/dkret3/schemes/

La façon la plus simple de commencer à travailler avec les feuilles de styles est de démarrer depuis une feuille de style existante. Pour ma part, j’ai commencé avec la feuille fluidelity.css que j’ai renommée lise_fluidelity.css ; c’est le nom qui apparaît dans la liste de choix dans la page des options du thème.

Adaptation à la taille de la fenêtre

Les lignes qui suivent sont celles du thème fluidelity.css et permettent que l’affichage du blog s’adapte à la fenêtre du navigateur. Essayez de réduire ou agrandir la vôtre, vous verrez !

 /*Theme Name: dkret3
Userstyle: lise_fluidelity
Description: Modele personnalise pour le theme dKret.
Version: 1.0 */
 
div#wrapper {
      width: auto;
      max-width: 1100px; /* Largeur maximum du blog*/
}
.access-rss {
      background: none;
      padding: 0;
}
.access-rss-comments {
      border-right: 1px solid #aaa;
      margin: 0 2px;
      padding: 0 2px 0 22px;
}

Petite police

Puis j’ai recopié le fichier Small_Fontsize.css de façon à afficher une petite police :

body {
      font-size: 0.8em;
}
#header {
      font-size: 1.1em;
}
.sidebar.column {
      font-size: 1em;
}

Soulignement et couleur des liens

Afin que les liens soient soulignés en permanence et qu’ils s’affichent dans la couleur souhaitée, j’ai inséré le code suivant :

.entry-content a {
      text-decoration: underline;  /*soulignement des liens*/
}
 a {
 	    color: #339900;  /* couleur des liens*/
}

Couleur du titre et du sous-titre du blog dans l’entête

#blog-title {
      font-size: 2.3em;
      padding: 15px 80px 0;
      color: #003300;
}
#blog-description {
      font-size: 1.5em;
      padding: 0 80px 0;
      color: #003300;
}
#header h1 a {
      font-size: 1.5em;
      color: #003300;
}

Titre des articles et des pages

J’ai choisi de changer la couleur des titres de niveaux 2, 3 et 4 ; j’ai laissé par défaut le changement de couleur au passage de la souris (a:hover).

h2, h2 a, h2 a:hover, h3, h3 a, h3 a:hover, h4, h4 a, h4 a:hover {
      color: #006699;
}
h3, h3 a, h3 a:hover {
      border-bottom: 1px dotted #006600; /*soulignement des titres de niveau 3 par une ligne pointillée*/
}

Couleur des menus et sous-menus

Pour écrire ce bout de code, je me suis inspirée de ce qu’avait fait yin-yin qui a bien voulu m’envoyer son script, notamment pour l’affichage du fond « vert pointillé » des sous-menus.

J’ai créé une image que j’ai nommée stri.gif que j’ai placée dans le répertoire lise_images, lui même se trouvant dans le dossier wp-content/themes/dkret3/schemes/.

/*couleur des liens*/
#menu a {
      color:#336666;
}
#menu a:hover {
      color:#00CCFF;
}
/*couleur des sous-menus*/
#menu li ul {
      background:transparent url(lise_images/stri.gif) repeat scroll left top; /*premier sous-menu*/
}
#menu li li ul {
      background:transparent url(lise_images/stri.gif) repeat scroll left top; /*deuxième sous-menu*/
}
#menu li li li ul {
      background:transparent url(lise_images/stri.gif) repeat scroll left top; /*troisième sous-menu*/
}

La barre latérale

Là encore, je me suis largement inspirée de ce qu’avait fait yin-yin. En effet, l’affichage par défaut des widgets manquait de clarté, j’ai donc souhaité des séparations plus nettes.

J’ai réutilisé mon image stri.gif, et choisi de l’encadrer de lignes pointillées.

.sidebar h2, .bottombar-column h3, .sidebar h3, .widget_title, #wp-calendar caption {
      background:transparent url(lise_images/stri.gif) repeat scroll left top;
      border-top: 2px dotted #444;  /*ligne pointillée en haut*/
      border-bottom: 2px dotted #444;  /*ligne pointillée en bas*/
      margin: 15px 0 5px;
      padding:6px 0pt 6px 2px;/*pour placer le titre du widget dans un cadre*/
}

J’ai choisi de présenter de la même façon le widget qui affiche les pages et les sous-pages :

#pages {
      background:transparent url(lise_images/stri.gif) repeat scroll;
      border: 2px dotted #444;
      margin: 15px 0 0;
      padding: 7px 7px 0;
}

Pied-de-page

J’ai également changé la couleur des liens dans le pied de page :

#footer a {
      color: #339933;
}

La barre inférieure (au dessus du pied-de page)

De la même façon que pour la barre de menu, je peux modifier la barre inférieure.

div#bottombars {
	background: transparent url(lise_images/stri.gif) repeat scroll; /*image de fond de la barre inferieure*/
	border-top:  1px dotted #9CC; /*ligne superieure en pointillé*/
}

Icônes du calendrier et de l’auteur

J’ai modifié les couleurs, la taille et la bordure du petit éphéméride qui s’affiche devant chaque billet du blog, et supprimé, sur la proposition de Christine, la petite icône présente devant le nom de l’auteur.
Les commentaires sont saisis sans lettre accentuée ni apostrophe.

.entry-calendar-date {
	border: 1px dotted #9CC; /* bordure du calendrier */
	color: #363;	/* couleur du mois*/
	font-size: 0.9em; /*petite police du calendrier */
}
.entry-calendar-date .entry-calendar-day {
	color: #C33;	/* couleur du jour */
}
.entry-calendar-date .entry-calendar-year {
	color: #363;	/* couleur année */
}
.post .author, .entry-meta  .author  {
	background: url(none); /* suppression icône auteur */
	padding: 0 0 0 0px; /*suppression espace avant nom auteur*/
}

Par défaut, le fichier style.css affiche une icône devant le nom de l’auteur, icône pour laquelle est indiquée une url. Je précise donc dans mon code qu’il n’y a pas d’url. Cette icône est précédée d’un espace, que je supprime également, en mettant le dernier chiffre de padding à zéro.

Style de puce

Pour répondre au commentaire de Gene, voici comment modifier les puces, de façon que les deux niveaux disposent d’icônes différentes. Les images sont copiées dans le répertoire wp-content/themes/dkret3/schemes/image/lise-images.

La modification des puces affecte l’ensemble du blog, et donc l’affichage des articles liés si on utilise des mots-clés (image de droite) mais pas l’affichage dans la barre latérale ou celle située au-dessus du pied-de-page.

#content ul li {
	background: url(lise_images/bullet_go_bleu.gif) no-repeat 0 1px; /*premier niveau*/
	padding: 0 0 0 16px;
}
#content ul ul li {
	background: url(lise_images/bullet_sub_bleu.gif) no-repeat 0 1px; /*deuxième niveau*/
	padding: 0 0 0 20px;
}

DEUXIEME PARTIE PAR YIN-YIN

J’ai créé un dossier dans le répertoire schemes afin d’y placer mes images. Nous avons choisi, Lise comme moi-même, de nommer ce répertoire avec notre nom de « blogmaster ».

.../themes/dkret3/schemes/lise_images/
et
.../themes/dkret3/schemes/yin-yin_images/

Vous pourrez y placer toutes les images servant à la personnalisation de votre thème.

Fond du blog

Pour personnaliser le fond d’écran du blog il faut ajouter le code suivant :

body {
	padding: 15px 0 15px 0; /* Ajouter un espace en haut du blog.*/
	background: url(yin-yin_images/fond.gif); /* Image de fond personnnalisée*/
	background-attachment:fixed; /* Pas de défilement du fond*/
}

Ne pas oublier de télécharger votre image de fond dans le répertoire « image ».

Fond du contenu du blog

Pour modifier le fond du contenu du blog il faut ajouter le code suivant:

#container {
	background: transparent url(nom_images/votre_fond.gif); /*modifier l'image de fond du contenu du blog. */
	}
ou
#container {
	background: #BBBBBB; /*modifier la couleur du fond du contenu du blog. */
	}

Barre de menu

Pour changer l’image de fond ou la couleur de la barre de menu ajouter le code suivant :

#access {
	background: transparent url(nom_images/votre_nav.gif) repeat-x; /*modifier l'image de fond de la barre de menu.*/
	border-bottom: none; /*supprime le soulignement de la barre de menu.*/
	}
ou
#access {
	background: #BBBBBB; /*modifier la couleur de fond de la barre de menu.*/
	border-bottom: none; /*supprime le soulignement de la barre de menu.*/
	}

Police et couleur de police

Pour la police et la couleur principale de police il faut ajouter le code suivant :

{
color:#474747; /* Couleur principale de police.*/
font-family:'Lucida grande','Lucida Sans Unicode',Verdana,Geneva,Arial,Sans-Serif; /* Liste des polices.*/
}

Il faut noter que les polices sont « appelées » dans l’ordre de votre saisie (ne pas oublier d’ajouter des apostrophes de chaque côté du nom de la police si celui-ci contient plusieurs mots).

Zone méta

Pour modifier le fond de la « zone meta » (cadre sous les articles de la page d’accueil et lors de l’affichage d’un article seul) il faut ajouter le code suivant :

.entry-meta, #now-reading-statistic {
background:transparent url(images/fond.gif) repeat scroll left top; /* Image ou couleur de fond de la zone.*/
border-top:1px solid #BBBBBB; /* Couleur et style de la bordure supérieure.*/
border-bottom:1px solid #BBBBBB; /* Couleur et style de la bordure inférieure.*/
}

Ajout de Lise

Pour ma part, j’ai modifié la zone méta comme ceci :

.entry-meta, #now-reading-statistic {
	background:transparent url(lise_images/meta.gif) repeat scroll left top;  /*image de fond*/
	border-bottom: 1px dotted #9CC; /*ligne inférieure en pointillé*/
	border-top: 1px dotted #9CC; /*ligne supérieure en pointillé*/
}

On peut également choisir une couleur unie pour le fond :

.entry-meta, #now-reading-statistic {
	background:#CFC; /*couleur de fond*/
	border-bottom: 1px dotted #9CC; /*ligne inférieure en pointillé*/
	border-top: 1px dotted #9CC; /*ligne supérieure en pointillé*/
}

Bordure des images

Pour personnaliser les bordures de vos images ajouter le code suivant :

/* bordure des images */
.image, .entry-content img, img.alignleft, img.alignright, img.aligncenter, .entry-gallery-image img {
	border:1px solid #BBBBBB; /* Epaisseur et couleur*/
	padding: 2px;
}

Pour masquer la bordure il faut saisir « border:0px ».

Alignement et bordure des smileys

L’alignement par défaut d’un smiley (émoticon en français) se fait en bas par rapport à la ligne de base du texte.
J’ai choisi de les aligner au milieu verticalement en insérant le code suivant :

/* alignement et bordure des smileys */
.entry-content .wp-smiley, .wp-smiley {
      vertical-align:middle; /* Smileys alignés verticalement au milieu du texte*/
      border: 0 !important; /* Aucune bordure*/
}

Bloc de citation

Le bloc de citation (traduction Française de « blockquote » ) défini par défaut dans le thème dkret3 me paraissait un peu trop « grossier ». J’ai donc modifié l’image des guillemets et la couleur de fond.

• Pour les articles et les pages ajouter le code :

/*  Blocs de citation dans les articles et les pages */
blockquote {
 
 
	background:#FBFBFB url(yin-yin_images/guillemet.gif) no-repeat scroll left top; /* Couleur et Image de guillemets personnalisés*/
	border:1px solid #EBEBEB;
	display:block;
	font-size:0.9em;
	margin: 5px 15px;
	padding: 5px 20px;
}

• Pour les commentaires ajouter le code :

/*  Blocs de citation dans les commentaires et adaptation au plugin "WP Ajax edit comment" */
#comments blockquote, #live-preview blockquote {
	background:#FBFBFB url(yin-yin_images/guillemet.gif) no-repeat scroll left top; /* Couleur et Image de guillemets personnalisés*/
	border:1px solid #EBEBEB;
	display:block;
	font-size:0.9em;
	margin:5px 30px 10px 0pt;
	padding:5px 10px 5px 17px;
}

Footer

J’ai modifié le fond du pied de page en y ajoutant une image :

#footer {
	background: url(yin-yin_images/nav.gif) repeat-x; /* Image de fond du footer.*/
}

J’ai également changé la couleur et la “décoration” des liens dans le pied de page :

#footer a {
	color: #109DD0;
}
#footer a:hover {
	color:#109DD0;
	text-decoration:underline;
}

Pour changer la couleur de police du nom du blog dans le pied de page :

#copyright {
		color: #EEEEEE; /* Couleur du titre du blog dans le footer.*/
}

Ajout de Lise (18 septembre 2008)

Pour réduire la taille de la police du pied-de-page :

#footer {
	font-size: 90%;
}

C’est ce que j’ai effectué dans la page consacrée au Forum, car j’ai utilisé comme point de départ la feuille de style sans barre latérale No-sidebar, qui est plus étroite.

Evidemment, ce ne sont que quelques exemples que nous vous invitons à essayer sur une base de test, en vous inspirant du fichier style.css mentionné plus haut.

A venir :

• Astuces et bidouilles