Create responsive menu items in Joomla with Bootstrap's CSS classes

I recently enabled responsive capability in one of my pro-bono sites using RocketTheme's Metropolis template. I made the requisite image size changes for the new larger max width layout, and I did a little customization using media queries to make sure my showcase resized nicely. 

One area where I ran into trouble was with the very nice JEvents extension, which I had previously used to display a monthly calendar layout in my fixed-width site. Obviously a monthly view has a column for each day of the week, each of which must be wide enough to show event titles, etc. I found that the 7-column table didn't want to shrink far enough to fit within the site's layout below Gantry's 768px breakpoint. I decided that I wanted to make the monthly calendar view the default for tablets and larger, and to show a weekly view for phones. 

Joomla 2.5+ uses Twitter's Bootstrap JavaScript/CSS library, which provides a set of utility CSS classes for showing and hiding content based on screen size. To show one menu item for phones, and another for tablets and PCs, here's what I did:

  • Create a menu item for screen sizes smaller than 768px and point it to your article or view.
  • Give it a CSS class of 'visible-phone'. In a RocketTheme template, this field is provided in the appropriate menu type options (Dropdown or Splitmenu).
  • Create a menu item for larger screen sizes pointing to that article or view.
  • Give this item a CSS class of 'hidden-phone'.

It may be helpful to add reminders using the Note field on these menu items that they'll only display in some cases. 

Now my visitors see a monthly calendar layout on tablets, larger phones and desktops, and they see a weekly view on phones, which fits much more nicely in the available width. All users see a useful calendar view. 

To create menu items for phone/tablet and PC, use the classes .hidden-desktop and .visible-desktop, respectively. 

Beta testing Universal Playground's Flickr Suite Extension for Joomla

After years of creating my own photo galleries I finally settled on Flickr Pro as a repository and server for this site. I can publish sets right from Lightroom, and there's a great Joomla extension that lets me load sets anywhere on the site with a snippet of markup: Flickr Suite from Universal Playground. 

After contacting the developer, Jasper Dik, about a duplicate billing issue (which was apparently my fault), I learned that he was in the process of building a new, responsive version of Flickr Suite. I offered to help test it and Jasper sent me his install packages. 

Read more: Beta testing Universal Playground's Flickr Suite Extension for Joomla

Add a Blogger-like collapsible archive block to your Drupal 7 site

A few years back I took advantage of Jack O'Connor's great how-to article to create a collapsible content archive block in Drupal 6. I'm now developing a Drupal 7 site and needed to do the same type of thing. Here's basically the same process, but for Drupal 7. This article assumes that you've installed the Views module (including its prerequisite, Chaos tools suite), and understand how to add JavaScript and a custom stylesheet to your Drupal site. You can see a working example here.

Update: Emilio commented below with a nice way to add node counts to each month. I've added his suggestions to my procedure. 

1. Create a new View

Here's the view exported to a text file. Import it as a new view and you can skip to step 3. Otherwise, carry on...

  • Navigate to the Views page (/admin/structure/views/add) and create a new view (figure 1)drupal7-collapsible-archive1
  • Give the view a name and a description (optional). I called mine 'Collapsible Archive'.
  • Set your desired Show parameters. I went with 'Show Content of type All tagged with [empty] sorted by Newest first' since my archive is for blog articles.
  • Uncheck 'Create a page' and check 'Create a block'
  • Give the block a title and set 'Display format' to 'HTML list'
  • Leave 'Use a pager' unchecked and click 'Continue & edit'

Read more: Add a Blogger-like collapsible archive block to your Drupal 7 site

Add image thumbnails to the contacts category listing in Joomla 2.5

A commonly requested feature of the Joomla Contacts component is to be able to show the contact's photo in the category listing view. Here's a simple way to create a template override which adds a column to that table. I'll also show you how to make the thumbnails act as JCE MediaBox popups, should you happen to have it installed. Here's an example of what it all looks like.

First, copy the view template file from /components/com_contact/views/category/tmpl/default_items.php to /templates/<your_template>/html/com_contact/category/default_items.php. Then open it for editing.

Read more: Add image thumbnails to the contacts category listing in Joomla 2.5

Create a custom 404 page in Joomla 2.5

There are a number of forum discussions at on this topic, but none of them that I've seen cover the entire process in a simple manner. Here's what I do for a quick and easy custom 404. It's more or less what's here, but in simpler terms.

  1. Create a file named error.php and place it in your template's main directory (/templates/your_template/error.php). It should contain the following code:


    // no direct access
    defined( '_JEXEC' ) or die( 'Restricted access' );

    if ($this->error->getCode()==404) {
    echo file_get_contents('');


    Be sure and change the URL to reflect your site's domain.

    Read more: Create a custom 404 page in Joomla 2.5

iwa logo hwg logo    profile for isherwood on Stack Exchange, a network of free, community-driven Q&A sites