greyOne, photoblog thème

pyeb — Thu, 18 Oct 2007 18:37:00 +0200

Après plusieurs tentatives peu heureuses, j'ai fini par mettre en forme le thème photoblog qui me convient. Un cadre arrondi pour visualiser la photo, un style noir/gris aperture ou lightroom like, un peu web 2.0… Le menu est en javascript mais simple. Pas de librairie complémentaire à charger…

… sauf en utilisant dclightbox ou dcthickbox. Petit détail esthétique qui a son importance, le positionnement des images doit être soit aucun soit centré.

greyOne est un thème liquide de 950 px avec une colonne et peut accepter des photos de 800 px.

Support opérationnel à partir de novembre 2007. :roll:

Télécharger le thème.

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"> </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 :

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, IE6, IE 7, Safari 2, Opera 9.1 et Konqueror 3.5.

One

pyeb — Thu, 31 Aug 2006 21:30:00 +0000

Nouvel exercice de style. One est un thème fluide. Il ne possède pas d'objets flottants, la barre de navigation suit les billets. Ce thème est donc plutôt approprié pour un affichage avec un billet par page. La recherche, les liens de navigations et les liens de syndication sont positionnés dans le haut de page.

Et le thème est un peu orange avec un peu de vert pour éviter l'overdose.

Télécharger le thème.

Mise à jour : j'ai modifié le lien pour télécharger le fichier.

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

pyeb theme 2 dotclear - 1 colonne

greyOne, photoblog thème

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

tabsOne with jQuery

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

Menu de navigation par onglet avec des effets de transition

La structure html

Le chargement du script et des feuilles de styles

Les princiales options du script jQuery Tabs

freshyOne, jQuery et template Dotclear 2

Modifier les fichiers template

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

Les options de couleurs et d'image

Les problèmes avec les navigateurs

One