[ar] [ca] [cpf] [de] [en] [es] [fr] [it]

Ce forum d’entraide est recommandé pour les utilisateurs et utilisatrices occasionnels de SPIP (Système de publication pour l’Internet). Avant de poser une question, faites une recherche sur ce site, consultez les liens utiles. Si vous ne trouvez pas de réponse, postez votre message dans la rubrique appropriée, avec un titre explicite.

Sujets : 24108 Sujets résolus :  39 %

62 visiteurs en ce moment


Accueil > Forums de discussion >  Création de squelettes > Condition de CSS a partir de mots clés

Condition de CSS a partir de mots clés Résolu

par Chrys - 16 mai 2013 01:13 - Réponse(s) : 11

Bonjour,

Afin de faciliter l’édition, j’aimerai pouvoir gérer des styles CSS d’article via des mots clés.

Je n’arrive donc pas à trouver la bonne boucle, mais dans l’idée ça donnerait ceci.
Par exemple :

Les mots clé : "Style1" - "Style2" - "Style3"

Pour la boucle j’imagine quelque chose comme cela, mais je ne sais pas faire la condition OU dans mon exemple pour "ou style2 ou style3" :

  1. <BOUCLE_n (ARTICLES){titre_mot=Style1,ou style2,ou style3}>
  2. <!-- STYLE1 -->
  3. <div class="Style1">
  4. <h2>[(#TITRE)]<br />« [(#SOUSTITRE)] »</h2>
  5. <div class="Style1">
  6. <ul class="Style1">
  7. <li class="Style1">
  8. <a href="#URL_ARTICLE">[(#LOGO_ARTICLE)]</a>
  9. </li>
  10. </ul>
  11. </div>
  12. <a href="#URL_SITE" class="sous-legende">#NOM_SITE</a>
  13. </div>
  14. <!-- OU STYLE2 -->
  15. <div class="Style1">
  16. <h2>[(#TITRE)]<br />« [(#SOUSTITRE)] »</h2>
  17. <div class="Style1">
  18. <ul class="Style1">
  19. <li class="Style1">
  20. <a href="#URL_ARTICLE">[(#LOGO_ARTICLE)]</a>
  21. </li>
  22. </ul>
  23. </div>
  24. <a href="#URL_SITE" class="sous-legende">#NOM_SITE</a>
  25. </div>
  26. <!-- OU STYLE3 -->
  27. <div class="Style1">
  28. <h2>[(#TITRE)]<br />« [(#SOUSTITRE)] »</h2>
  29. <div class="Style1">
  30. <ul class="Style1">
  31. <li class="Style1">
  32. <a href="#URL_ARTICLE">[(#LOGO_ARTICLE)]</a>
  33. </li>
  34. </ul>
  35. </div>
  36. <a href="#URL_SITE" class="sous-legende">#NOM_SITE</a>
  37. </div>
  38. </BOUCLE_n>

Télécharger

Merci par avance de vos propositions.


  • Bonjour,

    Alors pour les critères du genre {critere = pierre OU paul OU jaques}, ça peut s’écrire comme ça :

    • {critere IN pierre,paul,jacques}
    • {critere == pierre|paul|jacques}

    Dans cette boucle ça pourrait aussi être :

    • {critere LIKE style%} (= critère commençant par "style" suivi de n’importe quoi)
    • {critere == ^style} (idem)

    Donc concrètement ça pourrait donner ça (dans la mesure un chaque article n’a qu’un seul mot-clé) :

    1. <BOUCLE_n (ARTICLES){titre_mot IN style1,style2,style3}>
    2.  
    3. [(#REM) on récupère le titre du mot clé lié à l'article ]
    4. <BOUCLE_mot(MOTS){id_article}{0,1}>#SET{style,#TITRE}</BOUCLE_mot>
    5.  
    6. <div class="#GET{style}">
    7. <h2>[(#TITRE)]<br />« [(#SOUSTITRE)] »</h2>
    8. <div class="#GET{style}">
    9. <ul class="#GET{style}">
    10. <li class="#GET{style}">
    11. <a href="#URL_ARTICLE">[(#LOGO_ARTICLE)]</a>
    12. </li>
    13. </ul>
    14. </div>
    15. <a href="#URL_SITE" class="sous-legende">#NOM_SITE</a>
    16. </div>
    17. </BOUCLE_n>

    Télécharger


  • < #2 > Condition de CSS a partir de mots clés ˆ
    par Chrys - 16 mai 2013 15:52

    Bonjour et merci pour ces premiers points.

    Afin d’être un peu plus clair, il s’agit pour nous de présenter des bouquins, certain on un format "normal", d’autre de "poche", et d’autres formats à venir …
    Sur notre page sommaire.html, nous présentons des vignettes cliquables (pour accéder à l’article complet) de ces livres. Or, les vignettes ne sont pas toute de la même taille.

    Voici le code pour le format dit "standard" (normal) :

    1. <BOUCLE_pedagogie (ARTICLES){id_rubrique=1}{par date}>
    2. <div class="livre infos">
    3. <h2>[(#TITRE)]<br />« [(#SOUSTITRE)] »</h2>
    4. <div class="couv">
    5. <ul class="infos">
    6. <li class="infos">
    7. <a href="#URL_ARTICLE" class="zoombox zgallery1">
    8. [(#LOGO_ARTICLE|inserer_attribut{alt,#TITRE #SOUSTITRE})]
    9. </a>
    10. </li>
    11. </ul>
    12. </div>
    13. <a href="#URL_SITE" class="sous-legende">#NOM_SITE</a>
    14. </div>
    15. </BOUCLE_pedagogie>

    Télécharger

    Ici celui de "mini" (poche) :

    1. <BOUCLE_pedagogie (ARTICLES){id_rubrique=1}{par date}>
    2. <div class="livreMini infos">
    3. <h2>[(#TITRE)]<br />« [(#SOUSTITRE)] »</h2>
    4. <div class="couvMini">
    5. <ul class="infosMini">
    6. <li class="infosMini">
    7. <a href="#URL_ARTICLE" class="zoombox zgallery1">
    8. [(#LOGO_ARTICLE|inserer_attribut{alt,#TITRE #SOUSTITRE})]
    9. </a>
    10. </li>
    11. </ul>
    12. </div>
    13. <a href="#URL_SITE" class="sous-legende">#NOM_SITE</a>
    14. </div>
    15. </BOUCLE_pedagogie>

    Télécharger

    L’idée est de pouvoir gérer ces formats via les mots clés, afin qu’une personne non habituer a internet puisse facilement indiquer le format du livre via l’admin.

    Du côté "CODE", j’ai créé un groupe de mots-clés dont le titre est "Mise en page des vignettes". Dedans deux mots clés (pour le moment) "standard" et "mini", seuls les titres sont renseignés.
    Dois je rajouter des informations de CSS ou autre !? Si oui ou ?
    Pour que les CSS soient reconnues…

    Il se peut que les articles aient plusieurs mots clés à l’avenir.

    Puis je vous demander un exemple de cote svp, avec mes infos au dessus, cela m’aiderai a mieux comprendre le cheminement ?

    Merci à vous


  • Avec plusieurs mots-clés, c’est possible, le principe reste le même :

    1. <BOUCLE_pedagogie (ARTICLES){id_rubrique=1}{par date}>
    2.  
    3. [(#REM) on récupère les titres des mots-clés liés à l'article ]
    4. #SET{class,' '}
    5. <BOUCLE_mots(MOTS){id_article}>#SET{class,#GET{class}|concat{' ',#TITRE}}</BOUCLE_mots>
    6.  
    7. <div class="livre infos[ (#GET{class})]">
    8. <h2>[(#TITRE)][<br />« (#SOUSTITRE) »]</h2>
    9. <div class="couv[ (#GET{class})]">
    10. <ul class="infos[ (#GET{class})]">
    11. <li class="infos[ (#GET{class})]">
    12. <a href="#URL_ARTICLE" class="zoombox zgallery1">
    13. [(#LOGO_ARTICLE|inserer_attribut{alt,#TITRE #SOUSTITRE})]
    14. </a>
    15. </li>
    16. </ul>
    17. </div>
    18. [<a href="#URL_SITE" class="sous-legende">(#NOM_SITE)</a>]
    19. </div>
    20.  
    21. </BOUCLE_pedagogie>

    Télécharger

    Après il suffit de jouer avec les classes dans la feuille de style.
    Par contre au lieu de faire un seul nom de classe à rallonge :

    1. .infos
    2. .infosMini
    3. .infosMiniNouveaute
    4. etc.

    Télécharger

    Il vaut mieux cumuler les classes (et utiliser des minuscules) :

    1. .infos {...}
    2. .infos.mini {...}
    3. .infos.mini.nouveaute {...}
    4. etc.

    Télécharger

    Un dernier coupage de cheveux en 4 : en principe, il suffit d’indiquer la classe dans le div conteneur (.livre.infos), inutile de la répéter pour chaque élément contenu à l’intérieur (les

      , les
    • ...)

  • Vous pourriez aussi installer le plugin Champs Extra et paramétrer vos articles avec un sélecteur, ce qui éviterait à vos rédacteurs de se tromper en mettant plusieurs mots clés. Si le champ extra s’appelle format_vignette il suffit de l’appeler dans la boucle articles tout simple par #FORMAT_VIGNETTE

    Exemple :
    <ul class="infos[ (#FORMAT_VIGNETTE)]">


  • < #5 > Condition de CSS a partir de mots clés ˆ
    par Chrys - 16 mai 2013 21:48

    Merci pour ces infos que je vais aller regarder de plus près.

    J’ai lu aussi quelques infos sur les modèles, et je me demande s’il ne serait pas plus simple d’appeler un modelé via les mots clés !?
    Pour obtenir ce que propose Dr Bouvier Leduc
    Dans la mesure ou c’est possible ! non ?

    Cela me permettrait de garder mes CSS, et surtout de pouvoir créer un modèle par format de livre, etc…

    Je ne suis pas assez compétent pour me répondre, mais la question est posée ;-)

    Merci de votre soutien


  • < #6 > Condition de CSS a partir de mots clés ˆ
    par Chrys - 17 mai 2013 13:51

    Bonjour,

    Bien voici mon retour sur la proposition de Dr Bouvier Leduc.

    J’ai suivi à la lettre vos recommandations, et j’ai réduit mes css de moitié ;-)

    Tout a l’air de bien fonctionner sauf qu’ il me reste juste un petit souci, les classes se répètent et se cumules sur chaque entré, par exemple, les deux class pour les ouvrages « normaux » sont accompagnés et accompagne celle de l’ouvrage de « poche ».
    4 mots clés et donc 4 classes.

    Comment puis je maitriser cela !?

    Une fois fais, je pense, que ce sera bon !!

    Merci de vos réponses.


  • C’était pas le but recherché ?
    Je n’ai peut-être pas tout saisi à ce que vous souhaitez faire.

    Accumuler les classes en css, c’est normal et ça permet beaucoup plus de souplesse que des noms de classe à rallonge.

    Donc concrètement, voilà le principe que je vous recommande d’utiliser :

    mots-clés de l’article résutat dans le squelette
    aucun <div class="livre">
    « Mini » <div class="livre Mini">
    « Mini » et « Info » <div class="livre Mini Info">
    « Mini », « Poche » et « Info » <div class="livre Mini Poche info">

    Pouvez-vous poster le même tableau avec ce que vous souhaitez faire, et un autre avec ce que vous obtenez atuellement ?
    Ca permettra d’y voir plus clair.


  • < #8 > Condition de CSS a partir de mots clés ˆ
    par Chrys - 17 mai 2013 16:19

    Pardon, je ne nais pas du être clair.

    Pour reprendre votre tableau.
    Pour chaque ouvrage il existe deux classes à présent, une "livre" et dedans une "couv".
    Le format normal marche très bien :

    mots-clés HTML Résultat
    Aucun <div class="livre"> OK
    Aucun <div class="couv"> OK

    L’autre format, celui de poche, ne marche pas du tout (je pensais à cause des deux espaces entre les noms de classe, mais non) :

    mots-clés HTML Résultat
    livremini <div class="livre  couvmini livremini"> NON
    couvmini <div class="couv  couvmini livremini"> NON

    Pour que cela fonctionne, j’aurais besoin de faire :

    mots-clés HTML Résultat
    livremini <div class="livremini"> Mon souhait
    couvmini <div class="couvmini"> Mon souhait

    Comme il est surtout question de dimension, il faudrait que la classe mini rapetisse la classe livre, en somme. Si je vous comprends bien.


  • Et un dernier détail : dans le cas où il y a plusieurs mot-clés associés à l’article, quel est le résultat attendu ?


  • < #10 > Condition de CSS a partir de mots clés ˆ
    par Chrys - 17 mai 2013 17:17

    C’est déjà le cas, il y a deux mots clés par article.
    Théoriquement la classe "livre" contient le titre , petit texte, nom de l’auteur, ainsi que la classe "couv" pour l’image de couverture.
    Si on travail sur un nouveau format d’ouvrage, seule les dimensions changeront.
    Nous resterons donc sur deux mot-clés.


  • Merci à tous !!




Répondre à la question

« Condition de CSS a partir de mots clés »

Mots-clés

Vous pouvez étiqueter cette page de forum avec les mots-clés qui vous semblent les plus appropriés ; ils permettront aux prochains visiteurs du site de mieux se repérer :


Installation, mise à jour

Utilisation de l’espace privé

Administration, gestion, configuration du site

Créer ses squelettes

Qui êtes-vous ?

  • creer ou bien modifier son article côté public via un modèle

    par Laëtitia
    22 juillet 18:16

    Résolu - Réponse(s) : 4

    Je remarque une chose, si il y a 1 document dans le portfolio du rédacteur il peut en charger d’autres sur sa page publique, mais c’est quand il n’y en a pas encore que le chargement ne se fait pas (...)

  • afficher valeurs par ordre croissant

    par Didine
    20 juillet 08:47

    Pas de réponse

    Bonjour, j’utilise le plugin champs supplémentaires. Je récupère dans une liste le contenu de certains champs pour faire un formulaire de tri. Tout fonctionne correctement, cependant dans le select (...)

  • pb spip/spipr et test robots google

    par Didine
    19 juillet 20:07

    Résolu - Réponse(s) : 7

    Bonjour, je suis désolée mais le problème est de retour sur ce site alors que ça fonctionnait après notre échange. Le problème se pose sur plusieurs sites SPIP... peut-être est-ce dû aux modifications (...)

  • Probleme avec mediabox spip3.1.6

    par b_b
    18 juillet 15:28

    Réponse(s) : 6

    Voilà pourquoi je demandais un lien à chti47 :) Sans quoi on va tous passer du temps à jouer aux devinettes, alors que ça pourrait être réglé en 5 minutes (ce qui ferait gagner du temps aux personnes (...)

  • Appeler squelette

    par Mickael
    17 juillet 19:26

    Résolu - Réponse(s) : 2

    Ok, effectivement j’ai des articles qui ont perdu leur affectation :s, du coup je me retrouve avec une rubrique vide... Merci beaucoup

  • Update de la table auteurs

    par Luc
    17 juillet 11:25

    Réponse(s) : 3

    Merci, mais en fait je n’ai aucun problème à afficher les auteurs connectés en récupérant les infos de la table auteurs ; ce que je cherche, c’est faire en sorte que les auteurs connectés updatent la (...)

  • Galerie d'image lightbox slider adaptable

    par Jhessy
    12 juillet 09:57

    Réponse(s) : 2

    Bonjour Philivert, Je sais que le portfolio le fait déjà mais je dois faire cela de cette manière la car c’est dans le cahier des charges de mon stage. Et comme mon problème (en générale) c’est (...)

  • plugin SAISIES & messages d'erreur

    par Keny972
    7 juillet 14:57

    Pas de réponse

    Bonjour, J’utilise en local le plugin SAISIES pour gérer un formulaire de création d’objet éditorial. Je cherche comment ajouter à un champ SAISIES une span message_erreur ? Pas le message (...)

  • INCLUDE et cache

    par Erka
    6 juillet 18:23

    Résolu - Réponse(s) : 4

    Problème résolu : https://www.mail-archive.com/spip@rezo.net/msg72338.html

  • Problème recuperation site en ligne en local

    par Pathé
    6 juillet 17:07

    Résolu - Réponse(s) : 13

    Problème résolu merci !

  • Messages : 29323
  • 8200 43 %
  • Poser une nouvelle question