1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
    Dismiss Notice
  3. This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

How to add images to your quick links menu

Discussion in 'Template Modifications [Archive]' started by ibaker, Nov 17, 2011.

  1. ibaker

    ibaker Well-Known Member

    Here is a little tip if you want to add icons/images to the top of your drop down boxes of your menu items.


    There are 2 parts to this...1 being next to the title at the top of the menu drop down, as shown in the attached image, for the XF menu items, and 2 being for any addons that use their own menu tab.

    NOTE: Where it says YOUR ICON.png in the following, replace this with the file name of the icon you wish to use for that menu item.

    Step 1 - In your "navigation" template you will find the headings that are used in the drop down of each menu tab...they are all enclosed in h3 tags...for example the forums tab has:
    Simply add the following image link
    <img src="styles/icons/YOUR ICON.png" alt="" /> 
    after the h3 opening tag of each one but NOT the blocks that have "<-- extra tabs -->" above them...they are used in step 2. Your forums h3 line for example should now look like:
    <h3><img src="styles/icons/YOUR ICON.png" alt="" /> {$tabs.forums.title}</h3>
    Step 2 - Now for the addons that use the "extra tabs" home, middle and end components of the navigation template...these are the blocks that begin with "<-- extra tabs -->".

    Again, like step 1 above, add an image link into the h3 tag of each of the "extra tabs" blocks...there is home, middle and end...but this time use this image link code instead:
    <img src="{$extraTab.img}" alt="" /> 
    so it looks like:
    <h3><img src="{$extraTab.img}" alt="" /> {$extraTab.title}</h3>
    Step 3 - The final step is to also edit each menu tab listener file (sounds harder then it really is). You will need to add an img varaible to the menu tab "listener" of each addon that uses its own menu tab. These are generally found in the addon folder that you placed in the /library directory when you installed the addon. For example if you have installed the addon EWRmedio, Jaxels media addon, find the NavTabs.php file which is located in the /library/EWRmedio/Listener directory. The file will contain a section that looks like this:
    'title' => new XenForo_Phrase('media'),
    'href' => XenForo_Link::buildPublicLink('full:media'),
    'position' => 'end',
    'linksTemplate' => 'EWRmedio_Navtabs',
    'perms' => $perms,
    Above the line that start with 'title' add the following:
    'img' => 'styles/icons/YOUR ICON.png',
    Do the same for each addon listener file that uses its own menu tab...simply add the img line above the title line in each one...don't forget to ensure the comma is at the end of the line as shown. All it is doing is adding an img variable to each of the addons tabs...it's very simple.

    Hope someone finds this useful in sprucing up their site a little

    NOTE: Previously whatever I posted was copied by a competing site. So I post this in the hope that it does help others but on the condition that anything that I post is not allowed to be used by Glenn Inwood of Cowra NSW Australia or anyone associated with him.
  2. kkm323

    kkm323 Well-Known Member

    Thanks for sharing

Share This Page