MiniGriSpip

Senente · 12-11-2006 21:47:18

Bonjour, je suis super novice dans l'utilisation de spip et des squelettes.

Je voudrai savoir comment inclure le module de recherche dans le menu de gauche en dessous des rubriques...

Merci d'avance!

FredoMkb · 13-11-2006 04:57:16

Bonjour Senente smile

Voici la marche à suivre pour placer le champ de recherche dans la colonne de navigation (toutes les indications qui suivent sont adaptées aux versions 1.4 et 1.4.2 du squelette Mgs) :

1. Il faut commencer par effacer le champ de recherche du bandeau d'en-tête, en éditant le fichier Html nommé "inc-bandeau.html" avec un logiciel dédié (un traitement de texte devrait suffire).
Puis, il faut effacer le code suivant :

Code:

<li class="mgs_form_rech">#FORMULAIRE_RECHERCHE</li>

2. Ensuite, pour placer le champ de recherche dans la colonne de navigation, il faut éditer le fichier Html nommé "inc-menu.html", puis, juste en dessous du commentaire Html suivant :

Code:

<!-- inc-menu.html -->

Il faut ajouter le code suivant :

Code:

<!-- Bloc contenant le champ de recherche -->
<div class="mgs_menu">
    <ul class="general">
        <li class="mgs_menu_titre">Recherche</li>
        <li class="mgs_menu_item_breve">#FORMULAIRE_RECHERCHE</li>
    </ul>
</div>

3. Pour finir, il faut vider le cache de Spip (dans la zone privée if faut faire : bouton "Configuration" -> "Vider le cache" -> bouton "Vider le cache"), et éventuellement le cache du navigateur aussi, enfin, il suffit de recharger les pages...

Voilà... j'espère que ce n'est pas trop confus comme explication...

Bonne continuation Senente et à bientôt smile

Senente · 13-11-2006 21:54:22

Bonsoir,

Pour commencer merci beaucoup, les explications ne sont pas confuses du tout!

J'ai bien un bloc qui est apparu au dessus de mes rubriques, le seul ennui est qu'il ne comporte pas de champ de recherche.
Il y a simplement le titre "recherche" mais pas de champ où taper le sujet des recherches des visiteurs...

Comment faire?

FredoMkb · 14-11-2006 03:14:35

Bonjour Senente smile

Tu as bien pensé à vider le cache de Spip ?
D'ailleurs, quelle version de Spip utilises-tu ?

En tout cas, j'ai testé chez moi, et ça marche très bien... bizarre donc que ça ne soit pas le cas chez toi... hmm

En réalité, je ne vois pas vraiment ce qui pourrais clocher...

Aurais-tu éventuellement d'autres précisions à apporter ?
Peut-on visiter ton site pour voir comment ça se passe ?

Désolé de ne pouvoir t'aider d'avantage pour le moment...

À bientôt smile

Senente · 14-11-2006 17:06:07

Bonjour,
Je pense savoir d'où vient mon problème.
quand j'édite de code source de la page d'acceuil du site de présentation de ton squelette je trouve cette partie :

<a name="formulaire_recherche" id="formulaire_recherche"></a>

<form action="http://fredomkb.free.fr/spip/spip.php?page=recherche" method="get">

<input name='page' value='recherche' type='hidden' />

<label for="recherche">Rechercher</label>
<input type="text" class="forml" name="recherche" id="recherche" value="Rechercher" onfocus="this.value='';" />
</form>

Je ne l'ai nulle part dans mon spip à moi. Dois-je placer qqchose d'équivalent dans ma page inc-menu?

FredoMkb · 15-11-2006 05:31:20

Bonjour Senente smile

Non, normalement il n'y a rien d'autre à utiliser, ça devrait fonctionner en l'état...

En réalité, le code que tu as trouvé dans les sources de la page Html est justement généré automatiquement par la balise Spip "#FORMULAIRE_RECHERCHE", c'est à ça qu'elle sert en somme...

Cette balise est censée chercher le fichier Html correspondant au forumlaire de recherche présent dans ton installation de Spip, mais comme il y a eu quelques changements entre la version 1.9 et 1.9.1 de Spip à ce niveau, il est important de savoir avec quelle version tu travailles, enfin de voir s'il n'y aurait pas une solution simple à ton problème...

Je t'invite à faire un petit test :

1. Tu trouveras à la racine de ton site sous Spip, un dossier nommé "formulaires", dans lequel tu trouveras un fichier Html nommé "formulaire_recherche.html"

2. Fait une copie de ce fichier directement dans le dossier "squelettes"

3. Crée un dossier nommé "formulaires" à l'intérieur du dossier "squelettes"

4. Enfin, remets une copie du fichier original "formulaire_recherche.html" dans ce nouveau dossier "formulaires" à l'intérieur du dossier "squelettes"

5. Il suffira de vider le cache de Spip et de recharger les pages pour voir si tout est rentré dans l'ordre...

Voilà... j'espère que ça va fonctionner désormais... tiens-nous au courant Stp smile

Bonne continuation Senente et à bientôt smile

Foulweather · 15-11-2006 10:37:59

Je vois un inconvénient dans cette procédure. "Rechercher" apparaît écrit une troisième fois juste au-dessus de la zone où on entre le terme objet de la recherche.
Comment parvenir à effacer ce "Rechercher" superfétatoire ?
Merci bien.
Foulweather

Senente · 15-11-2006 21:24:02

Bonsoir,

Eh bien je ne sais pas d'ou vient le problème mais sur mon ordi perso je navigue avec Safari et ça ne marche pas, sur mon ordi pro avec FireFox et ça ne marche pas mais j'ai fait la démo à mon DG cet aprèm et sur son internet explorer quelle surprise ça marche!

Si ça fonctionne sur IE, je vais m'en contenter!
Merci quand même.

FredoMkb · 16-11-2006 09:31:45

Bonjour Senente smile

Je trouve ça bizarre que Safari (mon navigateur préféré) ou Firefox n'arrivent pas à afficher le champ de recherche alors que IE y parvient... hmm

Ha oui... maintenant que j'y pense, il faut peut-être modifier un peu la feuille de style, c'est à dire remettre des valeurs simples... bon, reprennons depuis le début :

1. Ajouter le code suivant dans le fichier Html nommé "inc-menu.html" (attention, petits changements par rapport à la proposition précédente, il n'y a plus le titre et le style du champ de recherche change) :

Code:

<!-- Bloc contenant le champ de recherche -->
<div class="mgs_menu">
    <ul class="general">
        <li class="mgs_recherche">#FORMULAIRE_RECHERCHE</li>
    </ul>
</div>

2. Puis, éditer la feuille de style nommée "styleperso.css" et ajouter, à la fin, les styles suivants :

Code:

.mgs_recherche {
    padding: 0px;
    margin: 5px;
    width: 100%;
}

.mgs_recherche label {
    display: none;
}

.mgs_recherche form {
    padding: 0px;
    margin: 0px;
}

3. Ne pas oublier de vider le cache de Spip avant de recharger les pages...

Voilà... ça devrait marcher maintenant (je viens de tester avec Safari, ça fonctionne bien)...

A+ smile

Foulweather · 16-11-2006 11:36:59

Ca ne marche pas chez moi avec IExplorer.
Si l'on supprime ce qui est entre les balises <li> "Rechercher" n'apparaît plus dans la barre de titre de inc-menu.html qui lui est consacré.

Code:

<ul class="general">
        <li class="mgs_menu_titre">Recherche</li>

Je pense donc qu'il faut laisser cette ligne.

Pour supprimer le "Rechercher" en trop dont j'ai parlé il me semble qu'il faut plutôt aller dans .../formulaires/formulaire_recheche.html et supprimer la ligne suivante (ou la mettre en commentaire)

Code:

 <label for="recherche"><:info_rechercher:></label>

Mais l'inconvénient pour lequel j'aimerais bien trouver un reméde c'est que la taille de la "boîte" qui contient "Rechercher" n'est plus alors adaptée à son contenu. Elle comporte un espace blanc en bas. Esthétiquement c'est un peu déplaisant.

Que faire ?

senente · 16-11-2006 21:52:49

ben là... je ne sais pas....

FredoMkb · 18-11-2006 04:12:05

Bonjour Foulweather smile

Foulweather a écrit:
Ca ne marche pas chez moi avec IExplorer.
Si l'on supprime ce qui est entre les balises <li> "Rechercher" n'apparaît plus dans la barre de titre de inc-menu.html qui lui est consacré.
Code:
<ul class="general">
        <li class="mgs_menu_titre">Recherche</li>
Je pense donc qu'il faut laisser cette ligne.

Et bien, oui et non... je m'explique...

La ligne de code "<li>" que tu indiques affiche le titre du bloc, suivant l'aspect général du squelette, mais ce titre n'est pas vraiment nécessaire au fonctionnement du formulaire de recherche, et il n'a, a priori, aucune incidence sur l'affichage du champ de recherche lui-même...

D'autre part, il y a le libellé propre au formulaire de recherche, et, enfin, il y a la valeur par défaut du champ de recherche... bref, ça fait, comme tu dis, beaucoup d'indications redondantes...

Foulweather a écrit:
Pour supprimer le "Rechercher" en trop dont j'ai parlé il me semble qu'il faut plutôt aller dans .../formulaires/formulaire_recheche.html et supprimer la ligne suivante (ou la mettre en commentaire)
Code:
 <label for="recherche"><:info_rechercher:></label>

Oui, tu as raison, c'est en effet une possibilité, mais, dans ma proposition précédente, on arrive au même résultat sans avoir à toucher le code de ce fichier Html, simplement en ajoutant un style, à la feuille de styles, qui rend ce libellé invisible, comme j'avais proposé par exemple :

Code:

.mgs_recherche label {
    display: none;
}

Mais bon, in fine, les deux méthodes se valent car elles arrivent au même résultat...

Foulweather a écrit:
Mais l'inconvénient pour lequel j'aimerais bien trouver un reméde c'est que la taille de la "boîte" qui contient "Rechercher" n'est plus alors adaptée à son contenu. Elle comporte un espace blanc en bas. Esthétiquement c'est un peu déplaisant.

Que faire ?

La solution devrait être, normalement, d'affiner les réglages du style associé à ce bloc, même si, je l'avoue, ce n'est pas toujours simple ou évident de formater l'aspect des formulaires...

Ceci dit, ce serait bien de pouvoir apprécier le problème, soit avec un lien vers ton site, s'il est en ligne, soit avec une petite capture d'écran, histoire qu'on puisse visualiser clairement la chose et ainsi être en mesure de faire, éventuellement, un diagnostique plus précis...

Voilà... bonne continuation Foulweather et à bientôt smile

Foulweather · 18-11-2006 08:36:12

Merci pour le "feedback" et l'intérêt porté à la question. Le site que j'essaie de construire n'est pas encore en ligne. A propos du module "Rechercher", j'ai pu noter des solutions intéressantes sur des sites faits avec MiniGriSpip. Je ne suis malheureusement pas parvenu à les imiter. J'aimerais bien avoir des explications sur les codes sources respectifs. Il s'agit de http://www.biathlonfrance.com/. "Natisens.com" avait, je crois, réussi à l'intégrer correctement dans inc-menu.html mais depuis quelques jours le site n'est plus visible.
Une adaptation très réussie du squelette de Fredo est http://coursdelatin.free.fr/index.php. Ce site offre une autre solution mais il me semble que c'est en jouant sur la couleur du bandeau. (Il intègre par ailleurs pour le mail un dialogue par formulaire qui neutralise le spam. Il en a déjà été question sur le forum.)
Ce que je souhaiterais, c'est, à partir des solutions mises en oeuvre pour ces sites, comprendre le code source qui en est à l'origine pour pouvoir le réutiliser.
Cordialement.
Foulweather

FredoMkb · 21-11-2006 10:06:05

Bonjour Foulweather smile

Foulweather a écrit:
A propos du module "Rechercher", j'ai pu noter des solutions intéressantes sur des sites faits avec MiniGriSpip. Je ne suis malheureusement pas parvenu à les imiter. J'aimerais bien avoir des explications sur les codes sources respectifs.

Je ne vais pas tenter d'expliquer les codes sources des solutions que les uns et les autres ont pu trouver pour personnaliser ou améliorer l'affichage du champ de recherche, car, tu le comprends bien, je préfère que ce soit leurs auteurs qui s'en chargent, ils pourront bien mieux expliquer leur code source que je ne pourrais le faire...

Ceci dit, pour comprendre un peu mieux la manière dont Mgs 1.4.2 est structuré, et plus largement Spip, il faut bien visualiser que beaucoup d'éléments qu'on utilise sont préconçus, puis intégrés au gré de nos besoins dans des pages Html...

Disons que, sans être encore le cas, Spip devient de plus en plus modulaire, c'est-à-dire qu'un certain nombre d'éléments sont codés dans des fichiers séparés puis simplement intégrés dans les squelettes... certains, même, sont identifiables et utilisables par des simples balises Spip pré-définies.

Ainsi, à partir de Spip 1.9 (il me semble), le champ de recherche est intégrable dans n'importe quelle page Html d'un site Spip, tout simplement en insérant la balise "#FORMULAIRE_RECHERCHE", qui est analysé par Spip et automatiquement remplacé par le code adapté, issu d'un fichier présent par défaut dans l'installation de Spip.

Alors, concrètement, je me suis contenté d'intégrer cette balise dans le squelette Mgs, à un endroit qui me semblais, à l'époque, rapidement et simplement accessible, même si, à vrai dire, je ne le trouvais pas très esthétique... mais, dans tout les cas, hormis quelques réglages avec les feuilles de style, je n'ai pas souhaité modifier le code source du champ de recherche lui-même.

Enfin, dans l'absolu, on peut changer l'emplacement de ce champ de recherche tout simplement en insérant la balise "#FORMULAIRE_RECHERCHE" à l'endroit de notre choix dans les pages Html du squelette... le plus difficile étant, sans toucher le code source du fichier Html correspondant au formulaire de recherche, de régler son formatage pour l'adapter au mieux à l'aspect du squelette...

Foulweather a écrit:
Une adaptation très réussie du squelette de Fredo est http://coursdelatin.free.fr/index.php

Oui, elle est vraiment très réussie cette personnalisation de Mgs, mais je dirais que là, vu l'ampleur des modifications réalisées, aussi bien dans l'aspect que dans les fonctionnalités, on est en présence d'un nouveau squelette, certes basé sur Mgs, mais totalement adapté aux besoins et au goût de son auteur...

Pour être honnête, c'est exactement la même démarche qui m'a permis de concevoir Mgs, en partant d'un squelette existant pour Spip 1.8.2, le très apprécié Minimal'Spip...

Foulweather a écrit:
Il intègre par ailleurs pour le mail un dialogue par formulaire qui neutralise le spam. Il en a déjà été question sur le forum.

La nouvelle version de Mgs, sur laquelle je travaille encore (il reste encore pas mal de boulot), utilisera aussi un formulaire d'envoi de mail pour pouvoir contacter le webmaître du site...

Foulweather a écrit:
Ce que je souhaiterais, c'est, à partir des solutions mises en oeuvre pour ces sites, comprendre le code source qui en est à l'origine pour pouvoir le réutiliser.

Alors, encore une fois, je ne vais pas commenter les codes sources des autres sites, mais je vais tenter d'expliquer un peu le code utilisé dans Mgs 1.4.2 concernant le champ de recherche...

1. Voici l'ensemble du code utilisé dans le fichier Html nommé "inc-bandeau.html" :

Code:

<div id="mgs_menu_tete">
    <ul>
        <li><a href="#URL_SITE_SPIP/"><:mgs_accueil:></a></li>
        <li><a href="#URL_PAGE{plan}"><:mgs_plan:></a></li>
        <li><a href="mailto:<:mgs_email:>"><:mgs_contact:></a></li>
        <li><a href="ecrire/"><:mgs_redaction:></a></li>
        <li class="mgs_form_rech">#FORMULAIRE_RECHERCHE</li>
    </ul>
</div>

2. On s'aperçois que le champ de recherche "#FORMULAIRE_RECHERCHE", est le dernier élément "<li>" de la liste "<ul>", qui possède une "class" particulière, qui correspond à un style spécifique dans la feuille de style.

3. Il y a un certain nombre de styles qui tentent de régler le formatage de ce champ de recherche, les voici :

Code:

/** Parametres du champ de recherche des menus de l'en-tete **/
/* Le champ de recherche lui meme */
#mgs_menu_tete .mgs_form_rech {
    clear: none; 
    float: right;
    width: 160px;
    margin: 1px 5px;
    padding: 0px;
    background-color: inherit;
}

/* Les liens simples du champ de recherche */
.mgs_form_rech a, .mgs_form_rech a:link {
    border-style: none;
}

/* Les liblelles du champ de recherche */
#mgs_menu_tete label {
    display: none;
}

/* Le formulaire du champ de recherche */
#mgs_menu_tete form {
    margin: 0px;
    padding: 0px;
}

Alors, pour personnaliser le champ de recherche, il suffit déjà de placer la balise "#FORMULAIRE_RECHERCHE" à l'endroit de ton choix, puis, de régler son formatage de son aspect avec les feuille de style concernées... et ne pas hésiter à ajouter d'autres styles pour affiner les réglages...

D'autre part, pour voir à quoi ressemble le code du formulaire de recherche, il faut éditer le fichier Html nommé "formulaire_recherche.html", qui se trouve dans le répertoire "formulaires" à la racine de l'installation de Spip... enfin, le résultat d'une recherche s'affiche dans une page Html dédiée nommée "recherche.html", nom utilisé par défaut par le moteur de recherche de Spip, fichier que j'ai adapté au squelette Mgs.

Voilà... j'espère que mes explications ne sont pas trop confuses... hmm et qu'elles peuvent t'aider à y voir un peu plus clair...

À bientôt Foulweather smile

Foulweather · 21-11-2006 21:11:00

Un grand merci pour cette réponse, très claire et très pédagogique. Elle porte témoignage de qualités personnelles et humaines assez rares. Je vais bien sûr me servir de ces explications pour affiner ma compréhension de Spip et du squelette Mgs en cherchant un peu plus à reconstituer la logique de l'interaction des différents codes. Comme beaucoup, j'ai tendance à me contenter de recettes pour que ça marche, ce qui mène droit à une pseudo maîtrise et à une connaissance superficielle. D'un autre côté la combinaison de css, de php, de boucles spip, de squelettes et de html semble parfois échapper à la logique la plus élémentaire et provoque sinon le désespoir du moins une tendance à la démission.

Foulweather

Job · 21-11-2006 22:47:39

Salut Foulweather,

Ta remarque me fait penser à un ancien topic
http://fredomkb.free.fr/forum/viewtopic.php?id=9
Regarde les liens proposés par Fredo, je pense qu'il te permettront de commencer à assimiler la différence entre ce qui est HTML, ce qui est CSS et ce qui est SPIP. Dans ce cadre la MGS est le squelette parfait à étudier pour assimiler ces différents langages.

Sinon merci pour le lien
http://coursdelatin.free.fr/index.php J'adore le menu en onglet, le webmaster(trice) de ce site à une bonne maitrise des CSS et à modifier le squelette de base de MGS (mmais en regardant le code source) pas tant que ça mais les CSS ca peut vous changer la perception d'un site.
J'adore son menu, je vais peut-etre essayer de faire le meme sur mon site. Concernant le formulaire de contact je pense qu'elle a utilisé le plugin forms. Mais comme l'a dit Fredo ce site s'est inspiré au départ de MGS mais petit à petit il va s'en éloigner pour répondre aux besoins précis de son site

Bon courage et bonne lecture
Job

MiniGriSpip

Annonce

#1 12-11-2006 21:47:18

Module de recherche

#2 13-11-2006 04:57:16

Re: Module de recherche

Code:

Code:

Code:

#3 13-11-2006 21:54:22

Re: Module de recherche

#4 14-11-2006 03:14:35

Re: Module de recherche

#5 14-11-2006 17:06:07

Re: Module de recherche

#6 15-11-2006 05:31:20

Re: Module de recherche

#7 15-11-2006 10:37:59

Re: Module de recherche

#8 15-11-2006 21:24:02

Re: Module de recherche

#9 16-11-2006 09:31:45

Re: Module de recherche

Code:

Code:

#10 16-11-2006 11:36:59

Re: Module de recherche

Code:

Code:

#11 16-11-2006 21:52:49

Re: Module de recherche

#12 18-11-2006 04:12:05

Re: Module de recherche

Foulweather a écrit:

Code:

Foulweather a écrit:

Code:

Code:

Foulweather a écrit:

#13 18-11-2006 08:36:12

Re: Module de recherche

#14 21-11-2006 10:06:05

Re: Module de recherche

Foulweather a écrit:

Foulweather a écrit:

Foulweather a écrit:

Foulweather a écrit:

Code:

Code:

#15 21-11-2006 21:11:00

Re: Module de recherche

#16 21-11-2006 22:47:39

Re: Module de recherche

Pied de page des forums