The Coding Paparazzi

In this article, we see a method to display the navigation menu Joomla on two or more lines, using for this a template from Artisteer as the basic example:

Although illustrated with an Artisteer template, this method should also apply or be adapted very well for other types of template.
 

ADDENDUM dated January 6, 2010:

The HTML code described in this article uses the insertion of a block <div> within an area <span>.  Although this seems to work properly with both Firefox and Internet Explorer, further study has allowed me to conclude that a better approach would be to use another <span> instead of the <div> but by attaching to it the style "display: inline-block".  This second method will be the object of an upcoming article.

Yes, after much procrastination, I finally decided to start my first blog and for my very first article, I chose a recurring problem among users of Joomla and Artisteer: how to get a title in the Menu navigation to appear on more than a single line. As this is my very first blog, you'll excuse me if you find that throughout this article the writing and the formating are less than stellar.

The following figure show us the starting point, with an expansion of the tab we are interested in below:

And this is the result that we want to obtain:

Notice that the menu title "Sylvain Lafontaine.com" is now written on two lines in height and is well centered in the middle of the tab. Although it may seem at first glance easy to accomplish, the solution to this problem is more complicated than it seems. The first thing that most people will probably try to do would be to simply add the XHTML tag "<br/>" (or its HTML equivalent  "<br>") directly in the middle of the title of the menu in the Joomla configuration:

Detail for the title:

Unfortunately, the result that we get is not what we were expecting:

Instead of causing a line break, the <br /> tag is simply displayed in the browser! That would have worked with Joomla 1.0 but for Joomla 1.5, the HTML tags are no longer interpreted by Joomla and instead are rendered as such in the browser; hence the visible display of the <br /> tag in the above figure. Note that we would have obtained exactly the same result here even if we would have used the HTML tag <br> instead of the XHTML tag <br />.

To solve this problem of displaying the tag with Joomla, we must use a Joomla plugin that will allow us to directly insert the tag <br> into the HTML code created by Joomla.  The plugin that I'm suggesting is yvBBCode but you'll get the same result if you use any other plugin. This plugin allows us to replace BB codes with our own HTML markup. BB codes are special codes enclosed in square brackets [] - like [br] for example - that we can insert into any Joomla text  and that will get converted into HTML markup by the yvBBCode pluging when the page is served by the web server (Joomla). For example, the code "[br]" will be transformed into "<br />" (less the quotes).

Moreover, with the yvBBCode plugin, we can define our own BB codes - allowing us to display any HTML code that we want - but unfortunately, we cannot define them directly from the Joomla admin interface and instead, we must change the source code of the yvBBCode plugin. We shall see later how to perform this change. The most recent version of yvBBCode already contains the BB code required for inserting the tag <br/>, so that when we are finished installing the yvBBCode plugin on the Joomla site, we can directly try to change the title to introduce the tag <br> into the output of the HTML markup, using this time the code [br] in order to bypass the mechanism used by Joomla that prevents us to insert any HTML tags directly into the HTML markup for the page:

which gives us the following result:

The solution seems to be determined to be delayed. This time, one gets a newline but only the first line is visible. Furthermore, this title does not seem to be centered horizontally.

There are several things to identify here. The first is that the menus in the templates of Artisteer are of a fixed height, so the first thing to do is to increase the height of tabs in the template Artisteer. This operation is relatively easy to perform and gives us the following result:

What happened here? There are two problems. The first is the height of lines of text in the menu as defined by Artisteer. In order to center vertically the line of text, Artisteer assigns a high value for the line-height property - here it has been set to 47px but the value for your own template might be different - as we can see from the following CSS snippet:

To better understand the following explanation, we have to mention here that the HTML produced by Artisteer to produce the menu is a "no table" or "tableless" type; which means that the "table" tag is not used for displaying the horizontal strip of tabs.  Instead, the template generates a list of <li> tags, each one containing a single tab from the menu. In order to produce the graph rounded button with the text at the center, these tags contain a list of <span> tags: one for the left side of the button (class = "l"), one for the right side (class = "r") and finally one to contain the title text itself (class = "t"):

By taking advantage of the fact that Joomla has added the ID of each menu as a class to each <li> tag of the menu (here the "item47", see below), we can introduce the following CSS style to make a quick test:

Ah! Finally, we can see now that we are approaching the goal:

We see that the two lines of the title are now visible but they are not well centered. This is because the tags <span> - used to display text - are not HTML blocks like the tag  <div> and therefore they can not be centered. It's more easy to see the phenomenon if we complete the first line by adding the text "blablabla" at its end: the first line finish at the right margin of the enclosing block while the second line begin at the left margin:

So there is absolutely no effect of centering here inside the <span> tag when more than a single line is displayed.  The solution is to introduce a <div> block directly inside the <span>...</span> if we want to center the title when it's written on more than a single line. This <div> block can easily be added using the same technique as before for the <br> tag by using again the yvBBCode plugin.  However, this time, the <div> tag is not part of the standard list of BB codes offered by the yvBBCode plugin, so we must first add it to the list.

To do this we must change the file Extended.php that you'll find in the directory .\www\plugins\system\yvbbcode\BBCodeParser\Filter if you change the installation Zip file of the plugin directly or in the directory .\plugins\system\yvbbcode\BBCodeParser\Filter of your Joomla installation if you want to edit the file after the installation.

The piece of code below highlighted below in yellow is what you need to add in the HTML_BBCodeParser_Filter function of the HTML_BBCodeParser_Filter_Extended class that you'll find in the file.  You must also be careful to add a comma at the end of the previous code as it is shown below in red.  Notice that with some older versions of the yvBBCode plugin, the [br] code is also absent, so you must add it too. Simply use the same code as below for 'br'.

We then add the following CSS style template for Internet Explore (for FireFox, see the proper CSS code at the end of this article) to format the <div> tag:

Finally, we can now use our new BB code to enclose our title menu in a <div>...</div> block and with an embedded line break so that our title will now be correctly displayed on two lines:

with the final result:

One can see that the title now appears correctly on two lines, is well centered but horizontally and vertically and that the other tabs remain unchanged.

One last word before finishing. In the case of Firefox, the code above does not work directly as is. This is because Firefox will introduce a line break before the start of the display of the <div> block nested inside the < span> with the effect that the title will now be positioned below the tab and will most likely invisible. To correct this, just put a CSS code specific to Firefox which will raise the text.  Here, this can be done easily by simply replacing the "top: 8px;" with a "top: -38px;" for Firefox.