Vdrag (basé sur "Mor.Pho.GEN.e.sis") est une réplique du thème Vart, mais limité à 980px en largeur et n'affiche pas de bannière.
Ce thème a la particularité d’utiliser un système de drag and drop (glisser, déposer) pour ses blocs...
Chaque page peut être différemment disposée et le positionnement des blocs enregistré dans un cookie.
Téléchargement & Démo
Envie de faire du Drag and Drop (Glisser-déposer) avec vos thèmes
Le site "http://www.dhtmlgoodies.com" nous propose un script simple : il vous faut appeler un fichier "js" dans theme.html (vous le trouverez dans le dossier "JS" de l'archive, il est nommé dragable-content.js) juste au dessus de <{$xoops_module_header}> entre <"head"> et <"/head">.
<script type="text/javascript">
var rememberPositionedInCookie = true;
var rememberPosition_cookieName = 'dragable';
</script>
<script type="text/javascript" src="<{xoImgUrl /js/dragable-content.js}>"></script>
Ensuite vous devez créer un nouveau <"div"> qui entoure chaque bloc qui doit bouger.
Exemple pour les éléments "content" :
<div class="dragableElement">
<div id="xo-content"><{$xoops_contents}></div>
</div>
Pour les blocs de gauche et de droite modifier blockzone.hmtl comme ceux-ci.
<{foreach from=$blocks item=block}>
<div class="dragableElement">
<div class="xo-block <{$block.module}>">
<{if $block.title}><div class="xo-blocktitle"><{$block.title}></div><{/if}>
<div class="xo-blockcontent"><{$block.content}></div>
</div>
</div>
<{/foreach}>
Ensuite assurez-vous d’avoir correctement dimensionnés vos blocs, vous trouverez à la fin de block.css de notre theme les tailles à renseigner impérativement.
/* block haut et bas central */
#xo-page-topleftblocks .xo-block, #xo-page-toprightblocks .xo-block,#xo-page-bottomleftblocks .xo-block, #xo-page-bottomrightblocks .xo-block {
width: 280px;
}
/*block central */
#xo-page-topcenterblocks .xo-block, #xo-page-bottomcenterblocks .xo-block {
width: 600px;
}
/* bloc droite */
#xo-canvas-rightcolumn .xo-block {
width: 170px;
}
/* bloc gauche */
#xo-canvas-leftcolumn .xo-block {
width: 190px;
}
Voilà les blocs sont "dragables" et ils sont enregistrés dans le cookie sur le pc du visiteur, toutes les pages peuvent être différemment personnalisées.
Merci à Kris pour le debug :)
|
