pyeb theme 2 dotclear - Tag - Liquide

Bréderode, Slottsbacken & Thames Street, pattern is hype

pyeb — Sun, 22 Apr 2007 00:38:00 +0200

En cette journée toute présidentielle, trois nouveaux thèmes avec une barre de navigation à gauche, à droite et au centre - en bas quoi. Surtout rien à l'extrême-droite ni rien sur l'identité nationale. Fini les grands aplats de couleur, le papier peint est à la mode. Nostalgie quand tu nous tiens ! Un cadre tout doré pour encadrer des photos, des tableaux.

Avec les navigateurs modernes - suivez mon regard… -, la transparence laisse paraître les motifs gris et bleus. Le rouge se marrie avec l'orange mais juste dans les rêves éveillés. Sous l'ineffable IE 6, la transparence disparaît et la structure devient fixe mais tout est fonctionnel. Ouf ! Un grand au revoir avant la prison.

Les thèmes sont plutôt adaptés à une résolution 1024 x 768 px même si le 800 x 600 px est fonctionnel.

Télécharger Bréderode, Slottsbacken et/ou Thames Street.

tabsOne with jQuery

pyeb — Sat, 24 Feb 2007 18:51:00 +0100

tabsOne est un thème 1 colonne utilisant le script jQuery Tabs permettant de substituer une partie de la sidebar par des onglets. Les widgets Recherche, Liste des Catégories, Tags, Liens de navigation, Langues du blog et Liens d'abonnement font partis des onglets. Les autres widgets s'affichent normalement dans le menu latéral après les billets.

Le thème par défaut est anis/noir/orange mais il existe aussi des feuilles de styles en bleu/noir/orange et magenta/noir/anis.

Attention pour assurer un thème valide, il faut absolument que le widget Recherche ne soit pas dans les bandeaux du menu latéral.

Télécharger le thème.

Troisième pas en jQuery avec Dotclear 2, création d’onglets avec effets de transition et intégration au thème Freshy

pyeb — Tue, 06 Feb 2007 11:20:00 +0100

La mise en œuvre d’un menu de navigation par onglet demande de modifier les fichiers de structure de Dotclear 2, cela va permettre un peu de créativité et donc de chambouler la structure classique d’un blog DC2.

Le script jQuery utilisé est Tabs. Deux exemples, tout d’abord celui de l’auteur, exemple des différents possibilités et effets de transition, et, ensuite, celui de Pep tant qu’il ne change pas de thème.

La première partie portera sur la construction et l’intégration d’un menu de navigation par onglet s’insérant dans la structure de Dotclear 2. La deuxième partie s’intéressera à l’imbrication des effets affichage/masquage dans un menu de navigation existant – celui intégré dans le somptueux thème Freshy -, à l’utilisation des templates de Dotclear 2 et à la bataille de la comptabilité avec les principaux navigateurs internet.

Télécharger le thème freshyOne.

Menu de navigation par onglet avec des effets de transition

L’environnement Tabs comprend une fonction jQuery, un modèle html et deux feuilles de styles – l’une standard et l’autre pour Internet Explorer évidemment – pour fonctionner correctement.

La structure html

Le modèle html se découpe en deux parties : les titres des onglets et le contenu des onglets. Une division encadre la structure html, un id, tabs, lui est affecté et servira à appeler la fonction jQuery. Une liste non numérotée est utilisée pour les titres des onglets, la classe anchors lui est appliquée pour gérer précisément cette liste avec les feuille de styles.

<div id="tabs">
<ul class="anchors">
<li><a href="#tabs1">Section 1</a></li>
<li><a href="#tabs2">Section 2</a></li>
<li><a href="#tabs3">Section 3</a></li>
</ul>

Chaque élément de la liste pointe vers la division du contenu d’un onglet, ex : <a href="#tabs2">.
A chaque division du contenu d’un onglet, la classe fragment est ajoutée. L’affichage/masquage de chaque contenu des onglets est géré par le script Tabs.

<div id="tabs1" class="fragment">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div id="tabs2" class="fragment">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div id="tabs3" class="fragment">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>

Le chargement du script et des feuilles de styles

Le fichier _head.html contient les éléments suivants.

<style type="text/css" media="screen">
@import url({{tpl:BlogThemeURL}}/style.css);
</style>
<style type="text/css" media="print">
@import url({{tpl:BlogThemeURL}}/../default/print.css); 
</style>

Pour ajouter Tabs dans un thème, le fichier _head.html doit être soit créé en insérant le code ci-après soit modifié en remplaçant le code précédent par le code suivant.

<style type="text/css" media="screen">
@import url({{tpl:BlogThemeURL}}/style.css);
@import url({{tpl:BlogThemeURL}}/tabs.css);
@import url({{tpl:BlogThemeURL}}/tabs-ie.css);
</style>
<style type="text/css" media="print">
@import url({{tpl:BlogThemeURL}}/../default/print.css);
</style>
<script type="text/javascript" src="{{tpl:BlogThemeURL}}/../default/js/jquery.js"></script>
<script type="text/javascript" src="{{tpl:BlogThemeURL}}/jquery.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#tabs').tabs();
});
</script>

Les feuilles de styles pour Tabs sont importées puis la librairie jQuery et le script Tabs.
L’appel du script Tabs se fait sur la division des onglets ici avec l’id tabs avec le code $('#tabs').tabs();.

Les princiales options du script jQuery Tabs

{fxSlide: true} (effet de transition)
L’onglet précédent monte puis l’onglet activé descend.
{fxFade: true} (effet de transition)
L’onglet précédent s’éclaircit puis l’onglet activé apparaît.

Ces deux efets peuvent être combines entre eux.

{fxSpeed: 'slow'/'normal'/'fast'/’0 à 1000’}
Cette option permet de définir la vitesse des effets, elle peut être définie selon la rapidité ou en millisecondes.

{fxShow: {height: 'show', opacity: 'show'}} et {fxHide: {height: 'hide', opacity: 'hide'}} (effet de transition)
Effet d'animation qui réduit les onglets et éclaircie ou opacifie les onglets.

Choisir l'onglet sélectionné par défaut Par défaut, le premier onglet, ici la Recherche, est sélectionné. Il suffit d'indiquer le numéro d'onglet à sélectionner par défaut. Par exemple, l'onglet tabs3 sera l'onglet par défaut, le code sera $('#tabs').tabs(3);. Le nombre est celui de la position de l'onglet. Le code avec l'application d'effet est $('#tabs').tabs(3,{fxFade: true});

freshyOne, jQuery et template Dotclear 2

L’utilisation et l’installation du script jQuery Tabs sont assez simples. Son imbrication dans un menu sophistiqué comme celui de Freshy percute les comportements erratiques des différents navigateurs. Le principal point noir reste Internet Explorer mais pas que lui…

Au travail ! L’utilisation du script Tabs permet de se passer du menu latéral, les templates de DC2 permettent d’obtenir le code html des principaux widgets à l’exception notable des Liens. C’est un choix radical de navigation. Ainsi, le menu de navigation comprend la recherche, les catégories, les tags, les archives, les langues et les flux de syndication.

Modifier les fichiers template

Le contenu du fichier _head.html reste le même, il faut juste remplacer $('#tabs').tabs({}); par $('#frame').tabs({fxSlide: true});.

Le fichier _top.html comprend :

<div id="top">
<h1><span><a href="{{tpl:BlogURL}}">{{tpl:BlogName encode_html="1"}}</a></span></h1>
</div>
<div id="header">&nbsp;</div>
{{tpl:include src="_menu.html"}}
<p id="prelude"><a href="#main">{{tpl:lang To content}}</a> |
<a href="#frame">{{tpl:lang To menu}}</a> |
<a href="#search">{{tpl:lang To search}}</a></p>

La structure html des onglets se trouve dans un nouveau fichier _menu.html. Tout d’abord, le code pour le titre des onglets sans template DC2 mais avec l’imbrication du menu de navigation de Freshy.

<ul class="menu">
<li class="page_item"><a class="first_menu" href="#search">Recherche</a></li>
<li class="page_item"><a href="#categories">Catégories</a></li>
<li class="page_item"><a href="#tags">Tags</a></li>
<li class="page_item"><a href="#archives">Archives</a></li>
<li class="page_item"><a href="#languages">Langues</a></li>
<li class="last_menu"><a class="last_menu" href="#rss">RSS</a></li>
</ul>

La classe page_current_item gérant l’onglet sélectionné de Freshy a été substituée par celle, classe tabs-selected, du script Tabs. Et a contrario, la classe anchors de Tabs a été remplacée par menu de Freshy.

Le but est de perfectionner l’affichage des onglets en l’internationalisant et en n’affichant que les titres utilisés. Comme exemple, les templates Categories seront utilisés, les autres templates fonctionnent sur le même principe (Tags, Archives, Langues, Syndication).

tpl:lang Categories affiche Catégorie dans la langue par défaut du blog.
<tpl:Categories> est un fonction déclarative pour l’affichage des éléments des catégories. Le code html avec cette fonction template d’affichage est répété pour chaque catégorie.
<tpl:CategoriesHeader>, en-tête, et <tpl:CategoriesFooter>, pied de page, bloque l’effet de boucle de la fonction précédente, leur utilisation est essentielle pour l’affichage d’un titre ou l’insertion de la balise html ul.

<tpl:Categories>
<tpl:CategoriesHeader><li class="page_item">
<a href="#categories">{{tpl:lang Categories}}</a></tpl:CategoriesHeader>
<tpl:CategoriesFooter></li></tpl:CategoriesFooter> </tpl:Categories>

Pour les titres des onglets, la boucle ne doit pas fonctionner, il n’y a donc pas de code entre l’en-tête et le pied de page. L’onglet Categorie ne s’affichera que si des billets comportent des catégories.

Catégories, Tags et Langues ne seront affichés que s’ils sont utilisés sur le blog, de même pour le contenu des onglets. La présentation est donc impeccable, cela a aussi le mérite de réduire l’envoi de données. Utile pour avec la limitation des hébergeurs.
De ce fait, la Recherche, Archives et RSS sont toujours présents.

<tpl:Categories>
<tpl:CategoriesHeader><div id="categories" class="fragment"><ul></tpl:CategoriesHeader>
<li><a href="{{tpl:CategoryURL}}">{{tpl:CategoryTitle}}</a></li>
<tpl:CategoriesFooter></ul></div></tpl:CategoriesFooter>
</tpl:Categories>

Les liens vers les catégories font parti de la boucle.

Faire fonctionner le prélude pour la recherche (ajout)

L'appel de la div #search avec un lien ne permet pas de modifier son état de visibilité. C'est le script Tabs qui affiche/masque les différents contenus des onglets. Tabs possède une fonction triggerTabs() pour visualiser un onglet mais le renvoi sur une ancre, ici #search, ne fonctionne pas. Il faut donc faire cela à la main…
Mais jQuery est là ! Dans _head.html, il suffit alors d'ajouter après $('#frame').tabs({fxSlide: true}); :

$('a.presearch').click( function() {
$('.menu li').removeClass('tabs-selected');
$('div.fragment').hide();%%%
$('li.first_menu').addClass('tabs-selected');
$('#search').show();
});

Son action enlève le style sélectionné des titres d'onglets et leur contenu n'est plus visible puis le premier titre, ici Recherche, est sélectionné et son contenu affiché. Ces modifications surviennent lorsqu'un lien avec la classe presearch est cliqué. Dans le fichier _top.html, la classe presearch est ajouté (<a class="presearch" href="#search">tpl:lang To search</a>).

Les options de couleurs et d'image

Le choix de l'image pour le top et de l'éléménet sélectionné pour le menu de navigation vient de mon appétit sans fin de l'orange... Mais, un autre monde est possible.
Le thème Freshy comprend plusieurs images pour le top, j'en ai retenu 9 qui sont dans le dossier img/headers de freshyOne. Les éléments sélectionnées peuvent avoir une couleur anis, cyan, bleu, violet et magenta et sont le dossier img/menu2. Il faut modifier dans la feuille de style style.css, l'élément #header en changeant le nom du fichier header_image7.jpg :

background: transparent url(img/headers/header_image7.jpg) no-repeat top left;

Pour les éléments sélectionnés du menu de navigation, tout d'abord, il faut modifier dans le fichier style.css .menu li.page_item.tabs-selected, .menu li.first_menu.tabs-selected a et .menu li.last_menu.tabs-selected a en changeant le nom du fichier :

background:url(img/menu2/menu_selected_orange.png);

Ensuite, il faut modifier dans le fichier tabs-ie6.css .menu li.tabs-selected a en changeant le nom du fichier :

background:url(img/menu2/menu_selected_orange.png);

Les problèmes avec les navigateurs

Internet Explorer 6 et 7 ne possèdent pas les mêmes tares pour la compréhension des standards web. Quand on règle le problème pour IE 6, IE 7 peut mal réagir et vice versa.
Tout d'abord le débordement de IE, il peut apparaître avec de l'italique ou une mauvaise prise en compte des espacements et autres marges. Un overflow: visible; sur les division concernées règle les problèmes sans affecter les autres navigteurs. Ouf !
Entre Freshy et Tabs, le mélange entre l'affichage sur une ligne du titre des onglets, le survol des liens sous IE et l'alignement vertical font bugger IE 6 et 7. Pire, IE 6 a du mal avec les éléments ayant plusieurs classes. Donc, j'ai réglé le problème en modifiant le fonctionnement de menu de navigation de Freshy et en utilisant ça, juste pour les IE hors 7, à ajouter dans _head.html :

<!--\[if lte IE 6]>
<style type="text/css" media="screen">
@import url({{tpl:BlogThemeURL}}/tabs-ie6.css);
</style>
<!\[endif]-->

Les problèmes de débordements de Safari et Opéra entre le titres des onglets et leur contenu ont été réglés en réduisant la taille des éléments et en ajoutant de l'espace supplémentaire.

Le thème freshyOne est compatible avec Firefox 2 & 3, IE6, IE 7, Safari 2 & 3, Opera 9.x et Konqueror 3.5.

sober, variations chromatiques

pyeb — Wed, 20 Dec 2006 22:34:00 +0100

sober est un thème liquide et minimaliste, il permet de mettre des photos de 500px. Toutes les variations sont contenues dans le dossier du thème, il faut décommenter la feuille de style choisie pour modifier l'apparence. Pour modifier l'image du top, il faut que l'image mesure 549px x 300px.

Màj 28/06/08 : Ajout d'un éditeur de thème pour choisir la variation. Fonctionne à partir de DC2 RC1.

Visualiser : Blanc/rouge (classic) - Blanc/bleu/orange (blue) - Noir/rouge (black) - Orange (orange) - Vert clair (olive) - Bleu clair (sky)

Télécharger : Toutes les variations

123 Ice

pyeb — Fri, 08 Dec 2006 21:11:00 +0100

Dans ma collection 3 colonnes, voilà 123 Ice. C'est une adaptation monochromatique de 123 Blue. J'essayais de placer la photo du top - plateau de Retord - et j'ai trouvé qu'elle allait bien.

Ce thème hivernal est un thème liquide 3 colonnes qui permet de mettre des photos de 500px. Pour gagner de la place et éviter les problèmes de correspondances de couleur, j'ai coupé le top en deux images. Dans #top, il y a l'habillage et dans #top h1, il y a la photographie proprement dite. De fait, cela permet de personnaliser plus facilement le top.

Télécharger le thème.

Chocolate & biscuit : caisson de résonance

pyeb — Sat, 04 Nov 2006 20:29:00 +0000

Pas de structure particulière, juste une envie de faire un thème avec une baffle. Des couleurs chocolat et biscuit avec un peu de bruit pour faire la patine du temps.

C'est un thème 2 colonnes en version large en taille et en poids aussi. Le png, c'est W3C mais cela reste lourd…

Télécharger le fichier.

Maj : pour avoir une police plus grande avec le formulaire de commentaire, il faut supprimer dans #comment-form input, #comment-form textarea :

font-size: 0.8em;

Ajout du survol de lien pour les pièces jointes et les commentaires.

#attachments a:hover { text-decoration: underline; color: #421806; }

#comments dd a:hover, #pings dd a:hover { text-decoration: underline; color: #421806; }

123 Blue

pyeb — Sat, 23 Sep 2006 21:52:00 +0000

Dans ma nouvelle collection de thèmes, je demande le deuxième des thèmes 3 colonnes.

Ce thème nuageux est un thème liquide qui permet de mettre des photos de 500px. Les barres de navigation sont flottantes pour permettre aux différentes divisions d'être correctement à leur place tout en ayant un habillage en images, c'est un peu tarabiscoté en terme de construction. Après m'être battu entre l'installation de windows sur un mac intel et mon fil ethernet définitivement trop court, j'ai trouvé le dernier - ? - bug d'affichage.

Màj : Correction du bug d'affichage sous IE avec le style italique.

Màj 2 : Changement de la structure. En terme d'affichage, il n'y a pas de changement. Pour modifier le thème, la nouvelle version est plus robuste et facile à modifier.

Télécharger le thème.

Lueurs

pyeb pyeb — Tue, 15 Aug 2006 12:50:00 +0000

Lueurs est un thème liquide en 2 colonnes pour une résolution minimale de 1024x768. Le haut de page est inséré dans la même div que le contenu et la barre de navigation, celle-ci remonte donc jusqu'en haut de la page. Le haut de page est aussi cliquable. Le titre du blog est reporté dans la barre de navigation. Les en-têtes et les pieds de page des billets et autres fioritures sont différents selon le changement pair/impair ou le contexte.

Mise-à-jour (18 août 2006) :

Corrections d'un problème avec la fermeture des commentaires et quelques améliorations dans la feuille de style.

Télécharger le thème.

Màj 2 : les pièces jointes s'affichent correctement.

Palissade

pyeb pyeb — Mon, 24 Jul 2006 14:28:00 +0000

Palissade est un thème coloré - ! - liquide et 2 colonnes.

Télécharger le thème.

DoTunes

pyeb pyeb — Mon, 24 Jul 2006 14:12:00 +0000

DoTunes est inspiré par Mac OS X et iTunes. Le but est de faire un thème sobre au contenu compact, le bleu c'est pour donner un peu de peps. C'est un thème liquide qui demande une résolution minimale de 1024x768.

~~Certaines fonctionnalités du thème n'apparaissent pas sous IE 6 et inférieur.~~ Mise à jour : le hover sur les titres des widgets ne sont pas fonctinnels sous IE.

Télécharger le thème.

RedSky

pyeb pyeb — Sun, 09 Jul 2006 13:48:00 +0000

C'est le premier thème que j'ai adapté pour Dotclear 2. Il existait déjà pour DC1 mais j'ai préféré attendre la dernière version de Dotclear.

C'est un thème liquide qui fonctionne avec une résolution de 800x600. Une nuit rouge aux reflets dorées.

Télécharger le theme.