Themes: Vdrag by Venom, or how to play with its blocks !!

Posted by: kris_fron 2007/7/30 22:49:42 9203 reads Vdrag (based on “Mor.Pho.GEN.e.sis”) is a "variation" of Vart, but limited to 980px in width and it does not have a banner.

This theme with the characteristic to use a drag and drop system (to slip, deposit) for its blocks… Each page can be differently laid out and the positioning recorded in a cookie.

Resized Image

Download & Demo

Envy to make of Drag and Drop with your themes
The site “http://www.dhtmlgoodies.com” proposes a simple script to us: you should call just a file “js” in theme.html (will find it to you in file “JS” of the archive, he is appointed dragable-content.js) with the top of <{$xoops_module_header}> between <"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>


Then you must create a new < "div" > which surrounds each block which must move.
Example for the elements “content” :
<div class="dragableElement">
<
div id="xo-content"><{$xoops_contents}></div>
</
div>


For the block of left and right to amend blockzone.hmtl like those :
<{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}>


Then correctly to dimension your blocks, you ensure to have yourselves will find at the end of block.css of our theme the sizes to be informed imperatively.
/* block central top and bottom */
#xo-page-topleftblocks .xo-block, #xo-page-toprightblocks .xo-block,#xo-page-bottomleftblocks .xo-block, #xo-page-bottomrightblocks .xo-block {
width280px;
}
/*block central */
#xo-page-topcenterblocks .xo-block, #xo-page-bottomcenterblocks .xo-block {
width600px;
}
/* block right */
#xo-canvas-rightcolumn .xo-block {
width170px;
}
/* block left */
#xo-canvas-leftcolumn .xo-block {
width190px;
}


Here are the blocks are “dragable” and they are recorded in the cookie on the computer of the visitor, all the pages can be differently personalised.
Thank you Kris_fr for the debug.