The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How can I make Hover on Forum Categories?

View previous topic View next topic Go down

Solved How can I make Hover on Forum Categories?

Post by Van-Helsing on December 1st 2013, 10:03 am

Good morning dear all,

How can I make this hover http://prntscr.com/27whm9 on forum categories? My Forum Version is PHPBB2.

Best Regards,
Dark-Avenger


Last edited by Dark-Avenger on December 1st 2013, 6:36 pm; edited 1 time in total

Van-Helsing
Hyperactive

Male Posts : 2197
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I make Hover on Forum Categories?

Post by Ange Tuteur on December 1st 2013, 4:14 pm

Hello Dark-Avenger,

This can be done for phpbb2 however, you'll need to edit the template and add a javascript.

First:
AP > Display > Templates > General > index_box

Find this:
Code:
<tr>
 <!-- BEGIN inc -->
 <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
 <!-- END inc -->
 <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
 <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
 </td>
 <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
 <h{catrow.forumrow.LEVEL} class="hierarchy">
 <span class="forumlink">
 <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
 </span>
 </h{catrow.forumrow.LEVEL}>
 <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
 <span class="gensmall">
 <!-- BEGIN switch_moderators_links -->
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 <!-- END switch_moderators_links -->
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 </span>
 </td>
 <td class="row3" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.TOPICS}</span>
 </td>
 <td class="row2" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.POSTS}</span>
 </td>
 <td class="row3 over" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
 </td>
 </tr>
Replace with this:
Code:
<tr class="index-row">
 <!-- BEGIN inc -->
 <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
 <!-- END inc -->
 <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
 <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
 </td>
 <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
 <h{catrow.forumrow.LEVEL} class="hierarchy">
 <span class="forumlink">
 <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
 </span>
 </h{catrow.forumrow.LEVEL}>
 <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
 <span class="gensmall">
 <!-- BEGIN switch_moderators_links -->
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 <!-- END switch_moderators_links -->
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 </span>
 </td>
 <td class="row3" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.TOPICS}</span>
 </td>
 <td class="row2" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.POSTS}</span>
 </td>
 <td class="row3 over" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
 </td>
 </tr>
Save the template and publish it.

Then create a new script:
AP > Modules > Javascript codes management > create a new script

Name: what you wish
Placement: In the homepage
Code:
jQuery(document).ready(function(){
jQuery('tr.index-row').hover(function(){
/*Hover*/jQuery(this).children('.row1, .row2, .row3').css('background', '#032248'); },function(){
/*After hover*/jQuery(this).children('.row1, .row2, .row3').css('background', '#0F0F0F');
});
});
If you want to use a image as hover:

Find this in the script:
Code:
/*Hover*/jQuery(this).children('.row1, .row2, .row3').css('background', '#032248'); },function(){
/*After hover*/jQuery(this).children('.row1, .row2, .row3').css('background', '#0F0F0F');
and replace it with this:
Code:
/*Hover*/jQuery(this).children('.row1, .row2, .row3').css('background', 'url("IMAGE SRC") repeat-x'); },function(){
/*After hover*/jQuery(this).children('.row1, .row2, .row3').css('background', 'url("IMAGE SRC") repeat-x');
Then fill in IMAGE SRC with your hover image, and after hover image.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How can I make Hover on Forum Categories?

Post by Van-Helsing on December 1st 2013, 6:35 pm

SethC1995 wrote:Hello Dark-Avenger,

This can be done for phpbb2 however, you'll need to edit the template and add a javascript.

First:
AP > Display > Templates > General > index_box

Find this:
Code:
<tr>
 <!-- BEGIN inc -->
 <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
 <!-- END inc -->
 <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
 <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
 </td>
 <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
 <h{catrow.forumrow.LEVEL} class="hierarchy">
 <span class="forumlink">
 <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
 </span>
 </h{catrow.forumrow.LEVEL}>
 <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
 <span class="gensmall">
 <!-- BEGIN switch_moderators_links -->
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 <!-- END switch_moderators_links -->
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 </span>
 </td>
 <td class="row3" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.TOPICS}</span>
 </td>
 <td class="row2" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.POSTS}</span>
 </td>
 <td class="row3 over" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
 </td>
 </tr>
Replace with this:
Code:
<tr class="index-row">
 <!-- BEGIN inc -->
 <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
 <!-- END inc -->
 <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
 <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
 </td>
 <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
 <h{catrow.forumrow.LEVEL} class="hierarchy">
 <span class="forumlink">
 <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
 </span>
 </h{catrow.forumrow.LEVEL}>
 <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
 <span class="gensmall">
 <!-- BEGIN switch_moderators_links -->
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 <!-- END switch_moderators_links -->
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 </span>
 </td>
 <td class="row3" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.TOPICS}</span>
 </td>
 <td class="row2" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.POSTS}</span>
 </td>
 <td class="row3 over" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
 </td>
 </tr>
Save the template and publish it.

Then create a new script:
AP > Modules > Javascript codes management > create a new script

Name: what you wish
Placement: In the homepage
Code:
jQuery(document).ready(function(){
jQuery('tr.index-row').hover(function(){
/*Hover*/jQuery(this).children('.row1, .row2, .row3').css('background', '#032248'); },function(){
/*After hover*/jQuery(this).children('.row1, .row2, .row3').css('background', '#0F0F0F');
});
});
If you want to use a image as hover:

Find this in the script:
Code:
/*Hover*/jQuery(this).children('.row1, .row2, .row3').css('background', '#032248'); },function(){
/*After hover*/jQuery(this).children('.row1, .row2, .row3').css('background', '#0F0F0F');
and replace it with this:
Code:
/*Hover*/jQuery(this).children('.row1, .row2, .row3').css('background', 'url("IMAGE SRC") repeat-x'); },function(){
/*After hover*/jQuery(this).children('.row1, .row2, .row3').css('background', 'url("IMAGE SRC") repeat-x');
Then fill in IMAGE SRC with your hover image, and after hover image.
Thank you very very very much SethC1995. Its working amazing.
:wouhou: 
Best Regards,
Dark-Avenger

Van-Helsing
Hyperactive

Male Posts : 2197
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I make Hover on Forum Categories?

Post by Ange Tuteur on December 1st 2013, 6:37 pm

You're welcome I love you

Topic solved and archived

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum