SCANU - Forum description on title mouseover [as Xenforo]

SCANU - Forum description on title mouseover [as Xenforo]

Mod Version: 2.00, by Scanu

vB Version: 4.x.x	Rating: (6 votes - 5.00 average)	Installs: 37
Released: 13 Dec 2011	Last Update: Never	Downloads: 0
Not Supported Template Edits Code Changes Translations

Description

This modification show an elegant forum description when moving mouse over the forum title. Look at the screenshots for more! This is mod is temporary template modification of the future product that i'm working on. I've just released this "beta" for who wants to use this now.

Installation

Go in "Adimncp/Styles and Templates/Your style - Edit Templates/Forum Home Templates/forumhome_forumbit_level2_post/" and replace this code

PHP Code:


<h2 class="forumtitle"><a href="{vb:link forum, {vb:raw forum}}">{vb:raw forum.title}</a></h2>

With this

PHP Code:


<vb:comment><h2 class="forumtitle"><a href="{vb:link forum, {vb:raw forum}}">{vb:raw forum.title}</a></h2></vb:comment> 

        <h2 class="forumtitle"><div id="scanudesc">

<a <vb:if condition="$show['forumdescription']">

title='<div id="container"><div id="scanu">{vb:raw forum.description}</div><span class="arrow"></span></div>'</vb:if> href="{vb:link forum, {vb:raw forum}}">{vb:raw forum.title}</a></div></h2>



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>    

<script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script>   

<script>   

$("#scanudesc a[title]").tooltip({   

position: "bottom right",   

effect: "slide"   

});   

</script> 

<style>

/*styling and positioning of the arrow*/

 .arrow {

    border-right: 5px solid black;

    border-top: 5px solid transparent;

    border-left: 1px none black;

    border-bottom: 5px solid transparent;

    position: absolute;

    top: 7px;

    line-height: 0px;

    width: 0px;

    height: 0px;

    left: -5px;

    filter:alpha(opacity=68);

    -moz-opacity:.68;

    opacity:.68;

    _display: none;

}  

#scanu { 

    /*styling of the box */

    background:black;   

    color:white;   

    padding: 5px 10px;   

    -moz-border-radius: 8px;   

    -webkit-border-radius: 8px;   

    filter:alpha(opacity=68);  

    -moz-opacity:.68;  

    opacity:.68;   

}   

#container {

    /*positioning of the arrow and the box*/

    position: relative;

    top: -10px;

    left: 10px;

    max-width: 440px;

}

</style>

Then replace this code

PHP Code:


<vb:if condition="$show['forumdescription']"><p class="forumdescription">{vb:raw forum.description}</p></vb:if>

with this

PHP Code:


<vb:comment><vb:if condition="$show['forumdescription']"><p class="forumdescription">{vb:raw forum.description}</p></vb:if></vb:comment>

Enjoy and wait for the product with many features and options!

http://www.vbulletin.org/forum/showthread.php?p=2251846

To get support:

Mark this mod as Installed
Copy/Pasted errors or screenshots
URL/link to site

Many thanks to haincha for the idea.

https://www.youtube.com/watch?v=agPuN80vgaE or https://www.youtube.com/watch?v=bf6kP1lMdJc
https://www.youtube.com/watch?v=b2i3ml7wlJo

Download

No files for download.

Screenshots

vBulletin LTS