Add Images to vBA Site Navigation Module

[jellybean3350]

Hi.

Using:
vB 4.1.0
vBA CMPS 4.0.1

Coding knowledge: Some HTML and CSS. Nil PHP

This is my first post here, as I normally manage to find any help I need by Googling and searching forums. I've scoured vbulletin.com, vbadvanced.com, these forums, and Google. I'm just not finding a comprehensive solution. Maybe I fail at searching. :P

I simply want to put images in front of the links in my vBa Site Navigation module. Maybe the route I'm taking is outdated and there's an easier way (seems like there should be)? If so, by all means, please enlighten me!

I followed these instructions. Of course, I had to improvise, as they are for an older version of vBA. By doing so, I managed to add the Image fields in the ACP for Site Navigation editing as follows:





Specifically, I edited vba_cmps_adminfunctions.php as follows:

1. Replaced this:

PHP Code:

$inputs .= '<tr>
                                    <td><input class="bginput" name="' . $name . '[' . $pagecount . '][order]" value="' . $navlinks['order'] . '" size="2" tabindex="1" ' . $jsdefault_onchange . '/></td>
                                    <td><input class="bginput" name="' . $name . '[' . $pagecount . '][level]" value="' . $navlinks['level'] . '" size="2" tabindex="1" ' . $jsdefault_onchange . '/></td>
                                    <td><input class="bginput" name="' . $name . '[' . $pagecount . '][link]" value="' . $navlinks['link'] . '" size="26" tabindex="1" ' . $jsdefault_onchange . '/></td>
                                    <td><input class="bginput" name="' . $name . '[' . $pagecount . '][text]" value="' . htmlspecialchars($navlinks['text']) . '" size="18" tabindex="1" ' . $jsdefault_onchange . '/></td></tr>'; 


With this:

PHP Code:

$inputs .= '<tr>
                                    <td><input class="bginput" name="' . $name . '[' . $pagecount . '][order]" value="' . $navlinks['order'] . '" size="2" tabindex="1" ' . $jsdefault_onchange . '/></td>
                                    <td><input class="bginput" name="' . $name . '[' . $pagecount . '][level]" value="' . $navlinks['level'] . '" size="2" tabindex="1" ' . $jsdefault_onchange . '/></td>
                                    <td><input class="bginput" name="' . $name . '[' . $pagecount . '][link]" value="' . $navlinks['link'] . '" size="26" tabindex="1" ' . $jsdefault_onchange . '/></td>
                                    <td><input class="bginput" name="' . $name . '[' . $pagecount . '][image]" value="' . $navlinks['image'] . '" size="18" tabindex="1" ' . $jsdefault_onchange . '/></td>
<td><input class="bginput" name="' . $name . '[' . $pagecount . '][text]" value="' . htmlspecialchars($navlinks['text']) . '" size="18" tabindex="1" ' . $jsdefault_onchange . '/></td></tr>'; 


2. Replaced this:

PHP Code:

print_label_row($description, '
                            <table align="right" cellpadding="2" cellspacing="0" class="tborder">
                                <tr>
                                    <td class="thead">' . $vbphrase['order'] . '</td>
                                    <td class="thead">' . $vbphrase['level'] . '</td>
                                    <td class="thead">' . $vbphrase['link'] . '</td>
                                    <td class="thead">' . $vbphrase['text'] . '</td>
                                </tr> 


With this:

PHP Code:

print_label_row($description, '
                            <table align="right" cellpadding="2" cellspacing="0" class="tborder">
                                <tr>
                                    <td class="thead">' . $vbphrase['order'] . '</td>
                                    <td class="thead">' . $vbphrase['level'] . '</td>
                                    <td class="thead">' . $vbphrase['link'] . '</td>
                                    <td class="thead">' . $vbphrase['image'] . '</td>
                                    <td class="thead">' . $vbphrase['text'] . '</td>                                                       
                                   </tr> 


It's the last step of his instructions I'm having trouble with.

He states:

In adv_portal_navigationbits template find:

$navmark

Replace with:

<if condition="$navlinks[image]"><img src="$navlinks[image]"  alt="$title" align="middle" /><else />$navmark</if>

My adv_portal_navigationbits is as follows:

<div>{vb:raw navmark} <vb:if condition="$link"><a  href="{vb:raw link}"<vb:if condition="$native == 0">  target="_blank"</vb:if>{vb:raw title}</a><vb:else  />{vb:raw title}</vb:if></div>

Could someone please make his instructions work with my template so I can use my new Image fields, that is, if I'm even on the right track?

Currently, I have my img tags (using align and vspace for alignment adjustments) in the Text fields. I'm sure it's not the ideal way, as I'm getting the following undesirable effects (hover and click text decorations extending to images):



I posted in that thread using the same name I have here, but the forums don't seem to be nearly as active as they are here. Hoping I'll have a better chance of getting help here.

Apologies for the long post. I'm getting desperate!

Thanks!