S'identifier - S'inscrire - Ecrire un article - Contact

Adaptation du thème iTheme ajax 75

Par mitra • Echanges • Lundi 06/08/2007 • 24 commentaires  • Lu 5692 fois • Version imprimable

Mots-clés : ,

Suivre le lien Adaptation Thème iTheme ajax 75 pour ceux qui veulent suivre ou participer à l'adaptation du thème iTheme ajax 75 en ligne.

Maj 10/08 : Blog de test du thème : testthemeajax

D'autres articles sur des thèmes similaires :

Commentaires

Hop, hop par labosonic le Lundi 06/08/2007 à 13:06

La page de présentation du thème par qui en a réalisé le design est ici.
La page de Test est ici.
Il existe une version du thème en trois colonnes.

J'ai changé ajouté au texte de travail de base le style.php du thème original qui paraît plus utile comme base de travail que le view source.

A mon avis, avant de foncer tête baissée dans l'adaptation, il faut se poser un certain nombre de questions :

- Le petit champ de recherche en haut à droite, je ne sais pas faire.
Je sais mettre un bloc libre à cette place là (sans titre)... Eventuellement peut-être même mettre un bloc de recherche viabloga par défaut là bas. Mais pas un bloc identique avec un bouton de cette forme là et avec une image dedans.

- Le thème est "Javascript Ready" et il faut se poser la question de savoir si on doit l'adapter pour qu'il le soit ou non :
- A mon avis, ça nécessite plus de travail que d'en faire un clone qui ne supporte ces fonctionnalités de dérouler/enrouler et autres cliquer/déplacer et complique grandement la tâche de Mitra.

C'est un des fantasmes de Stéphane ces choses là mais c'est discutable et à mon avis nécessaire d'en discuter. J'estime (et je ne suis pas le seul) que c'est avant tout du rôle de l'éditeur d'un blog que de proposer des contenus complets (non seulement des articles mais aussi les moyens de naviguer de l'un à l'autre dans une hiérarchie intelligente).

C'est un point de vue qui me paraît du même ordre que ceux qui consistent à dire : "on ne peut repasser un article en brouillon une fois qu'il a été édité" ou "ce n'est pas à l'éditeur du blog de dire à l'utilisateur d'ouvrir un lien dans une nouvelle fenêtre ou pas", c'est à dire qu'on ne peut pas éluder cette discussion.

| [^] | Répondre
Re: Hop, hop par mitra le Lundi 06/08/2007 à 13:49

Contente de voir que tu comptes participer;-)

Ok pour le style. Il faudra juste l'insérer au bon endroit plus tard.

Pour la partie "recherche" en haut à droite, je m'étais bien dis que j'allais faire appel à vos compétences ... pour le moment je l'avais laissé de côté ! Mais je vois ce que tu veux dire ... La solution ne serait pas de faire un mélange du bout de code actuel (pour ce qui est de la forme) avec le code ViaBloga (pour ce qui est du fond) qui permet de faire des recherches ?

Pour ce qui est de la partie ajax de ce thème (dérouler/enrouler, cliquer/déplacer), je le vois plus comme un gadget qu'autre chose. La plupart du temps, le bloggueur qui choisi ce thème pour son blog fait aussi le choix de la disposition de ses boites une bonne fois pour toute puis n'y touche plus (ou alors, s'il touche c'est qu'il est obligé d'y toucher à chaque connexion ... alors pourquoi pas le changer définitivement !). Et pour ce qui est de celui qui consulte ce blog (un qui débarque sur les blogs par exemple), je doute qu'il pense qu'en cliquant sur le haut de la boite, il la fasse déplier ou même vouloir changer l'ordre d'affichage des boites ! Je comprends cependant le côté fun de ce thème sans quoi Stéphane ou celui qui l'adoptera n'auront plus autant de plaisir d'aller sur le net;-)
Cela dit, je comptais AUSSI le laisser de côté dans un premier temps ... ce qui n'est visiblement pas ton avis;-(

PS : Pour que cet autre exemple puisse être un apport pour tous ceux qui souhaitent un jour adapter un thème, nous avons pensé (en off avec jlb, et si tu es d'accord) que chaque modification porte sur un sujet précis de manière à rendre plus claire le suivi des modifications.

| [^] | Répondre
Re: Hop, hop par labosonic le Lundi 06/08/2007 à 14:57

Sur l'idée de le laisser de côté dans un premier temps, je suis d'accord avec toi mais je trouve qu'elle est mauvaise d'un point d evue méthodologique dans le sens où je vois pas trop l'intérêt de mettre le bouton enrouler/dérouler sur les têtes de bloc s'il ne fonctionne pas. Et ça risque, à contrario, d'être coton à rajouter le jour où on déciderait qu'on en a besoin.

Je ne sais pas si je vais vraiment intervenir sur dans le processus de conception du thème, mais je pense au moins avoir le temps de jeter un oeil sur ce que tu fais. Critico-blog en août me laisse (un peu) de répit : uniquement (!?) 10 critiques/jour. J'en profite donc pour faire quelques travaux là bas, ailleurs sur des thèmes que j'ai envie de créer, éventuellement, je tripoterais un peu du côté de glamour. Ca me paraît de plus en plus en plus important puisqu'à mesure qu'on choisit des thèmes, on les choisit uniquement en fonction de leur aspect esthétique et pas en fonction de ce qu'ils peuvent apporter.

Résultat : Viabloga n'a toujours pas de thème public avec un footer qui incorpore des blocs, alors que c'est quand même une signature du design Web 2.0, on met toujours les informations en haut et/en bas d'un article, rarement à côté ou en mode lettrine, même si le calendrier "en pseudo-puce" sur ce thème ci est un progrès ...

En plus comme je ne procède jamais en adaptant un thème existant ailleurs mais plus en détournant et distordant un thème déjà présent sur Viabloga pour lui passer une couche de peinture qui ressemble à un thème existant, je sais pas trop si je peux être utile.

Tu le fais en deux ou trois colonnes ce thème ?

| [^] | Répondre
Re: Hop, hop par mitra le Lundi 06/08/2007 à 15:12

"...je vois pas trop l'intérêt de mettre le bouton enrouler/dérouler sur les têtes de bloc s'il ne fonctionne pas. Et ça risque, à contrario, d'être coton à rajouter le jour où on déciderait qu'on en a besoin."

Le même bouton existe en grisé en haut à gauche du bloc des articles. On pourrait peut être dans un premier temps le griser.

Cela me fait autant plaisir que tu y jettes un coup d'oeil de temps en temps. Tes critiques sont souvent intéressantes.

Je trouve que le mode 3 colonnes est plus sympatique, surtout si on peut en mettre une de chaque côté. J'attends un peu la réaction des uns et des autres;-)

| [^] | Répondre
Re: Hop, hop par tgtg le Lundi 06/08/2007 à 16:29

tgtg J'aime les deux colonnes parce que parfois plus adaptées à tous les ordinateurs et navigateurs :-)

| [^] | Répondre
Re: Hop, hop par Stephane le Mercredi 08/08/2007 à 12:22

Stephane Pour le champ de recherche, il suffit d'appeler la fonction de recherche de ViaBloga :

<form method="post" action="/cgi-bin/display_index.pl" 
enctype="multipart/form-data">
<div><input name="site_id" value="<SITE_ID>" type="hidden">
<input name="category_id" value="_news" type="hidden">
<input name="keyword"  size="10" type="text">
<input name=".submit" value="Chercher" type="submit"></div>
</form>

| [^] | Répondre
Re: Hop, hop par labosonic le Jeudi 09/08/2007 à 05:59

Ma question concernait le fait de remplacer le mot "chercher" dans value="Chercher" par  (http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/search-btn.png). Une idée ?

| [^] | Répondre
Re: Hop, hop par Stephane le Jeudi 09/08/2007 à 16:32

Stephane En fait il suffit de regarder comment c'est fait dans le thème d'origine :

<form method="get" id="searchform" 
action="http://www.ndesign-studio.com/demo/wordpress/">
<div>
<input type="text" value="Search" name="s" id="s" 
onfocus="if (this.value == 'Search') {this.value = '';}" 
onblur="if (this.value == '') {this.value = 'Search';}" />
<input type="submit" id="searchsubmit" value="Go" />
</div>
</form>
C'est dans les CSS que le Go est remplacé par une image.

#searchform #searchsubmit (line 119)
{
background-color: transparent;
background-image: url(images/search-btn.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-x-position: left;
background-y-position: top;
height: 24px;
width: 24px;
border:none;
text-indent: -999%;
line-height: 1px;
margin-top: 6px;
}


| [^] | Répondre
Re: Hop, hop par mitra le Lundi 27/08/2007 à 23:07

Stéphane,
Je travaille sur la mise en place du formulaire de recherche.
Dans tous les modèles, l'utilisateur a le choix de rajouter le formulaire sur son blog.
Pour ce qui est de ce thème (iThème), je n'ai pas trouvé de solution autre que de mettre le code ci-dessus en dur dans le code du thème, ce qui fait qu'il sera imposé à l'utilisateur à partir du moment où il fait le choix de ce thème.

MAJ : j'avais oublié de mettre le bout de code correspondant
<form method="post" id="searchform" action="/cgi-bin/display_index.pl" enctype="multipart/form-data">
<div>
<input name="site_id" value="<SITE_ID>" type="hidden">
<input name="category_id" value="_news" type="hidden">
<input name="keyword" size="24" type="text">
<input name=".submit" id="searchsubmit" value="Chercher" type="submit"></div>
</form>

Et même si le fait qu'il soit en dur dans le code n'était pas gênant, le combo box des blocs proposera tout de même le rajout d'un autre bloc de recherche. Et si l'utilisateur fait le choix d'en rajouter un deuxième bloc de recherche, son deuxième choix affichera un bloc à la ViaBloga !



Peux-tu me dire si tu pensais à une autre solution que celle-ci ?
Labo parlait d'un bloc libre, mais je pensais que les blocs libres sont codables par l'utilisateur !

| [^] | Répondre
Re: Hop, hop par Stephane le Mardi 28/08/2007 à 10:09

Stephane Je pensais exactement à cette solution : mettre le code en dur dans le modèle. Ce n'est pas génant que le bloc recherche soit à nouveau proposé.

| [^] | Répondre
Re: Hop, hop par mitra le Mardi 28/08/2007 à 10:23

Merci Stéphane, j'ai mis à jour le modèle.

| [^] | Répondre
par mitra le Mardi 07/08/2007 à 19:58

Quelqu'un peut me dire pourquoi le lien sur historique des modifications qui se trouve au début du texte ne fonctionne pas ?
Il n'en est pas de même du même lien se trouvant à la fin du texte !

| [^] | Répondre
Re: par labosonic le Mardi 07/08/2007 à 21:47

Sait pas

| [^] | Répondre
Re: par Jean-Luc le Mercredi 08/08/2007 à 20:41

Jean-Luc C'est l'éditeur qui a tronqué la racine des liens lors de la validation (en reconnaissant que c'était celle du site) et je n'ai pas vérifié ensuite. Normalement c'est corrigé. C'est quand même pratique de pouvoir consulter de suite l'historisation, non ? Je n'en ai pas trop profité car je suis occupé à "mouliner"...

| [^] | Répondre
Définition des macros par mitra le Mardi 07/08/2007 à 21:15

Que font les macros suivants :

<define_macro name="sb_menu_list_start">
<ul class="menu">
</define_macro>

<define_macro name="sb_menu_list_end">
</ul>
</define_macro>

<define_macro name="sb_menu_text">
<li class="page_item <arg name="selected">"><arg name="text"> <arg name="extra_text"></li>
</define_macro>

<define_macro name="sb_menu_link">
<li class="page_item"><a href="<arg name="url">"><arg name="text"></a> <arg name="extra_text"></li>
</define_macro>

<define_macro name="sb_menu_link_link">
<li class="page_item"><a href="<arg name="url1">" class="internal"><arg name="text1"></a> : <a href="<arg name="url2">" class="internal"><arg name="text2"></a> <arg name="extra_text"></li>
</define_macro>

<define_macro name="sb_menu_link_text">
<li class="page_item"><a href="<arg name="url1">"><arg name="text1"></a> : <arg name="text2"> <arg name="extra_text"></li>
</define_macro>

<define_macro name="sb_menu_anything">
<arg name="anylist">
</define_macro>

| [^] | Répondre
Re: Définition des macros par labosonic le Mardi 07/08/2007 à 22:03

Ce sont les macros qui permettent d'appliquer un style (que tu définiras plus tard dans ta CSS) aux blocs (comme tous les sb). A priori, les define macro, c'est le genre de commandes propres à Viabloga sur lesquelles il n'y a pas à se poser beaucoup de questions, tu les copies/colles et elles marchent.

Celles-ci que tu listes concernent les blocs qui définissent les onglets (c'est pour ça qu'elles ne sont pas présentes dans tous les modèles publics)

La seule avec laquelle, personnellement, je joue un peu, c'est la sb_title : je la déclare pas systématiquement avec les autres tout au début .

Exemple :
Si dans une colonne je fais ça :

<smartblock sb.1>
<define_macro name="sb_title">
<h3><arg name="title"></h3>
</define_macro>
<smartblock sb.2>

Le bloc 1 s'affiche sans titre et le deux avec.

C'est typiquement le début de la colonne de gauche de critico-blog : les deux premières cases sont des textes libres sans titre.

| [^] | Répondre
Re: Définition des macros par mitra le Mardi 07/08/2007 à 22:59

Merci Labo.

| [^] | Répondre
Re: Définition des macros par labosonic le Mardi 07/08/2007 à 23:04


Autre exemple de jeu avec le sb_title, c'est en le "sautant" que je mettrais un bloc libre en haut à droite qui soit dépourvu de titre dans un modèle personnalisé et dans lequel je mettrais mon bloc recherche via un Bloc Libre comme décrit par Olivier.

| [^] | Répondre
Les images à intégrer dans ViaBloga pour ce thème par mitra le Mardi 07/08/2007 à 23:21

Voici la liste des images qui existent sur ce thème :

http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/content-top-bg.png
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/search-btn.png
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/main-bg.jpg
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/searchform-bg.png
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/form-field-bg.gif
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/search-btn.png
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/content-top-bg.png
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/nav-item-hover.gif
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/calendar.gif
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/mini-category.gif
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/mini-comment.gif
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/mini-down-arrow.gif
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/navigation-bg.gif
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/post-nav-previous.gif
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/post-nav-next.gif
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/comments.gif
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/respond.gif
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/form-field-bg.gif
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/form-field-bg.gif
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/submit-btn.gif
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/bullet-orange.gif
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/bullet-grey.gif
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/mini-category.gif
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/mini-page.gif
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/mini-blogroll.gif
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/mini-rss.gif
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/mini-user.gif
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/mini-check.gif
http://wordpress-tuto.fr/wp-content/themes/itheme-1-1-fr/images/mini-wp.gif
Je me demande s'il faut intégrer toutes ces images dans ViaBloga.
maj : Comme je ne suis pas administrateur, il faut en trouver un qui veut bien les ajouter dans ViaBloga.
Ce serait bien de laisser à l'utilisateur de paramétrer l'image qui se trouve dans le background.
De plus, l'image bleu du fond de l'écran (comme dans les macs) n'est-elle pas trop grosse en taille ? Si oui, est-ce gênant ?

| [^] | Répondre
Re: Les images à intégrer dans ViaBloga pour ce thème par labosonic le Mercredi 08/08/2007 à 00:30

Je pense que tu as du créer un blog vide ou presque pour faire tes tests. Le mieux c'est que tu les mettes toutes dans le répertoire des images de ce blog-là. Quand il n'y aura plus qu'à les transférer dans le /public/images de VB, le boss s'en chargera.

Vérifie la couleur, de tes gifs et arrange toi pour préférer les mettre sur un fond transparent plutôt qu'un fond blanc, ce serait ballot que les utilisateurs puissent pas changer la couleur de fond ...

Pour l'image de background, à la limite commence avec celle-là en taille fixe, logiquement, elle n'est présente qu'une fois dans le syle, non ?on verra éventuellement à la fin comment la transformer en image configurable et s'il y a des contraintes de taille ( Personnellement, je ne sais pas quoi faire l'agrandir ou la rétrécir ?)

| [^] | Répondre
Re: Les images à intégrer dans ViaBloga pour ce thème par Stephane le Mercredi 08/08/2007 à 12:25

Stephane Pour l'instant, le mieux est de ne pas te préoccuper des images : considère qu'elles sont disponibles, et qu'elles seront générées avec les couleurs choisies par l'utilisateur. Le mieux c'est de mettre des liens vers les images sur un autre blog par exemple.

| [^] | Répondre
Garbage par mitra le Lundi 27/08/2007 à 23:23

Dites moi ... en regardant les différents thèmes de ViaBloga, je constate qu'il y a beaucoup de lignes de codes qui ne sont pas utilisées dans le modèle.
On ne va certainement pas revenir en arrière en supprimant tous ce qui est jetable à moins de les tester à fond la caisse. Mais ai-je le droit de faire le ménage sur le thème iThème ? Autrement dit, lorsqu'on reprend le thème de quelqu'un a-t-on le droit de le modifier à sa sauce ou alors on va se faire assassiner par son créateur ?

| [^] | Répondre
par mitra le Lundi 17/09/2007 à 12:31

Le blog de test que j'avais créée n'étant plus disponible (période de test gratuit dépassée), j'ai créée un nouveau blog de test http://testitheme3.viabloga.com/. Je souhaite modifier l'article auquel je réponds en mettant l'adresse du nouveau blog mais je n'ai plus accès au lien "Modifier" de l'article ! Pourquoi ?

| [^] | Répondre
Re: par Stephane le Lundi 17/09/2007 à 15:48

Stephane J'ai mis http://testthemeajax.viabloga.com/ en gratuit.

| [^] | Répondre

Session

Pour participer plus facilement, ouvrez une session :

Identifiant de
mon blog
Nom d'utilisateur
Mot de passe

Si vous avez déjà un blog sur ViaBloga ou si vous avez ouvert un compte sur l'un d'entre eux, vous pouvez vous identifier avec votre nom d'utilisateur et mot de passe en précisant d'abord l'identifiant de votre blog.

S'inscrire

Discussions actives (+ commentaire)

Ailleurs sur ViaBloga

Derniers weblogs mis à jour :

11:18 - P'tit truc
21:31 - La ballade d'un tête en l'air
17:52 - Everitouthèque
11:55 - GRASSE A TOUS
21:13 - Photos Promenade Numérique
08:38 - Voleur d'âme
17:32 -
12:51 - Fédération Apicole de la Charente Maritime - apiculture - abeilles
10:30 - Le blog de Jean-Michel Cornu
13:53 - Recettes de Cuisine - le blog

Toutes les mises à jour

Archives par mois