Bandeau
Escal V3
Site de démonstration

Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon.

Proposer aux visiteurs de choisir leur layout
Article mis en ligne le 6 septembre 2016
dernière modification le 7 septembre 2016

par Jean Christophe Villeneuve
logo imprimer
Enregistrer au format PDF

Envie de proposer à vos visiteurs de changer de layout à leur convenance, comme sur ce site ?
Voilà comment faire

  • copie de inc-bandeau.html de /escal/inclusions vers /squelettes/inclusions (dossier à créer si pas existant)
  •  
  • dans ce fichier, on ajoute
    1. <div id=choixlayout>
    2. <INCLURE {fond=modeles/layout-switcher}{env} />
    3. </div>

    Télécharger

    juste avant

    1. <div id="titrepage">

  • création d’un fichier layout-switcher.html dans /squelettes/modeles (dossier à créer si pas existant) avec ce code
    1. [(#REM) <!-- Layout Switcher
    2.  
    3. Debug:
    4. Cookie : #SESSION{cookie} <br>
    5. CONFIG : [(#CONFIG{escal/config/layout})]
    6. ENV : #ENV{layout}
    7. SESSION : #SESSION{layout}
    8.  
    9. -->]
    10.  
    11. #SET{layouts, #EVAL{_DIR_PLUGIN_ESCAL}layout*.html}
    12.  
    13. <form id="layout-switcher" action="#SELF" method="POST">
    14. <select name="layout" id="layout">
    15. <option value="">Choisissez un Layout</option>
    16. <option value="#CONFIG{escal/config/layout,PMP}">Réinitialiser</option>
    17. <BOUCLE_layouts(DATA){source glob,#GET{layouts}}{par valeur}>
    18. #SET{layout,#VALEUR|replace{#EVAL{_DIR_PLUGIN_ESCAL}layout,''}|replace{'.css.html',''}}
    19. style="background:url('#CHEMIN{images/layout#GET{layout}.gif}') no-repeat; height:30px; padding-left:50px; vertical-align:middle;"
    20. value="#GET{layout}"[ (#SESSION{layout}|=={#GET{layout}}|oui)selected]>
    21. #GET{layout}
    22. </option>
    23. </BOUCLE_layouts>
    24. </select>
    25. </form>
    26.  
    27. <script type="text/javascript">
    28. jQuery(document).ready(function($){
    29. var layout = $.cookie('layout');
    30. if (!layout) {
    31. var layout = '[(#CONFIG{escal/config/layout})]';
    32. }
    33. $("#layout").change(function(){
    34. var layout = $(this).val();
    35. $.cookie('layout',$(this).val());
    36. document.forms['layout-switcher'].submit();
    37. });
    38. });

    Télécharger

Et pour afficher le menu déroulant à gauche, il faut ajouter le code suivant dans /squelettes/styles/perso.css (dossier et fichier à créer si pas existant)

  1. #choixlayout{
  2. float: left;
  3. }

Télécharger

Ou on mettra float: right; si on le veut à droite

Voilà !

P.S. :

N’oubliez pas de recalculer la page où vous êtes pour voir les modifications.


Forum
Répondre à cet article
Proposer aux visiteurs de choisir leur layout
Pascal FORTIN - le 6 septembre 2016

Ta procédure fonctionne à merveille.
Je le l’ai cependant pas utilisée de la même façon que toi car je souhaite conserver mon bandeau variable réalisé avec nivosliders.

http://www.clg-capucins-melun.fr

Comment mettre le boite de choix sur le côté gauche ?

Pascal FORTIN

Proposer aux visiteurs de choisir leur layout
Jean Christophe Villeneuve - le 7 septembre 2016

Oui, si on a déjà une copie de inc-bandeau.html, il faut en effet la garder et la modifier en conséquence.

Pour l’alignement, je viens de compléter l’article (je savais bien que j’avais oublié un truc !)

Proposer aux visiteurs de choisir leur layout
stephane - le 7 septembre 2016

Si je peu me permettre

faire attention aux effets de bord

une image dans un article pour un layout peu s’averer catastrophoique pour un autre

je parle par expérience ;)

Proposer aux visiteurs de choisir leur layout
Jean Christophe Villeneuve - le 7 septembre 2016

Donc pour être sur que ça fonctionne tout le temps, proposer par défaut le layout PMP. Si l’image passe avec ce layout, elle passera partout. Pis de toutes façons, c’est mon préféré :o)

Proposer aux visiteurs de choisir leur layout
Pascal FORTIN - le 7 septembre 2016

Bon, je tempère un peu.
Sur ordi, le bandeau "nivosliders" et le choix du layout selon ta procédure fonctionne bien avec firefox, chromr ou IE mais par contre sur tablette ipad y’a des bugs avec safari.
En tous les cas merci pour tout.

Pascal FORTIN



Plan du site Contact Mentions légales Espace rédacteurs squelette

RSS Valid XHTML 1.0 Strict

2009-2017 © Escal V3 - Tous droits réservés
Site réalisé sous SPIP
avec le squelette ESCAL-V3
Version : 3.87.27