top

Aller au contenu | Aller au menu | Aller à la recherche

lundi 7 mai 2007

Le retour de la revanche, une nouvelle librairie pour alto with jQuery

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.

dimanche 22 avril 2007

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

brederode.jpg slottsbacken.jpg thamesstreet.jpg

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.

samedi 24 mars 2007

Template pour le plug-in Related

En attendant, une version "stable" du plug-in Related, l'équipe de Dotclear propose une version sans support.

Voici, les fichiers templates pour mes différents thèmes ayant des structures différentes du thème par défaut :

  • 123, 123 Blue, 123 Ice
  • tous les pastels like dont Orangeworld
  • Cinema et lueurs
  • doTunes
  • freshyOne
  • tabsOne

Les autres thèmes utilisent le template de Related. Il suffit de mettre le fichier external.html du thème concerné dans son dossier.

Télécharger l'archive.

jeudi 22 mars 2007

Ajout de l'onglet Liens pour les thèmes freshyOne et tabsOne

Après m'être amusé avec le plug-in blogrollpage de SiMON, taho m'a donné un moyen simple pour afficher les liens gérés par DC2.

tpl:Blogroll

C'est simple dotclear ! Je vous mets les liens freshyOne et tabsOne.

mardi 6 mars 2007

Modification de la librairie pour le thème altowithjquery, petit test de comptabilité.

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

tabsOne with jQuery

tabsOne.jpg

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

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

freshyOne 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.

Lire la suite...

jeudi 25 janvier 2007

Deuxième pas en jQuery sous Dotclear 2, effet d'arrondi avec le thème alto

Visualiser le thème altowithjquery 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.

Lire la suite...

vendredi 19 janvier 2007

monster in love, rouge sang

monsterinlove

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.

lundi 15 janvier 2007

Premier pas en jQuery, afficher/masquer des listes dans la barre de menu de Dotclear 2

Dotclear 2 utilise jQuery comme librairie javascript. La manipulation des widgets en est l'exemple le plus simple à observer avec l'usage du glisser/déposer et l'affichage/masquage des préférences des widgets.

Mais bon, ce qui fait vraiment saliver, ce sont les effets de transition qui se produisent sur le blog lui-même. Les exemples qui m'ont frappé l'esprit sont ceux du grand architecte et du codeur nocturne. Il faut donc mettre les mains dans le cambouis et faire cela dans l'ordre. On cherche des détails sur jQuery, on s'amuse dans le bac à sable et enfin, on passe aux travaux pratiques !

Pour ce faire, il faut demander à…

Lire la suite...

- page 3 de 6 -