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

Posted by: kris_frOn 2007/7/30 22:49:42 9943 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 {
width: 280px;
}
/*block central */
#xo-page-topcenterblocks .xo-block, #xo-page-bottomcenterblocks .xo-block {
width: 600px;
}
/* block right */
#xo-canvas-rightcolumn .xo-block {
width: 170px;
}
/* block left */
#xo-canvas-leftcolumn .xo-block {
width: 190px;
}


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.