Mini Mods - Icons for UserCP Navigation 1.2

Icons for UserCP Navigation 1.2.2

This mod adds a pretty group of icons (Silk Icons) to your usercp navigation bar items.

Example Collapsed:



Example Expanded:



Install Instructions:

Installation for White Styles (Like vB Default Style)
1. Upload the "usercp_icons" folder into your current style images/misc dir.
2. Import product-iconsusercp.xml in the Product Manager.
3. That's all

Installation for Dark Styles (PNG Icons with Transparency)
1. Upload the "usercp_icons_png" folder into your current style images/misc dir.
2. Import product-iconsusercp-png.xml in the Product Manager.
3. That's all

IMPORTANT: These PNG icons will not display correctly if you're using Internet Explorer 5.5 or 6. For fix this transparency issue check this mod by Oblivion Knight:

? PNG Transparency for Internet Explorer:
https://vborg.vbsupport.ru/showthread.php?t=94416

Version History:

1.1:
- Added automatic template insertion.
- Fixed compability width with vBulletin Project Tools Item.
- Fixed compability width with vBulletin Blog Item.

1.2:
- Added collapsable option to items.
- Private Messages Item modified, no menu.
- Subscriptions Item modified, no menu.

1.2.1:
- Minor changes in shell template (missing &nbsp.
- Added blank html file in the icons dir.

1.2.2:
- Added PNG icons for Dark Styles. (Thanks to hcmagix for the idea).
- Added version checking.

?Tested on vBulletin 3.7.1!

[nascartr]

Originally Posted by Hugo Holbling

I've attached my usercp_shell template, which I edited similarly to this modification. It works for 3.8.0, tested today. You obviously need to have most of the famfamfam silk icons in a usercp_icons folder in images/misc for it to work and you may prefer to change the icons I chose for others.

I've done this with all my drop-down menus (see the attachments for an idea of what I mean), choosing icons I thought give an idea of what each option links to.

Do you mind sharing how you edited your drop down menus to show icons? Thanks!

[VargTimmen]

Could you fix it, that items, which aren't supported are still shown?

[Hugo Holbling]

Originally Posted by nascartr

Do you mind sharing how you edited your drop down menus to show icons? Thanks!

Sure. The basic idea is to just add this code to every vbmenu_option you want to show an icon:

<img src="$stylevar[imgdir_misc]/usercp_icons/**image_goes_here**.png">&nbsp;

... where your image selection replaces "**image_goes_here**", obviously. For example, if you want to edit the Quick Links menu then edit the navbar template. The first item in the menu is "Today's Posts".

Find:

<if condition="$vboptions['enablesearches']"><tr><td class="vbmenu_option"><a href="search.php?$session[sessionurl]do=getdaily">$vbphrase[todays_posts]</a></td></tr></if>

Replace with:

<if condition="$vboptions['enablesearches']"><tr><td class="vbmenu_option"><img src="$stylevar[imgdir_misc]/usercp_icons/page_white_copy.png">&nbsp;<a href="search.php?$session[sessionurl]do=getdaily">$vbphrase[todays_posts]</a></td></tr></if>

The bolded part is what was added and it has "page_white_copy.png" because that's the famfamfam silk icon I chose to represent "Today's Posts"; you might want to use something else. Obviously each of the icons you use has to be uploaded to images/misc/usercp_icons.

You repeat this for each instance and you can do this for literally every drop-down menu option, which is what I have for all of my navbar and for every other drop-down. I've attached an image of my search and PM drop-downs as other examples. It might be overkill for other people but I like how it looks.

One thing to note is that if you have any modifications that automatically insert menu options on your navbar or in the Quick Links menu then you need to add the icon code to those also. For example, if you have vB Blog and you opt for a link in your navbar, this is the blog_navbar_link template:

<tr>
	<td class="thead">$vbphrase[search_blogs]</td>
</tr>
<tr>
	<td class="vbmenu_option" title="nohilite">
		<form action="blog_search.php?$session[sessionurl]do=dosearch" method="post">
			<input type="hidden" name="s" value="$session[sessionhash]" />
			<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
			<input type="hidden" name="do" value="dosearch" />
			<input type="hidden" name="quicksearch" value="1" />
			<div><input type="text" class="bginput" name="text" size="25" tabindex="2003" /><input type="submit" class="button" value="$vbphrase[go]" tabindex="2004" /></div>
		</form>
	</td>
</tr>
<if condition="$vboptions[vbblog_tagging]">
<tr>
	<td class="vbmenu_option"><a href="blog_tag.php$session[sessionurl_q]" rel="nofollow">$vbphrase[tag_search]</a></td>
</tr>
</if>
<tr>
	<td class="vbmenu_option"><a href="blog_search.php?$session[sessionhash]do=search">$vbphrase[advanced_search]</a></td>
</tr>

You can then add the icon code in two places so it then looks something like this:

<tr>
	<td class="thead">$vbphrase[search_blogs]</td>
</tr>
<tr>
	<td class="vbmenu_option" title="nohilite">
		<form action="blog_search.php?$session[sessionurl]do=dosearch" method="post">
			<input type="hidden" name="s" value="$session[sessionhash]" />
			<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
			<input type="hidden" name="do" value="dosearch" />
			<input type="hidden" name="quicksearch" value="1" />
			<div><input type="text" class="bginput" name="text" size="25" tabindex="2003" /><input type="submit" class="button" value="$vbphrase[go]" tabindex="2004" /></div>
		</form>
	</td>
</tr>
<if condition="$vboptions[vbblog_tagging]">
<tr>
	<td class="vbmenu_option"><img src="$stylevar[imgdir_misc]/usercp_icons/tag.png">&nbsp;<a href="blog_tag.php$session[sessionurl_q]" rel="nofollow">$vbphrase[tag_search]</a></td>
</tr>
</if>
<tr>
	<td class="vbmenu_option"><img src="$stylevar[imgdir_misc]/usercp_icons/cog.png">&nbsp;<a href="blog_search.php?$session[sessionhash]do=search">$vbphrase[advanced_search]</a></td>
</tr>

Again, the bold part is what I added and you may prefer to use different icons.

If it would help, maybe I can put together all my edits and release them here or separately. I don't make any pretense of this code being good or optimal; it just works for me on a small forum.

[nascartr]

Thanks Hugo, I figured it out from that! http://diecastcrazy.com

[Hugo Holbling]

Nice job - looks great. :up:

[Bawtneez]

Installed. Thanks =]

[AcidX]

Waiting for a 3.8 version...

[Hugo Holbling]

There's a 3.8 version in my post no.229; you can change the icons as you see fit using the instructions I gave above.

Edit: I've attached the icons I use, along with an edited version of demgel's product file for vB 3.8.0; hopefully this will work. (Mods, please remove this if demgel objects.) There are more icons in the zip file than you need because when I get some time I'll try to add the template edits I use to add icons to all menus.

[AcidX]

Originally Posted by Hugo Holbling

There's a 3.8 version in my post no.229; you can change the icons as you see fit using the instructions I gave above.

Edit: I've attached the icons I use, along with an edited version of demgel's product file for vB 3.8.0; hopefully this will work. (Mods, please remove this if demgel objects.) There are more icons in the zip file than you need because when I get some time I'll try to add the template edits I use to add icons to all menus.

Works perfectly!

It would be great if you (or the mod's owner) could post it in vBulletin's 3.8 add-ons forum.

For all those who were waiting for the 3.8 version, go ahead, install it.

[Chimpie]

I concur, Hugo's additions work nicely.

One request... Can we get icons for Projects: 'List Subscriptions' and 'Projects'?

Thanks!