A variation of joomlart’s ja_purity template with resizable header and horizontal submenu

Update 2010 July 6: I’m still getting a few hits on this and I apologize to everyone who may have gotten headaches trying to make this work. This procedure provided a good solution for me at the time but there are much easier ways to achieve the dropdown menu, which can be found in the joomla documentation.

All below is from the original post.

I made a template which is basically a copy of ja_purity with a modified header and support for the submenu which I described in earlier posts. I’m still new at this so I’m sure there will be some problems and I want to hear about them so, please tell me.

Download bnmng_ja_purity_1_0.zip

In addition to standard ja_purity features:
Header images can be of a different size than the original images.
Entire header can be resized to match taller or shorter header images.
Mask can turned on or off on left and right side independently.
Logo text can be displayed with logo image.
Horizontal Submenu’s can be added by creating the menus. You don’t have to alter the index or css.

Notes:
I removed some of the choices for the template width.
You should know the height and width of your header and logo images

To install, put the bnmng_ja_purity folder in your templates directory, than put the language files (not the folders that they are in) in the appropriate folder. The name of the folder that the zipped language files are in tells you where they should go.

To create horizontal submenus, create a new Joomla menu to represent each submenu. Using module manager, set the position of each horizontal submenu to “subhornav” and set the menu assignment for each to display when the appropriate menu item from the parent horizontal menu is selected. Remember that the horizontal submenus are actually individual menus.

The ja_purity template on which I based my version was made by joomlart.

Strange Spam

Someone, or something, made a comment on my main blog, “You have done it again. Incredible read.”. And I have to admit, I was pretty happy about it for a bit. But the commenter’s link went to a blogspot blog, which had one post full of gibberish. Obviously I’ve been spammed, but what was the point? I don’t think I picked up a virus or malware by visiting a blog. But maybe I did. At any rate, I decided to Google “You have done it again. Incredible read”, and found the comment on one other blog. The comment was made with a different name than my commenter’s name, and linked to a different blog, but it was also a blogspot blog with one post full of gibberish. This morning, Google picked up two more blogs with the same comment, linking to two other blogspot blogs with one post full of gibberish. I’m not going to link this post to any of them, you can use Google yourself if you’re that interested. But I don’t know what’s going on, so be careful.

Dropdown menus in ja_purity

On my post about the submenu bar, I had a question about dropdown menus, but at the time I couldn’t answer.

I most cases, getting dropdown menus to work should be pretty easy, although there are a lot of posts on various forums from people having difficulty. The reason I was having trouble getting it to work earlier was I had modified my css files for other reasons, and accidentally wiped out important parameters.

The instructions for making the dropdown menus work in ja_purity are in various places, including a post on Learn Web Design Online.com . But if you read that post and are still lost, you may have to back up and learn how to make the sub-menus in the first place. Those instructions are at Joomla’s documentation site.

Having the dropdown menus along with the submenu bar means maintaining two separate sets of submenus. I don’t see any way to link them automatically. One set of submenus are the dropdowns, which you create by the instructions that I mentioned in the previous paragraph, and one set of submenus are the menus that appear in the sub-menu bar, which you create in accordance with my post (linked in the first paragraph). Any changes you make have to made in both.

Wireless with Dell E1505 and Ubuntu 9.10

I use a Dell Inspiron E1505 with a Broadcom BCM4311 wireless card. Before I upgraded to Ubuntu 9.10, I was using ndiswrapper and connecting with a script that I adapted from the popular wirelessfix.sh script. I did not use Gnome’s NetworkManager; in fact, I couldn’t get it to work with my configuration. I like using the command line to control my computer, but when I tried to connect to a wireless network that required a passphrase, I was unable to figure it out.

I upgraded to 9.10 (Karmic Koala) just a couple of days ago. Upgrade might be the wrong word. I partitioned my hard disk, installed Ubuntu 9.10 from a CD which I got from a paper copy of Linux Pro, then copied what I needed and deleted the old Ubuntu. The installation went smoothly. After installation, I found these instructions, which seemed too easy to be true considering some of the other advice for wireless that is currently on the web. In fact it was even easier. I was able to load bcmwl-kernel-source from the CD using Synaptic Package Manager, and the other files installed as dependencies. I did not have to install ndiswrapper.

Now my wireless connections are handled with ease, and network manager even displays a dialog when a passphrase is called for. I’m a little sad about relinquishing control to an automatic system, but it works well.

This, along with some other improvements, makes 9.10 a very good upgrade.
.

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.

Firefox Remembers Zoom Setting (even if you forgot)

I have a copy of a joomla-based website on my laptop, so I can mess around with it off-line, and I was getting frustrated because the font on my laptop copy was larger than the live version. I re-downloaded the css files, checked various config parameters and basically did everything I could to make sure my laptop had a true copy of the live version, and still, the fonts on my laptop copy were bigger than the live version. I even deleted my cookies.

As it turned out, it wasn’t the website, it was Firefox. I had, apparently, used Firefox’s zoom feature once to enlarge the font; and Firefox remembered, not just the page, but the server on which I had zoomed the font. In this case, the server was my local copy.

I hate when software does things for me without telling me. It’s so Microsoft.

Anyway, here’s an article about disabling this feature: http://www.mydigitallife.info/2008/07/03/disable-firefox-domain-sticky-zoom-to-reset-zoom-level-on-re-visit.

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.

Disabling Firebug fixed the Twitter Problem

As I said in my original post about this problem, I don’t use Twitter much. And I pretty much gave up trying to fix my Firefox/Twitter problem until I got a note that a friend was following me (not much to follow; I hadn’t tweeted in months). I looked into it again and I found that the tool I was using to figure the problem out was causing the problem in the first place. Or at least part of the problem. I think that Twitter uses some bad javascript but that it goes unnoticed unless Firebug is enabled, and for some reason Firebug not only reports the problem but causes further problems. I don’t really know what’s going on. All I know is disabling Firebug works for me.

I still can’t figure out why I haven’t found more information on this problem. It would seem that David and I are the only two people in the world who use Twitter and Firefox with Firebug enabled (and I’m only assuming that David does have Firebug enabled. He might have a completely different problem). Maybe others use Firebug and Twitter with no problems, and there’s something else on my system that was a factor.