Draggable user interface for the front page

One of the things that I wanted to create for the front page is a user interface based on iGoogle style behavior, with drag and drop functionality and allowing the frontend user to arrange the content served there in a flexible and customized manner.

There is a Drupal 6 module that does this, Home Box, which also requires the jQuery_UI module(*). Home Box setting up is very well explained in here: http://zugec.com/6x/setup-home-box-module . After creating a page with desired columns and blocks to be outputted, that page can be made the front one from admin>site configuration>site information, and typing into “Default front page:” the name of the page just created from site building>home box. Next thing I had to do was remove the block views I had outputted to front, as they were shown above the home box page. One annoying thing was the mssg for non authenticated users that was displayed at the front that warns users they won´t be able to save settings if not logged in. It is explained in: https://drupal.org/node/630604 . The way to get rid of it (because it is not welcoming to have it on the front page for anonymous users) is either by styling it (quick and dirty way, applying display:none to the class selector in the stylesheet) or by modifying the markup. This is the neatest way and was done by tweaking the homebox.module file in the module´s folder, on line 244 where it says “Please be sure to…”.

I did a bit of designing work and styled the content showing options box. For the list items within the box, as the number of them will eventually grow, I wanted to give an alternating background color style for odd and even rows. I wrote php code to avoid hard-coding styles, and achieved the result:

The result can be seen in the following capture:

Further customization consisted in outputting the box to choose content to display in the page in the sidebar, so that the main content area is reserved only for the content itself. This was done by adding a jquery function in the page.tpl.php, to move elements with the pertinent class and ids to the sidebar:

$(document).ready(function() {

$(‘#homebox-settings’).prependTo($(‘#sidebar-right’));

$(‘.homeboxh3’).prependTo($(‘#sidebar-right’));

});

The prependTo method takes the declared selectors and put them preceding the content of the destination container, as opposed to appendTo(), that would put them after. This is vital in arranging accordingly the order of elements in the sidebar (the homebox settings have to go at the top).

I found that at least one block has to be outputted in the sidebar in order to view the box, otherwise drupal doesn’t output a sidebar if no block is allocated there. Until i look into googlde adsense to output ads in the sidebar, I put a random block and styled it with display:none, to leave the box on its own in the sidebar at the top.

I found as well that in order to hide the node title in the front page (“Welcome to…”) that homebox requires (cant be left blank), template.php preprocess_page function has to be tweaked (line 160). The following code makes drupal ignore node title only on the front page:

$vars[‘original_title’] = $vars[‘title’];

if ($vars[‘is_front’]) {

$vars[‘title’] = ”;

}

Note that the title is still held in the array (as original_title) for other hypothetical uses if required. In my case it is used for good SEO, as the browser still outputs it in the page title inside the <head>.

*: jQuery_UI module installation was tricky, it needed jQuery UI 1.6 development package downloaded and extracted within the module´s folder, and renamed as explained in the readme file. Installation was problematic as it turns out that the devel_themer module brings as well the jQuery file and had to be disabled not to cause a conflict, a bug that has been reported in here: http://drupal.org/node/440854

Advertisements

Posted on February 19, 2010, in Uncategorized. Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: