pyeb theme 2 dotclear - 1024x768

Configurer le thème : freshyOne, sober et tabsOne

pyeb — Tue, 01 Jul 2008 21:30:00 +0200

Depuis la RC1 de dotclear 2, il est possible de définir des préférences pour des thèmes. J'ai utilisé cette possibilité pour trois thèmes freshyOne, sober et tabsOne. Pour configurer les thèmes, je suis parti du traval de dsls et du portage du thème Freshy 2.

sober

Ce thème a été créé dans l'optique d'avoir plusieurs variations chromatiques : blanc/rouge, blanc/bleu/orange, noir, orange, olive et ciel. Il fallait modifier à la main le fichier style.css pour choisir la couleur ou prendre un thème particulier. Maintenant, il suffit de choisir sa variation.

freshyOne

Ce portage de thème Wordpress contient à l'origine la possibilité de choisir l'image d'en-tête ainsi que la couleur de fond lors du choix d'un élément. Ces deux paramètres sont accessible à partir de l'administration de DC2.

tabsOne

Ce thème contenait deux fichiers de style - bleu et magenta -, il suffit de choisir maintenant classique, bleu ou magenta.

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.

Ornamentals, mon premier thème pour photoblog (màj : 05/08/07)

pyeb — Tue, 31 Jul 2007 16:46:00 +0200

Ceci est mon premier thème pour photoblog, il utilise le greffon photoblog 0.1 pre-alpha--2--4 de Julien Mudry ou zeiram sur le forum de Dotclear. ~~Pour la présentation de ce greffon, je vous invite à lire le billet de présentation.~~ Petite mise en garde, le greffon est en alpha donc il fonctionne mais il est encore en phase de débugage.

Le thème est, lui aussi, en version beta. Il a été testé sous Firefox 2 (Mac & PC), Safari 2 et 3 (Mac & PC), IE 6 & 7 (après de longues épreuves…) ainsi que sous Opera 9.2 (Mac). En dehors du greffon photoblog, il y a une condition obligatoire pour qu'il soit pleinement fonctionnel : cocher, lors de l'ajout d'une photo, En tant que lien vers l'image originale. Et pourquoi ?

Ornamentals est un thème utilisant la librairie jQuery et les librairies Accordion et imagebox en version modifiée. Pour mettre en valeur les photos, la barre latérale ne montre qu'une division à la fois en accordéeon. Imagebox est la version la plus proche de lightbox en jQuery, il suffit de cliquer sur la photo. D'où la présence d'un lien sur la photo.

Il est possible de mettre du texte dans un billet en plus de la photo. Par contre, il faudra séparer la photo du texte soit par 2 retours à la ligne ou l'utilisation du retour chariot dans la barre d'outil de l'édition de billet sinon cela perd de son charme…

L'explication de texte et débugage pour plus tard. Après quelques retours et autres demandes. Cliquez sur la photo pour accéder au photoblog de test.

màj 05/08/07 : J'ai adapté le thème à la dernière version du greffon et de ses nouveaux templates. La barre de navigation utilise l'effet N&B/couleur, les flux RSS sont envoyés dans le footer et J'ai corrigé quelques bugs.

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.

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.

monster in love, rouge sang

pyeb — Fri, 19 Jan 2007 11:16:00 +0100

monsterinlove est un thème fixe 2 colonnes de 950px. J'avais envie d'un thème flamboyant, un joli rouge sang, et de titres bien gras, ce sera monsterinlove. Avec des petites giclées... de sang.

Bref, c'est un thème un peu concept...

Télécharger le thème.

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; }

Pastel like en version large & suite des overflow d'IE

pyeb — Mon, 30 Oct 2006 22:11:00 +0000

Pour mes besoins personnels, j'ai eu besoin de créer une version Pastel light avec la possibilité d'avoir des photos de 700px de large. J'aime bien voir mes photos en version large…

Télécharger le fichier.

Pour d'autres besoins, j'ai créé une version orange de Pastel large. Je suis assez mono-maniaque et je pense qu'il sera mon thème par défaut quand je passerais mon blog sous DC2. Cela sera le cas dés que dsls aura finalisé le plug-in Galery pour DC2.

Télécharger le fichier.

J'ai remarqué des problèmes d'italique avec le thème ! Lors de test, je n'avais rien vu et m'amusant avec Orangeworld sous IE 6, l'horreur apparu. Après, j'ai vu la catastrophe dans les commentaires chez [SIMON], c'était pire…

Il suffit de mettre rajouter overflow: visible à #main et #content. Les thèmes Pastel et Pastellight sont à jour. Vivement qu'IE 7 envahisse la planète…

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.