April 2nd, 2010 by J

This is very helpful post provided by the Awareness engine and it saved me hours of stress when it comes to the Joomla Menu system.

Thanks.

1
2
3
4
5
6
7
8
9
10

<div class="moduletable"> _menu suffix applied to default menu that includes homepage
  <ul class="menu">
    <li class="parent active item299"><a href="#"><span>Design</span></a>
      <ul>
        <li class="active item313" id="current"><a href="#"><span>3D</span></a></li>
        <li class="item304"><a href="#"><span>File/Media Types</span></a></li>
      </ul>
    </li>
  </ul>
</div>

The Design menu example is formatted via administration, as below. Normally, all items are listed straight down without being sub-items, however, this is List formatting and because the default .moduletable <h3> heading CAN’T be styled as ‘active’, this is why you would use this structure. See this article for creating custom module styles.

Fig. 1.

The CSS definitions applied to the <li> items depending on their state are as follows:

#menu CSS ID is applied to the first main <ul> only
#current CSS ID applied to <li> for the current item
.active CSS Class applied to <li> for the current item
.parent CSS Class applied to <li> if child links exist
.item[ItemID] class applied to the <li>

Where ID is termed below, this refers to CSS ID and not Joomla menu item ID’s.
From the above rules, different definitions are applied to li items below the main #menu ID, which makes for exact state styling (and potentially very mind-numbing), as opposed to the older mainlevel style used in Legacy formats, which was limited to two-levels main and sub level, and sub level couldn’t be styled as singularly active. With Lists, you can achieve this.

As CSS is cascading one thing to be considered is the structure of your menu’s and how many levels you’re going to use. With unordered lists you can have as many levels as required, though you wouldn’t sensibly style more than three to four levels below the #menu ID. Additionally, the rules you define for ul and li items at the top of the structure from the second level on, will affect lower ul and li items unless you override those definitions with new ones.

For each li item that has a child element, a new ul is created with child li element(s). For example, if we had a menu structure that was three levels deep, the HTML structure would be similar to:

<div>
<ul> LEVEL ONE
<li><a href=”#”><span>Design</span></a>
<ul> LEVEL TWO
<li id=”current”><a href=”#”><span>3D</span></a></li>
<li><a href=”#”><span>File/Media Types</span</a></li>
<ul> LEVEL THREE
<li><a href=”#”><span>Online Proofing</span></a></li>
<li><a href=”#”><span>Portfolio</span></a></li>
</ul>
<li><a href=”#”><span>Printing</span></a></li>
<li><a href=”#”><span>Creative Articles</span></a></li>
</ul>
</li>
</ul>
</div>

For CSS styling purposes, it’s better to forget about the possible states at the beginning and concentrate on the hierarchy, as follows:

1. Define any CSS ID areas in your template for your navigational menus, in this example this will be #navleft.
2. Define, if any, the styling of the module wrapper .moduletable.
   
3. Define, the first #menu ul ID. In the Design menu above, this is the styling of the Design text and background image #navleft .moduletable ul.menu. You can leave out .moduletable if desired here, or if using a CSS suffix applied in the module parameters, leave off #navleft and style something like .moduletablemysuffix ul.menu.

Okay, firstly we’re going to think about the Unordered Lists and remove all default bullets and padding. This will affect all <ul> tags within #navleft:

1
2
3
4

#navleft ul {
    list-style-type: none;
    padding-left: 0;
}

Next, you want to define any spacing, text styling values for subsequent <ul> tags, drilling down the hierarchy as many times as you need to:

1
2
3
4
5
6

#navleft ul ul {
    padding-left: 18px;
}
#navleft ul ul ul {
    padding-left: 10px;
}

You can also do the <li> tags in the same way: #navleft li, #navleft li li. YOU DON’T HAVE TO INCLUDE ALL THE UL AND OTHER CSS PREFIXES BEFORE THEM! This is only useful for spacing and the like where states such as active and parent don’t count.

The Levels

Fig. 2.

Level One

Now to think about styling the top menu item, see Fig. 2. In our List navigation menus, there’s actually three possible states and they should be defined with active and inactive before hovered:

1. Active.
   #navleft ul li.active a:link, #navleft ul li.active a:visited { }
2. Inactive.
   #navleft ul li a:link, #navleft ul li a:visited { }
3. Hovered.
   #navleft ul li a:hover, #navleft ul li a:focus { }

Level Two

Next are the second level items or sub-level items, again 3 states with essentially just ul li and ul li.active added to the above:

1. Active.
   #navleft ul li.active ul li.active a:link, #navleft ul li.active ul li.active a:visited { }
2. Inactive.
   #navleft ul li.active ul li a:link, #navleft ul li ul li a:link, #navleft ul li.active ul li a:visited, #navleft ul li ul li a:visited
3. Hovered.
   #navleft ul li.active ul li a:hover, #navleft ul li ul li a:hover, #navleft ul li.active ul li a:focus, #navleft ul li.active ul li a:focus

Level Three

Next are the third level items or sub-level items, again 3 states with essentially just ul li and ul li.active added to the above:

1. Active.
   #navleft ul li.active ul li.active ul li.active a:link,#navleft ul li.active ul li.active ul li.active a:visited { }
2. Inactive.
   #navleft ul li.active ul li.active li a:link,#navleft ul li ul li li a:link,#navleft ul li.active ul li.active li a:visited,#navleft ul li ul li li a:visited
3. Hovered.
   #navleft ul li.active ul li.active li a:hover,#navleft ul li ul li li a:hover,#navleft ul li.active ul li.active li a:focus,#navleft ul li ul li li a:focus

Rather than show the CSS definitions for each level, I’ve included the CSS file for this design, which reminds me to mention to create a unique CSS file for menu styling.

Active / Parent States

You’ll see from Fig. 2 above that I’ve styled a little down and up arrow depending on whether the parent item is active. You can achieve this with the following CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13

#navleft ul li.active ul li.parent span {
    background-image: url(../images/downarrow.gif);
    background-position: right center;
    padding-right: 12px;
    background-attachment: scroll;
    background-repeat: no-repeat;
}
#navleft ul li.active ul li.parent.active span {
    background-image: url(../images/uparrow.gif);
    background-position: right center;
    padding-right: 12px;
    background-attachment: scroll;
    background-repeat: no-repeat;

March 17th, 2010 by J

A useful peice of info discoverd on Spiral Scripts.

Thanks

Occasionally there are problems: these are nearly always due to mistakes in the image path and file name, which mean that the module cannot read the image file in order to resize it.

The things to check are:

• You are using relative rather than absolute urls, eg images/stories/image001.jpg,NOT http://www.mysite.com/images/stories/image001.jpg.The module can often handle absolute URLS, but relative URLS are much less likely to lead to problems.

• Remember that file names are usually case sensitive, so check whether you are using image001.jpg or image001.JPG for example. These are not the same, and using the wrong one will mean that the image will not display.

• Don’t have spaces in an image file name.  If there are spaces it is not a valid URL, it can cause problems reading the image file, and you will need to replace the spaces with another character such as ‘-’. This is what Google recommend, they interpret this as a space. The confusion comes about because the Joomla editor will upload images with spaces in the name, and link to them by replacing the space character with ‘%20′. This is not good from a search optimization point of view though, because it is not a valid URL.

• Make sure that you have not put any leading or trailing spaces by accident in your image tags, for example if you use the html code <img src=”/images/stories/image001.jpg ” /> that will cause problems because there is a trailing space.

These are all good practice anyway, so it helps to get used to doing things this way. The confusion arises because image URLS are a lot more forgiving of mistakes than file names, which have to be exact, so an image may display correctly in an html page even if there are mistakes. However these mistakes will make it impossible for the image file to be read by the module.

Other reasons why there might be problems:

• You have an article read-more link before the image. In that case the image will not display because it needs to be in the intro part of the article in order to be detected, so you need to make sure it is in the intro part of the article.

• Your server does not support the GD graphics module. In that case you will not be able to use GD for image resizing, so you need to disable that parameter in the module admin.

• The file permissions are incorrect on the script which resizes the image thumbnails. This script is called resize.php and is in the module assets folder. Usually this script will run with permissions set to 644. Occasionally, depending on your PHP configuration, this may need to be set to 755.

March 11th, 2010 by J

This is a very useful post i discoverd on the Joomla forum while on the hunt.

Thanks to all the guys at the Joomla Forum.

This document will lead you through the process of using the Joomla! 1.5 Random Image module to display a different random image, from a specific directory on each page load.
The following is a step by step guide that will lead you through the process:

1. Install Joomla! 1.5, install the sample data and set up your administrator account details as you will need these later.

2. The Random Image module is installed with the default Joomla! template. So it is not necessary to install the module separately.

3. Browse to the index of your new Joomla! Installation and log in to the administrator area of your Joomla! installation using the administrator link on the menu to the left hand side of the page. Use the details you set up you used earlier to set up your administrator account.

4. Select “Module Manager” from the “Extensions” drop down box on the menu towards the top of the page.

5. Click on the “Random Image” module from the list of modules. You may have to browse to the second page of modules to see this depending how many modules you have Joomla! set to list per page.

6. The Random Image module allows you to show a different random image, from a directory of images, on each page load. You can choose which pages on the site you wish the random image module to appear on using “Menu Assignment” options. For the purpose of this guide we want the random images to appear on each page. So, find the “Menus” set of radio buttons and click the one labeled “All”.

7. You can configure the parameters of the module in the “Module Parameters” section. Make sure “Image Type” is set to “jpg”. For example, set “Image Folder” to “images/stories/food” and set “Link” to “http://www.joomla.org”. Finally, set “Width (px)” and “Height (px)” to “100”. This will ensure all the images are displayed at the same size, 100 pixels in both height and width. The link can be internal or external to the site.

8. Select “Save” from the top right menu to save your changes to the module.

9. Now click the “Preview” link on the top right of the screen and you will return to the index page of your Joomla! installation. At the right of the page you will see the random image area. In this area you will see pictures of food from the joomla sample images provided, scaled to 100px in both dimensions. If you click on the image you will be taken to the Joomla! homepage. Finally, refresh the page and you will see that the image changes.

Congratulations. You have now successfully learned how to use the Random Image module of your Joomla! 1.5 installation.

March 5th, 2010 by J

This was pulled out of the Developer Manual after i spent a little while swearing.

When you want to modify a part of your Shop (that can’t be changed in its layout using the Joomla template’s CSS), you must know, which file you have to modify, to create the layout you want.

To quickly find the file, which produces the HTML output you’re seeing, you can enable the DEBUG mode

• “Admin” / “Configuration” / “Path & URL” / check “DEBUG?” and save.

After having done that, you will see blue info icons all over the Shop, which show the file name of the included file on mouseover.

The most changed files are

February 28th, 2010 by J

How to go about removing “Recently Viewed Products” from Joomla 1.5.3 and VirtueMart 1.1.0 (seems to work on V1.1.4 as well)

If you want to remove this, just head to:

Admin -> Configuration -> Site -> Layout & click “Config”
Then just change the “Number of recent products to Display?” to 0