Aller au contenu | Aller au menu | Aller à la recherche
mardi 11 septembre 2007
Par pyeb le mardi 11 septembre 2007, 20:01
Voici, la seconde partie sur la conception du thème pour Photoblog ornamentals.
Ornamentals est un thème fluide, mais avec #content fixé à 700px, et un fond noir. La navigation est habillée avec la librairie jQuery Accordion tandis que la librairie jQuery Imagebox - partie de la suite Interface - s'occupe de l'effet lightbox.
Télécharger le thème.
Mise à jour du 17/09/07 : compatible avec la pre alpha 5 Mise à jour du 17/11/07 : compatible avec Safari 3
vendredi 7 septembre 2007
Par pyeb le vendredi 7 septembre 2007, 20:20
Avec l'arrivée de Dotclear 2, il est possible de faire du multiblog c'est à dire avoir plusieurs blogs avec une même base de données et la même interface d'administration. Donc au lieu d'un blog fourre-tout, il est facile d'avoir un blog principal et de déporter ces photos sur un photoblog.
Julien Mudry - zeiram sur le forum de Dotclear - avait créé un greffon Photoblog pour DC1. Une alpha pour DC2 est sortie. Petite mise en garde, le greffon est en alpha donc il fonctionne correctement mais il est encore en phase de débugage.
Pour ce thème, plusieurs choix ont été privilégiés :
Ornamentals est un thème semi-fluide - le #content fixé à 700px - et un fond noir. La navigation est habillée avec la librairie jQuery Accordion tandis que la librairie jQuery Imagebox - partie de la suite Interface - s'occupe de l'effet lightbox.
Télécharger le thème.
Mise à jour du 17/09/07 : compatible avec la pre alpha 5 Mise à jour du 17/11/07 : compatible avec Safari 3
mardi 31 juillet 2007
Par pyeb le mardi 31 juillet 2007, 16:46
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.
jeudi 26 juillet 2007
Par pyeb le jeudi 26 juillet 2007, 21:36
Grâce aux commentaires laissés par Gérald, il n'y a plus de conflit entre jQuery et dclightbox. Il suffisait d'utiliser les bons termes pour empêcher les conflits entre les librairies jQuery et prototype…
Dans le fichier _head.html de freshyOne, il faut remplacer les lignes du script par :
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery('#frame').tabs({fxSlide: true});
jQuery('a.presearch').click( function() {
jQuery('.menu li').removeClass('tabs-selected');
jQuery('div.fragment').hide();
jQuery('li.first_menu').addClass('tabs-selected');
jQuery('#tabsearch').show();
}); });
Par ailleurs, la version de altowithjquery est la version 1.1 sur le post initial.
lundi 16 juillet 2007
Par pyeb le lundi 16 juillet 2007, 20:20
Suite aux problèmes d'incompatibilité entre jQuery et dclightbox ainsi que le conflit entre les librairies tabs et imagebox, j'ai fait quelques essais infructueux. La mise en comptabilité entre deux librairies javascript demandent la réécriture de chaque librairie jQuery à chaque mise à jour. Donc, le plus simple est d'utiliser une alternative jQuery à dclightbox mais thickbox réduit les images à la taille de l'écran. La solution pour arrêter l'interpolation est donnée sur le forum de thickbox.
Sinon la dernière mise à jour de tabs ne fonctionne pas avec mes thèmes au moins sous IE 7. Donc, il faut que je plonge dans le code et teste sous IE 6 & 7. Donc, je me pencherai sur le problème quand j'aurai de longues heures devant moi et en utilisant la virtualisation…
Et j'ai fini par trouver un bug au niveau du prélude - Allez à… -, la redirection ne fonctionnait pas depuis que j'avais mis à niveau les deux thèmes freshyOne et tabsOne. C'est déjà ça de gagner.
lundi 7 mai 2007
Par pyeb le lundi 7 mai 2007, 21:15
J'ai trouvé une librairie qui fonctionne avec les principaux navigateurs ! C'est curvyCorners for jQuery. Les problèmes avec Safari sont résolus. Le bug avec post-tags sous Opera reste comme avec les autres librairies, cela me laisse perplexe…
En nouveauté, la prévisualisation des commentaires est correcte et la liste des pages connexes s'entoure d'un joli bleu. Sinon, toujours la même punition, je ne sais pas ce que cela donne avec une vidéo flash sous IE 7. A priori, cela devrait fonctionner.
Télécharger alto with jQuery 1.1.
mardi 6 mars 2007
Par pyeb le mardi 6 mars 2007, 21:42
J'ai fini par utiliser la librairie Rounded Corner pour le thème altowithjquery. Safari a toujours de légers problèmes mais tant qu'on n'utilise pas la dernière version de jquery, c'est vivable…
La principale raison du changement est une plus grande variété d'options. Ainsi, les commentaires sont tout de rose vêtue comme pour la version initiale. Et la taille de l'arrondi est de 10 pixels. Le fichier _head.html ne comprend plus les éléments arrondis pour le mode post, ils ont été introduits uniquement sur le fichier post.html.
Au niveau des css, plusieurs modifications. Tout d'abord, la liste des galeries du plug-in Galery à une jolie couleur jaune. Ensuite, plus important, il est nécessaire d'ajouter un fond blanc sur la balise englobant l'élément avec des coins arrondis. Par exemple, la règle background: #fff; doit être ajoutée à la division #content englobant la division avec une classe .post (la division d'un billet). La règle css se trouve à la ligne 233 ou se situe dans /*Couleurs après la définition de couleurs des éléments avec des coins arrondis. Si vous ajoutez des éléments avec des coins arrondis à la liste, n'oubliez pas d'ajouter les balises englobantes. Sinon, certains de vos visiteurs risquent d'avoir de mauvaises surprises…
Des problèmes avec le plug-in flash étaient survenus sous IE 7 avec la précédente librairie, les vidéos de youtube ne fonctionnaient pas. N'ayant pas ça à la maison ni au boulot. oO) Si une bonne âme pouvait tester - avec la version de jquery de DC et si problème, avec la dernière version 1.1.2 -, cela m'arrangerait…
Télécharger la version modifiée.
NB : sur le billet Deuxième pas avec jquery, la version d'altowithjquery n'a pas été modifiée. Par contre, lors de la visualisation du thème, c'est la version modifiée qui s'affiche.
samedi 24 février 2007
Par pyeb le samedi 24 février 2007, 18:51
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.
mardi 6 février 2007
Par pyeb le mardi 6 février 2007, 11:20
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.
jeudi 25 janvier 2007
Par pyeb le jeudi 25 janvier 2007, 11:45
Des scripts existent pour jQuery déjà prêts à l'emploi ou presque ! En dehors de Tabs, un autre morceau code m'avait intéressé en terme d'exemple : Round Corner. Mais, il a un léger problème à mes yeux, il ne fonctionne pas avec Safari… Et je l'utilise ! Je me suis donc tourné vers son cousin Curvy Corners qui fonctionne sous Firefox, Internet Explorer, Safari et Opera.
Leur intérêt réside à ne pas utiliser d'images pour faire des coins non carrés et surtout de ne pas modifier la structure de Dotclear. Ma victime idéale est le thème alto qui utilise des coins arrondis pour les billets, les éléments de listes de la barre de menu et les commentaires.
De suite, je vous livre le thème altowithjQuery. Par ailleurs, les modifications du fichier style.css ne seront explicitées que si elles interagissent directement avec le code javascript.
Le thème fonctionne avec la version jQuery de Dotclear 2 beta 5 et la 1.1.
« billets précédents - page 1 de 2