[MODDB] Clickable Icons

[Typo]

Title: Clickable Icons (in the header and footer)

Author: Typo

Description: This modification will show you how to take the links with icons in the header and footer and make it so that the icons are clickable.

For instance, notice how when you hover over the FAQ link, it changes the cursor to the hand, indicating it is a clickable link, changes the color of the link text and is actually clickable. Now, notice when you hover over the icon for the FAQ link, nothing happens, the cursor remains normal, the link text doesnt change color and you cannot actually click it to navigate to the FAQ page.

This modification addresses that by making the icons clickable. When installed properly, the icon next to the FAQ link will act just as the rest of the link does, when you hover the mouse over it the cursor will change, the link text will change color and you will be able to click on the icon itself to use the link.

This mod covers all the default icons used in the header and footer but as you can see by looking at the demo site, it can work with all icons.

Icons made clickable: Bookmark, Bump. FAQ, Home, Login, Logout, Members, Register, Subscribe, Unsubscribe, and the User Control Panel.

Demo Board: My site with MANY mods including this one at [url]http://www.aplacetochat.com[/url] or a default phpBB3 test board with JUST this mod at [url]http://test.computermedicone.com[/url].

Version: 1.0.0 RC

Installation Level: Easy

Installation Time: ~10 minutes

Update 1.0.0 Beta to 1.0.1 Beta: Changed from using id's to classes like I should have to begin with. MOD now passes W3C XHTML 1.0 Strict! validation. (Update instructions are included in the contrib folder.)
Update 1.0.1 Beta to 1.0.0 RC: Moved from the Beta phase into the RC (Release Candidate) phase.

MOD Download: [url]http://www.aplacetochat.com/mod/clickable_icons.zip[/url]

View Install Instructions Online: [url]http://www.aplacetochat.com/mod/clickable_icons/install.xml[/url]

[Typo]

This is my first mod so I appreciate ALL comments and feedback.

Please, if you try this mod, let me know how it works, how the install went and how you like it. I have had very very little feedback so far.

Thanks and enjoy.

Typo

[Typo]

Ok, let's talk about applying this mod to other mods.

These instructions will also be included in raw text form in the contrib folder.

The first thing I need to point out is that for the more experienced user, if you just pay attention to the edits in overall_header.html and colours.css and apply similar modifications to the mod you are installing/editing, you will find it is not difficult to figure out .

Now to go in as much detail as I dare about how to apply this mod to other mods for anyone that may need it.

This is a difficult thing to cover because of the fact that I have no way to know how the mod you may have is going to handle displaying their link.

First things first. Lets take the pastebin mod as an example. I am using the pastebin mod that evil3 authored and 3Di took over. It can be found at [url]http://startrekguide.com/community/viewtopic.php?f=127&t=9693#p98819[/url]

The instructions we are interested will almost always be in:
root/styles/prosilver/template/overall_header.html,
root/styles/prosilver/theme/colousr.css

Open: styles/prosilver/template/overall_header.html
The mod had you put in:

Code: Select all

            <!-- IF S_DISPLAY_PASTEBIN -->
            <li class="rightside"><a href="{U_PASTEBIN}" title="{L_PASTEBIN}" class="icon-pastebin">{L_PASTEBIN}</a></li>
            <!-- ENDIF -->

But we needed to edit that so that the icon-???-clickable is added to the <li> class and in this special case we need to remove the "class="icon-pastebin" from inside the <a> tag.

Code: Select all

            <!-- IF S_DISPLAY_PASTEBIN -->
            <li class="icon-pastebin-clickable"><a href="{U_PASTEBIN}" title="{L_PASTEBIN}">{L_PASTEBIN}</a></li>
            <!-- ENDIF -->

Open: styles/prosilver/theme/colours.css
The mod had you insert the line:

Code: Select all

.icon-pastebin               { background-image: url("{T_THEME_PATH}/images/icon_pastebin.gif"); }

We need to edit that line to include the , .icon-???-clickable

Code: Select all

.icon-pastebin, .icon-pastebin-clickable               { background-image: url("{T_THEME_PATH}/images/icon_pastebin.gif"); }

The pastebin may not have been a great example because of the odd way it had the class="icon-pastebin" inside the <a> tag but I guess it does show how every mod will be different.

The important thing is to turn the <li class="????"> into a <li class=icon-?????-clickable>

These will almost always be the only edits you need. Lets look at another mod.

This time I chose to look at Handymans Chat with Sound and Archive from [url]http://startrekguide.com/community/viewtopic.php?f=127&t=8824#p92252[/url]

This is an easy one, this uses one of the default icon classes so...

In the instructions it says to add:

Code: Select all

<li class="icon-members"><a href="{U_CHAT}" title="{L_CHAT_EXPLAIN}">{L_CHAT}</a></li>

After:

Code: Select all

<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>

Well we would change the:

Code: Select all

<li class="icon-members"><a href="{U_CHAT}" title="{L_CHAT_EXPLAIN}">{L_CHAT}</a></li>

To:

Code: Select all

<li class="icon-members-clickable"><a href="{U_CHAT}" title="{L_CHAT_EXPLAIN}">{L_CHAT}</a></li>

<li class="icon-members-clickable"> works because we already fixed that icon class earlier during the clickable icons mod install.

Sometimes a mod will add a whole new <ul class=linklist>***</ul> or <ul class="linklist rightside">***</ul> where *** is everything needed for the link such as the example above <li class="icon-members"><a href="{U_CHAT}" title="{L_CHAT_EXPLAIN}">{L_CHAT}</a></li>.
In those cases we will also need to add the clickable class inside the <ul> tag like <ul class=linklist clickable>***</ul> or <ul class="linklist rightside clickable">***</ul>.

The important things to keep in mind are:

Inside overall_header

Change the link so that the <li class="???"> includes clickable in the class name like <li class="icon-faq-clickable">
Make sure we do not leave a class="icon???" inside the <a> tag if it exists.

Inside colours.css

Edit the .icon-??? { background-image: url("{T_THEME_PATH}/images/..."); } to .icon-???-clickable { background-image: url("{T_THEME_PATH}/images/..."); }

Remember:
Inside <li> </li> the clickable is connected to the other class names with a dash (hyphen) like <li class="icon-faq-clickable></li>
Inside <ul> </ul> the clickable is seperate from the other class names with a space like <li class="linklist rightside clickable></li>

I am always available to help if needed but please try to figure it out yourself first. Using the mod instructions and this tutorial most people should be able to get links in mods to work.

I hope this wasn't too confusing.

Typo

[Typo]

I forgot to update that this mod was accepted to the MODDB way back in may.

The MODDB link is [url]http://www.phpbb.com/community/viewtopic.php?t=1612505[/url].

Better late than never eh.

Typo