Adding a Horizontal Submenu in Joomla’s JA Purity Template. [this post is outdated]

[Update: 2011 Sep 5: Very few people read this blog and yet I get a lot of hits on this post. It’s outdated, and wasn’t a good solution even when I wrote it. I’m only keeping it here as a record of things that I’ve written but please don’t waste any time following these instructions.]

[Update: 2010 Jun 6: Some of the folks hitting this post may be interested in my variation of ja_purity.]

The popular Joomla template JA Purity, which is included by default in new Joomla installations, has, theoretically, an easy-to-add suckerfish dropdown menu. But if you take a look at forums, you’ll see that a lot of people have trouble making it work.

Personally, I avoid dropdowns and other client side activity because I don’t trust that something that works fine on my laptop will work on other computers. I prefer letting the server do most of the work and trying real hard to limit the amount of work that has to be done. People developing in javascript or using cutting edge CSS really should have access to enough computers to test in Linux (or BSD), Windows, and Mac.

I also don’t like glitz, and I think dropdown menus are usually tacky.

For Virginia C.U.R.E.’s website, I added a bar under the horizontal menu.

[Update: 2010 Jun 6: At the request of the client, I added a drop-down menu to the website]

If you already have the horizontal menu working in JA Purity, and you understand enough php recognize a “block” of code, you should be able to add a submenubar below the horizontal menu as follows:

Open up index.php, which is in the ja-purity folder. There are two blocks of code which contain the word “hornav”. One block is around line 47 and the other is around line 145. My line numbers may be off because I’ve done some other messing around with my file. Copy each of these blocks and paste the copy right below. In the first copied block, replace “hornav” with “subhornav” and ja-sosdmenu.css with ja-sosdsubmenu.css. In the second copied block, replace “hornav” with “subhornav”, “mainnavwrap” with “subnavwrap”, and “mainnav” with “subnav”.

In your templateDetails.xml file, make a “subhornav” position line below the existing “hornav” position line.

Now, copy the file ja-sosdmenu.css to a new file called ja-sosdsubmenu.css. In ja-sosdsubmenu.css, look for all blocks with the word “sub” in them and delete them ( I don’t know if you have to do this, but you don’t need them and it might prevent some confusion later). Then do a global search and replace on the word “main” and replace it with the word “sub”. This is the css file that will control the way your submenu looks. In the block that starts with “#ja-subnav a {“, I changed “padding 10px 20px” to “padding 1px 20px”, and did the same in the block which starts with “#ja-subnav ul.menu li a {“. This made the submenubar thinner than the main menubar.

That’s all the coding that you need to do. The rest of the work is in the Joomla control panel.

Make a submenu for each menu item in your horizontal menu, even if that submenu only has one, blank menu item. You can use   for the title of the blank item, and the link can be to your home page. If you don’t have something there then the menu bar won’t display, and it doesn’t look good for the submenubar to appear and disappear as users click around.

For example, for the menu item About Virginia C.U.R.E. in the main horizontal menu, there is another menu called About Submenu, which contains items for Organizational Information, Chapters, and Board Members. For the Announcements, there is an Announcements submenu, which only contains one choice; the blank one.

For each new submenu, make a copy of the Main Menu module and associate the copy with the submenu. Edit the new module, and set the position of the module to “subhornav”. [Update (2010 April 11): travitzki linked to this post on a joomla forum but noted that you don’t need a new module for each submenu. ]

In the Menu Assignment section, choose the option labeled “Select Menu Item(s) from the List”, and select the appropriate menu items for which you want the particular submenu to appear. That will include the parent item from the main horizontal menu, and the siblings from the submenu. You have to keep up on this when you add new menu items.

That should do it. I only tested this on Virginia C.U.R.E.’s website, and I’ve done some other changes prior to this, so there may be some inconsistency between how this works on Virginia C.U.R.E.’s website and how it works on a new installation of JA Purity. If you comment about any trouble with this, I’ll try to help.

Living with CMS.

The first stage was denial. Virginia C.U.R.E., an organization for which I do some webwork, decided to redesign the website using Joomla, a content management system (CMS). A CMS is a website design and management system that uses pre-made modules and templates. I had fought this move because I didn’t want to loose the flexibility that I had writing my own code in PHP. But I also have to admit that the website, in it’s current state, is pretty boring. The design is flat, the colors bland, and the graphics, what little there are, are cheesy. Web designing isn’t my day-job. I make no money from it and don’t have the time, and admittedly don’t have the skills, to keep up on it as I should. Worst of all, Internet Explorer kept biting me in the ass. I hope you can pardon the my foulness, but appreciate the restraint it’s taking me to keep from surrounding the term “Internet Explorer” with streams of shockingly filthy and unpleasant language. I plan to describe my trials with IE in another post, but suffice to say, I often wrote perfectly good code that looked fine in every other browser, only to find that the website was completely messed up in one version or another of that abomination. If you come across a website that looks so awful or functions so poorly that you can’t understand how the designers could possibly post such a mess, chances are they designed the website to industry standards but haven’t gotten around to checking it on your particular version of IE. Or, maybe they designed it not in accordance with industry standards and wrote broken, improper code that looks fine in IE and doesn’t render properly in a standards-compliant browser like Firefox.

At any rate, thanks to the dogged advocacy of Joomla by Paul, the guy who hosts Virginia C.U.R.E.’s website on his server, the organization decided to make the switch. Currently, the webteam and I are working on a new version, which you can see here. Of course, these links will be outdated soon.

Having moved to acceptance, I decided to research CMS’s. The webserver of another site that I work on, The Hampton Roads chapter of the Coast Guard Chief Petty Officers Association, offered a different CMS, called Drupal. I decided to poke around with Drupal and ended up redesigning the Chief’s website.

Using a CMS can be confusing at first if you’ve been designing a website with code or even a wysiwyg editor. The folks who put together the back-end don’t necessary think along the same lines as you do, and a feature that might seem obvious to add may take several unintuitive steps with the CMS. For example, I currently have a table of “announcements”, which appear on the front page of the website, and disappear when an expiration date is reached. Joomla uses what they call “Articles” for such content. Articles can be used for various purposes, so you have to do some other clicking to designate where you want a particular article to to appear in the website. Drupal uses what they call “Pages” and “Stories” by default for to hold content.

You will loose a lot of your creative freedom at first but may be surprised at how much you can add back by learning the features of the CMS, by using add-ons, and by occasionally, and carefully, cracking open the pre-written templates and making some of your own changes to the code. To me, the biggest advantages to using a CMS are:

– Graphics, including little flourishes like rounded corners and nice borders, which would take me a lot of time to draw by myself and make a big difference in the website’s appearance.
– Compensating for IE bugs.
– Security. I often worry about making mistakes in my own password-protected applications, and I feel comfortable knowing that the sensitive portions of the website have been written by teams of designers, not just a hack with a laptop like me.

I’ve only been using Drupal and Joomla for a couple of weeks. They are very different. For coders, my initial take is that Drupal is the better choice if you’re a PHP/Mysql hacker and want to get under the hood of your new system quickly. Joomla is the better choice if you’re ready to do a lot of coding up front and are willing to navigate a complex array of inter-connected files.

If you want to do no coding at all, or very little, Joomla seems to be more complicated but offers more point-and-click features. I found Drupal easier to understand out of the box, but harder to customize without coding.

Both are free and open source.

Working on vacure.org

I’ve been busily working Virginia C.U.R.E’s website at http://www.vacure.org . I’ve posted a draft of the new website at http://www.suffolkian.com/vacure. Paul, who owns the server that hosts vacure.org, and also designs web pages, has been pushing for the organization to convert from my written designs to a CMS driven website. I want to stick with coding. Another option is for the organization to go with a pro. There are certain things you can do with a team of artists and designers that you can’t do by yourself with a laptop.

I’d be interested in feedback on the new design at http://www.suffolkian.com/vacure. If you visit, the links might be broken as I experiment and make changes.

Thanks.