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
<div id=choixlayout> <INCLURE {fond=modeles/layout-switcher}{env} /> </div>
juste avant
<div id="titrepage">
- création d’un fichier layout-switcher.html dans /squelettes/modeles (dossier à créer si pas existant) avec ce code
[(#REM) <!-- Layout Switcher Debug: Cookie : #SESSION{cookie} <br> CONFIG : [(#CONFIG{escal/config/layout})] ENV : #ENV{layout} SESSION : #SESSION{layout} -->] #SET{layouts, #EVAL{_DIR_PLUGIN_ESCAL}layout*.html} <form id="layout-switcher" action="#SELF" method="POST"> <select name="layout" id="layout"> <option value="">Choisissez un Layout</option> <option value="#CONFIG{escal/config/layout,PMP}">Réinitialiser</option> <BOUCLE_layouts(DATA){source glob,#GET{layouts}}{par valeur}> #SET{layout,#VALEUR|replace{#EVAL{_DIR_PLUGIN_ESCAL}layout,''}|replace{'.css.html',''}} <option style="background:url('#CHEMIN{images/layout#GET{layout}.gif}') no-repeat; height:30px; padding-left:50px; vertical-align:middle;" value="#GET{layout}"[ (#SESSION{layout}|=={#GET{layout}}|oui)selected]> #GET{layout} </option> </BOUCLE_layouts> </select> </form> <script type="text/javascript"> jQuery(document).ready(function($){ var layout = $.cookie('layout'); if (!layout) { var layout = '[(#CONFIG{escal/config/layout})]'; } $("#layout").change(function(){ var layout = $(this).val(); $.cookie('layout',$(this).val()); document.forms['layout-switcher'].submit(); }); }); </script>
Attention, à partir de spip 4.0, il faut remplacer
jQuery(document).ready(function($){
var layout = $.cookie('layout');
if (!layout) {
var layout = '[(#CONFIG{escal/config/layout})]';
}
$("#layout").change(function(){
var layout = $(this).val();
$.cookie('layout',$(this).val());
document.forms['layout-switcher'].submit();
});
});
par
jQuery(document).ready(function($){
var layout = Cookies.get('layout');
if (!layout) {
var layout = '[(#CONFIG{escal/config/layout})]';
}
$("#layout").change(function(){
var layout = $(this).val();
Cookies.set('layout', $(this).val());
document.forms['layout-switcher'].submit();
});
});
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)
#choixlayout{
float: left;
}
Ou on mettra float: right;
si on le veut à droite
Voilà !