Voilà le nouveau thème de ce blog, et vous allez dire : encore !
Mais oui !!! J'ai une nouvelle fois changé de thème pour le blog et celui ci j'en suis particulièrement fier.
Donc voilà le nouveau petit thème que je me suis construit

Aperçu du Thème Zen


J'ai voulu faire quelque chose de plus sympa, plaisant au yeux et qui repose. Les couleurs sont donc claires et les tons assez proches pour ne pas paraitre agressifs comme l'étaient en fait les derniers thèmes réalisés.
J'espère que ce nouveau thème va vous plaire et que vous allez vous sentir bien sur notre blog, en tous cas je suis bien parti pour le garder plus longtemps que les premiers celui-là. Il y aura bien sûr quelques améliorations auxquelles j'ai déjà pensé, mais ce ne sera que du bonus.

Bonne nouvelle pour ceux qui m'en avaient fait la demande par mail, mes 3 anciens thèmes vont être à la disposition de qui veux.
Il y a une page spécifique pour les thèmes que j'ai réalisés et 3 billets vont être créés spécialement dans la catégorie dédiée "Mes thème Dotclear" pour discuter de ces anciens thèmes.
Vous retrouverez sur ces billets les liens pour les installations automatique des thèmes ainsi que les plugins dont vous aurez besoin avant de pouvoir les faire marcher ...

Conclusion : je pense qu'il est plus abouti graphiquement et pour une fois je suis satisfait de ce que j'ai fait ;) !!! Il me reste 2/3 bricoles que je dois finioler mais ce n'est rien et dans l'ensemble tout se tient.

Il me reste 2 choses à faire :

  1. Comprendre pourquoi sous Internet Explorer j'ai dans puces qui apparaissent dans la sidebar au niveau du bloc référents alors que ce n'est pas le cas sous firefox. J'ai tenté plein de choses mais rien n'y fait !!!!
  2. Aligner correctement ma barre de navigation horizontale pour qu'elle ai la même position sour Internet Explorer que sous Firefox

Si vous avez des idées pour régler ces 2 problèmes je suis preneur, n'hésitez pas à laisser une solution dans les commentaires. Je vous en remercie d'avance

Pour ce nouveau thème dont vous avez l'aperçu juste au dessus, vous pouvez me laisser des commentaires, des critiques, des suggestions d'améliorations ou bien encore ... des félicitations ;)

MAJ : le thème est maintenant distribué (cf voir les fichiers attachés au billet)

Mise en place de la barre de navigation horizontale

EDIT : comme j'ai beaucoup de demande dans les commentaires pour installer la barre de navigation horizontale, voici dans le détail les modifications à faire sur vos fichiers

Explications pour la mise en place de la navbar horizontale avec les onglets

Ouvrez le fichier template.php du thème

après :

[php]
<h1><a href="<?php dcInfo('url'); ?>"><?php dcInfo(); ?></a></h1>

Placez le code suivant :

[html4strict]
<div id="nav">
	<ul>
		<li><a class="acc" href="<?php dcInfo('url'); ?>" title="Aller &agrave; l'accueil">Accueil</a></li>
		<li><a class="ongl2" href="" title="">Onglet 2</a></li>
		<li><a class="ongl3" href="" title="">Onglet 3</a></li>
	</ul>
</div>

Ensuite ouvrez le fichier style.css et placez à la fin du bloc "L'entête" :

[css]
#nav {
	position: absolute;
	top: 155px;
	left: 5px;
	font-size: 1em;
	text-align: left;
	}

#nav ul	{
	list-style: none;
	background: transparent;
	}

#nav li	{
	display: inline;
	padding: 0px;
	/*height: 26px;
	line-height: 26px;*/
	}
	
#nav a.acc, #nav  a.acc:visited	{
	background: /*transparent*/ url(img/Header/accn.gif) no-repeat left top;
	padding: 5px 5px 5px 5px;
	width: 100%;
	}

#nav a.acc:hover	{
	background: /*transparent*/ url(img/Header/acch.gif) no-repeat left top;
	}
	
#nav a.ongl2, #nav  a.ongl2:visited	{
	background: /*transparent*/ url(img/Header/plann.gif) no-repeat left top;
	padding: 5px 5px 5px 5px;
	width: 100%;
	}

#nav a.ongl2:hover	{
	background: /*transparent*/ url(img/Header/planh.gif) no-repeat left top;
	}

#nav a.ongl3, #nav a.ongl3:visited	{
	background: /*transparent*/ url(img/Header/galn.gif) no-repeat left top;
	padding: 5px 5px 5px 5px;
	width: 100%;
	}

#nav a.ongl3:hover	{
	background: /*transparent*/ url(img/Header/galh.gif) no-repeat left top;
	}
	
#nav li a, #nav li a:visited, #nav li a:hover	{
	text-decoration: none;
	height: 26px;
	line-height: 26px;
	font-weight: bold;
	color: #ffffff;
	}
	
#nav li a:hover	{
	color: #7E9DD6;
	}

Dans les fichiers attachés ci-dessous, téléchargez imagesnavbar.zip qui contient les images utilisées pour cette barre de navigation. Ces fichiers images sont à uploader dans le repertoire de votre thème : /img/Header/

Uploadez sur le serveur les fichiers template.php et style.css à la racine de votre thème et rafraichissez la page : la voilà