dKret : utiliser le sous-thème Illumini

Comme nous l’avions indiqué dans la page dKret : créer une feuille de style, le thème dKret est facilement personnalisable.

Mise à jour le 25 décembre 2008 @ 22:02

Cette page est en cours de rédaction…

Personnaliser son thème avec les feuilles de styles fournies

De base, il est possible de personnaliser l’entête, de choisir parmi les différentes feuilles de style.

Par défaut, le répertoire dKret3 est installé dans le dossier wp-content > thèmes. Pour l’activer, il faut aller dans Apparence > Thèmes et cliquer sur la vignette représentant le thème souhaité.

Jörn, le développeur de dkret, a créé deux sous-thèmes, Illumini et Illuminidi. Pour les activer, il suffit de les placer dans le répertoire wp-content > thèmes et de les choisir dans le panneau Apparence > Thèmes. Ces deux sous-thèmes ont besoin de dKret pour fonctionner, ils en reprennent quelques éléments.

Dans chacun de ces répertoires, dkret3, Illumini ou Illuminidi se trouve un fichier style.css. C’est ce fichier qui définit le thème. Il existe un sous répertoire schemes qui comprend plusieurs fichiers.

Dans l’exemple ci-dessous, j’utilisais le thème dKret, en cliquant sur la vignette Illumini, j’ai activé ce dernier. Une fois le thème sélectionné, dans Apparence > options Illumini, on peut choisir l’un des fichiers situés dans le répertoire schemes.

Les feuilles de styles fournies

Voilà quelques captures d’écran montrant les différentes personnalisations possibles.

Créer sa propre feuille de style

On peut également, à partir des fichiers proposés construire sa propre feuille de style. Cela permet, lors de la mise à jour du thème, de conserver sa personnalisation sans avoir besoin de tout recommencer !

Suite à un commentaire que j’avais laissé sur la page de Jörn, le développeur du thème, celui-ci m’indique qu’il apporte encore quelques modifications à la version définitive de dKret3 2.4. Les exemples ci-dessous pourront donc être modifiés dans les prochains jours… En vous rendant sur son blog, vous verrez par exemple que le survol par la souris des menus déroulants donne un nouvel effet !

Adaptation à la taille de la fenêtre

Comme pour dKret, j’ai pris comme point de départ une feuille de style existante, Sidebar-Right-Fluid, qui comme son homologue pour dKret, permet un affichage du blog qui s’adapte à la fenêtre du navigateur.

/*Theme Name: Illumini
Userstyle: Sidebar-Right-Fluid modifie par Lise
Description: Two-column fluid layout with sidebars to the right of content
Version: 1.0
*/
div#wrapper {
	width: 100%;
	max-width: 1100px; /* largeur maxi de la page */ 
}
div#container {
	float: left;
	margin: 0px -270px 50px 0;
}
/* largeur de la partie gauche */
div#content {
	margin: 0 350px 0 0; /* marge droite de la partie gauche de la feuille */
}
/* largeur de la barre latérale */
div.sidebar {
	display: block;
	float: right;
	overflow: hidden;
	padding: 0 15px 0 25px;
	width: 290px; /* largeur de la barre latérale */
}
div#primary	{
	margin: 25px 0 0;
}
div#secondary	{
	margin: 0 0 20px;
	clear: right;
}
.sidebar-column {
	background: #f6f6f6;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	font-size: 0.9em;
	overflow: hidden;
	padding: 0 5px 10px;
	width: 44%;
}
#sidebar-column1 {
	float: left;
	margin: 15px 0;
}
 
#sidebar-column2 {
	float: right;
	margin: 15px 0;
}

Pour ceux qui souhaitent en savoir davantage sur les dimensions de la page, notamment sur la configuration de la barre latérale, et qui parlent allemand, je vous invite à vous reporter aux explications que Jörn a mises en ligne sur ce sujet.

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 { 			 /* couleur des liens */
 	color: #009900;}      
a:hover	{ 	 /* couleur des liens au survol de la souris */
	color: #33CC66;              
	text-decoration: none;
 	}

Titre des articles et des pages

 
.blog .entry-title {    
	text-align: left;	 /*alignement à gauche du titre des billets sur la page du blog */
}
.entry-header {
	text-align: left;	/*alignement à gauche de la date sous le titre des billets sur la page du blog */
}
h2, h2 a, h3, h3 a, h4, h4 a {
	color: #006600;	 /* couleur des titres de niveau 2, 3 et 4, avec ou sans lien */
}
 
#content h2 a:hover, #content h3 a:hover, #content h4 a:hover  {  
	color: #33CC66;	 /* couleur des titres de niveau 2, 3 et 4, au passage de la souris  */
}
 
h3, h3 a, h3 {
	border-bottom: 1px dotted #006600;	/*soulignement des titres de niveau 3 par une ligne pointillée*/
}

Barre de menu en haut du blog et barre du pied-de-page

Comme pour dKret, j’ai créé un répertoire images dans le dossier wp-content/themes/illumini/schemes/, dans lequel j’ai placé une image meta.gif.

#access {
	background: transparent url(lise_images/meta.gif) repeat scroll;	/* mon image utilisée pour le menu */
	border-bottom: 1px dotted #9CC;   /*soulignée par une ligne pointillée */
}
div#bottombars {
	background: transparent url(lise_images/meta.gif) repeat scroll;	/* mon image utilisée pour le pied de page */
	border-top:  1px dotted #9CC;	/* ligne du haut en pointillé */
}

Menu et sous-menu

Dans cette version de dKret, le code a changé, nous utilisions précédemment #menu, il faut maintenant utiliser .menu.

.menu a {
	color:#006600;	 /* couleur des liens */
}
.menu a:hover {
	color: #33CC66;	 /* couleur des liens au survol de la souris */          
}
.menu li ul {        	 /*couleur du premier sous-menu */
	background:transparent url(lise_images/meta.gif) repeat scroll left top;
	border: 1px dotted #9CC;
}
.menu li li ul {	 /*couleur du deuxième sous-menu */
	background:transparent url(lise_images/meta.gif) repeat scroll left top;
	border: 1px dotted #9CC;
}

Couleur des titres de la barre latérale

.sidebar h2, .bottombar-column h3, .sidebar h3, .widget_title, #wp-calendar caption {
	background:none;		/* aucun fond */
	color: #003300;		/* couleur du titre de la barre latérale */
	border-top: 1px dotted #444;	/* ligne supérieure pointillée */
	border-bottom: 1px dotted #444;	/* ligne inférieure pointillée */
	margin: 15px 0 5px;
	padding:6px 0pt 6px 2px;
}

Widget affichant les pages dans la barre latérale

#pages {
	background:transparent url(lise_images/meta.gif) repeat scroll; /* avec mon image pour le fond */
	border: 1px dotted #444; /* encadrement ligne pointillée*/
	margin: 15px 0 0;
	padding: 7px 7px 0;
}

Citations

blockquote {
/*  Blocs de citation dans les articles et les commentaires  en utilisant mon image pour le fond */
	background:transparent url(lise_images/meta.gif) repeat scroll left top;
	border: 1px dotted #444;		/* encadré par une ligne pointillée */
	display:block;
	font-size:0.9em;			/* taille de la policie */
	margin: 5px 15px;
	padding: 5px 20px;
	}

Couleur de la bande meta (bande affichée sous les articles du blog)

.entry-meta, #now-reading-statistic {
	color: #aaa;
	background:transparent url(lise_images/meta.gif) repeat scroll; 	/* fond de la bande meta */
	border-bottom: 1px dotted #9CC; 	/* bordure supérieure en pointillé */
	border-top: 1px dotted #9CC;	/* bordure inférieure en pointillé */
	text-align: left;	/* texte aligné à gauche */
}
.entry-meta a, .entry-meta .entry-date {
	color: #009900;	/* couleur des liens */
}
.entry-meta a:hover {
	color: #33CC66;	/* couleur des liens au survol de la souris */
}

Modification du pied de page

Les indications mentionnées dans le pied de page, comme le copyright, sont celles définies dans le fichier footer.php de dKret qui se trouve dans wp-content/themes/dkret. Voir à ce sujet la page dKret : insérer un copyright dans le pied-de-page.

#footer {
	background: none;	/* aucun fond */
	text-align: center;	/* texte centré */
}
#footer a {
	color: #006600;	 /* couleur des liens */
		 }
#footer a:hover	{
	color: #33CC66;	/* couleur des liens au survol de la souris */
 	}

Style de puce de niveaux 1 & 2

Pour personnaliser les puces, j’ai dû mettre en commentaire 4 lignes du fichier style.css qui se trouve dans le répertoire wp-content/themes/illumini/ ; ces lignes étaient destinées à ne pas faire apparaître de puce. Il est vraisemblable que pour cette partie, des modifications seront apportées par Jörn dans la prochaine version.

/*.sidebar ul ul li, .bottombar-column ul ul li {
	background: none;
	padding: 0;
}*/

J’ai placé deux fichiers images dans le répertoire wp-content/themes/illumini/schemes/lise_images de façon à personnaliser les puces. Après avoir mis en commentaires les lignes ci-dessus, les puces par défaut sont celles du thème dKret, que vous pouvez voir ici, dans la barre latérale ; avec le code ci-dessous les puces apparaissent comme ceci :

  • première puce de niveau 1
  • deuxième puce de niveau 1
    • première puce de niveau 2
    • deuxième puce de niveau 2

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

Couleur des commentaires de l’auteur d’un article

Lorsque l’auteur de l’article répond à des commentaires, ses propres commentaires s’affichent dans une couleur distincte.

Pour changer cette couleur, j’ai dû modifier le fichier style.css qui se trouve dans le répertoire wp-content/themes/illumini/, car mes changements ne sont pas prises en compte quand je les insère dans ma feuille de style.

#content .commentlist li.bypostauthor {
	background: #CCFFCC;
}

Ascenseur pour l’insertion de code

Lorsqu’on présente du code dans un article, comme je le fais ici, il arrive que les lignes de code soient plus longues que la largeur de la page. Il est donc nécessaire de disposer d’un ascenseur horizontal pour lire le code entièrement.

code, pre {
  background: #E8EFE8;
  display: block;
  overflow: auto; 
  margin: 10px 0 10px 0;
  padding: 5px;
}

Ajout de code pour adapter quelques plugins à ma feuille de style

Correction de l’affichage de WP-Syntax, qui colorise les lignes de code, comme vous le voyez ici

.wp_syntax {
  color: #100;
  background-color: #FFFFFF;
  border: 0px solid #FFFFFF;
  margin: 0 0 1.5em 0;
  overflow: auto;
}
.wp_syntax pre {
	overflow: auto;
}

Modification de la feuille de style pour NextGEN Gallery, pour l’assortir à mes couleurs ;-)

.ngg-gallery-thumbnail img:hover {
	background-color: #99CC99; /* couleur du cadre des vignettes au survol de la souris */
}

Modification de la feuille de style pour PageBar, pour l’assortir à mes couleurs ;-)

.pagebar a,
.pageList .this-page { 
	padding: 2px 6px 5px; border: solid 1px #99CCCC; /* couleur de la bordure des numéros de page */
}
.pagebar a:visited { border: solid 1px #99CCCC; } /*couleur du lien */
.pagebar a:hover { background: #99CC99; border-color: #CCFFCC; } /* couleur du lien au survol de la souris */

A suivre… ;-)


Ecrit par Lise - Site
Mot(s)-clé(s) ,

2 commentaires

Ecrire un commentaire»
  1. nico

    Bonjour,
    je suis en train d’installer le meme theme que vous sur mon blog (interet pour les menus deroulants) et je souhaiterais ajouter les sous themes Illumini ou Illuminidi, or, je ne les trouve pas sur le site du développeur.
    peut etre n’y sont ils plus ou alors, je ne cherche pas au bon endroit ?
    pouvez vous m’aider
    d’avance merci et bravo pour votre blog tres vivant

    1. Apparemment, le développeur ne travaille plus sur ses thèmes, les sous-thèmes ne semblent plus se trouver sur son blog. Je verrai à mon retour sur Paris si je les ai stockés sur mon disque dur.

      Je réponds par la même occasion à votre autre message :

      je me permets de vous poser cette question, j’utilise le meme theme que vous et j’aimerais insérer un lien externe dans un menu déroulant. par ex, sur votre site, le menu « mentions legales » de ? renverrait vers un site externe.
      pensez vous que cela soit possible d’avance merci et bravo pour votre travail

      Oui, c’est tout à fait possible. Il faut créer une page nouvelle avec le titre que vous souhaitez et la renoyer vers un lien externe grâce à une extension comme page Link To, que je décris brièvement ici.
      Ensuite, vous insérez cette page dans un de vos menus.

Laisser un commentaire

Votre adresse mail ne sera jamais rendue publique ni utilisée.

*Si vous écrivez un commentaire ici pour la première fois, celui-ci ne sera publié qu'après validation par un administrateur du blog. Ne l'envoyez pas plusieurs fois !
*Bien sûr, tout commentaire injurieux, publicitaire ou spam sera supprimé.
*C'est à vous maintenant !

(obligatoire)
(obligatoire)

Laisser ces deux champs tels quels :

Protégé par Invisible Defender.


  • Mentions légales
    Les différents éléments du Blog de Lise restent la propriété de leur(s) auteur(s) respectifs.


Clef two-factor authentication