Monthly Archives: February 2010

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

Styling primary links navigation bar (php + css techniques)

I started styling the primary links menu, for which I have decided to have tabs and use the sliding doors technique (more on http://www.alistapart.com/articles/slidingdoors/ , and an example that works out of the box on http://www.dynamicdrive.com/style/csslibrary/item/sliding-doors-tabs-menu/ ). The idea is to have a tab that stretches it´s appearance to accommodate menu item text regardless of it´s length. I have combined this technique with the css-sprites one, to reduce the number of http requests on a page (more on http://www.alistapart.com/articles/sprites/ ).

Following the trace of code (sometimes too modular!) that generates the primary links, under page.tpl.php I replaced the following zen theme code:

<?php if ($primary_links): ?>
<div id="primary">
<?php print theme('links', $primary_links); ?></div> <!-- /#primary -->
<?php endif; ?>

… with this:

<?php if ($primary_links): ?>
<div id="primary">
<ul class="links">
<?php foreach ($primary_links as $link): ?><li><?php $href = $link['href'] == "<front>" ? base_path() : base_path() . $link['href'];print "<a href='" . $href . "'><span>" . $link['title'] . "</span></a>";?></li><?php endforeach; ?></ul></div> <!-- /#primary -->
<?php endif; ?>

This allows me to loop through each menu item and include a <span> tag surrounding each item, necessary for the sliding doors technique. For simplicity I styled the menu in a separate stylesheet file that I called slidingdoors.css, and included the reference in the .info file.

This was of help: http://drupal.org/node/372252

jquery image slideshow

Designed a jquery image slideshow for the front page. After fighting with several different examples, my work has been based on this one:

http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited

After fiddling with various different options to base my theming work on (like creating subthemes, hacking existing ones, or starting from scratch with own code…), decided to duplicate the zen theme and start making changes to the structure (page.tpl.php) and presentation (zen.css). The file mytheme.info contains the relevant information about the theme and without it drupal won´t see it. Making changes like adding scripts or newly declared stylesheets into this .info file requires to refresh the browser at drupal´s theme administration page to let drupal know about the changes, because there is a big change in this file that acts like the theme manifesto.

At the minute the slideshow is hardcoded in the page.tpl.php page, using the php snipet if($is_front) to render it only on the front page.