Adding icons to the service menu on top right

Hi,

I would like to change the items on the top right to be icons, like Profile, Account, Join....

I searched through the code, and those items are stored in sys_menu_service table. In this table there is in Icon column, but seems not used by BxBaseMenuSimple.getItems().

I am missing something, how is the proper way to have a clickable icon there?

Thanks.

This is the way I did it on my site:

http://www.boonex.com/forums/topic/Change-Join-Login-to-icons.htm

However, if you have more than one language I believe you will need to have the name of the icon for each language.

You can look in the market to see if there is something to help with this; there was a module but it is not currently available.

Easy way: 

File /templates/base/scripts/BxBaseMenuSimple.php:

Line around 57....62:

$aTmplVars[] = array(
       'caption' => _t($aItem['Caption']),
       'link' => $aItem['Script'] ? 'javascript:void(0)' : $this->oPermalinks->permalink($aItem['Link']),
       'script' => $aItem['Script'] ? 'onclick="' . $aItem['Script'] . '"' : null,
       'target' => $aItem['Target'] ? 'target="_blank"' : null, // <<- add comma 
       'menuicon' => $aItem['Icon'].'"> // <<- add this line
                );

File /templates/base/extra_service_menu.html:

Line 4:

 <a class="sys-sm-link" href="__link__" __script__ __target__><img src="__menuicon__" class="yourclass"> __caption__</a>

Then set icons in your database and some css class to your new img tag.

 Once upon a time I saw arabic filenames :)

I only have one language set up on my site; so I did it with the template.

<div class="sys-service-menu bx-def-margin-sec-left bx-def-font-large">
    <bx_repeat:items>
        <span>
            <a class="sys-sm-link" href="__link__" __script__ __target__><img src="http://mysite.com/media/images/__caption__.png"/> </a>
        </span>
    </bx_repeat:items>
</div>

This creates a standard image link with standard html.  You have an image that is wrapped in an anchor tag.  When the template parser parses the template, it will replace __caption__ with the actual text stored in the menu.  For the profile link, it becomes <img src="http://mysite.com/image_location/profile.png"/> </a>

I also set up some CSS so that I have rollover and the Icon changes to a second one; making the icon "light up" when you move the mouse over it.

Dean had a nice module but he pulled it from the market; have no idea why, nothing was mentioned on the support forum for it.

Hmm. Your right. I didn't. Well it's been done now.

Many thanks! It works. One related question. I see the profile image is always present in that service menu, but it's not in the configuration options, nor in the extra_service_menu.html. Where is that defined? I would like to change the order of that icon and place it after some other links.

The profile thumb is inserted by code in the script templates\base\scripts\BxBaseMenuService.php and does so by passing the menu content and the thumb as two items to the template extra_sm_thumbnail.html

So this is not going to help you much. You can change the template to position the thumb after the menu content or before it as it is now. But placing it in between menu items will require far more advanced code changes to the getItems function in the BxDolMenuService.php class and will not be easy to do.

Personally I thought the "avatar" "profile thumb" in the service menu to be redundant and removed it from my site.  The user knows they are logged in by seeing the menu change as well as the member menu and the thumb is on the submenu bar etc.  Why present that to members when they log in; it really does not serve much use to the member and is just clutter.