Forum Home Enhancements - SCANU - Forum description on title mouseover [as Xenforo]

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!

PLEASE VOTE THIS MOD FOR MOTM: CLICK HERE, AND CLICK MARK AS INSTALLED

To get support:

1. Mark this mod as Installed
2. Copy/Pasted errors or screenshots
3. URL/link to site

Many thanks to haincha for the idea.

If you like italian G-funk/rap please try out this music or this music
If you like italian rap try out this music

[Scanu]

I think the is a css problem because the configuration of the jquery plugin is limited

[haincha]

Is it just the source you used? I found two jQuery tooltips that look really nice.

TipTip
Tipped

[Scanu]

Really i want to use the same jquery plugin that uses Xenforo,
I don't like TipTip and when you go in the description it disappears, regard to Tipped i like it so much it's perfect but as I said i want to leave the original plugin

[haincha]

That is fine, I have no problems with what you have. I just want the tip "<" on the left top side. I couldn't figure out how to make it show up.

[Scanu]

My brother is working on that. however it's a image positioned beside the box with css

[haincha]

Also needs some styling, I have a forum with a longer description. It kind of keeps going towards the end of the screen. Any way to have it after x amount of characters to start a new line?

[Scanu]

Oh i'm sorry my brother is working on this, for now you can try max-width: value;
choose the value as you want

[haincha]

PHP Code:

<style>  
scanu {  
background:black;  
color:white;  
padding: 5px 10px;
max-width: 20;  
-moz-border-radius: 8px;  
-webkit-border-radius: 8px;  
filter:alpha(opacity=68);   
-moz-opacity:.68;  
opacity:.68;  
}  
</style> 


Unless I am doing it wrong, this is just a test number for value. But, it did not change anything.

[Scanu]

sorry the value must be expressed in pixel so try 20px

[haincha]

Still no luck. Even refreshed my browser and tried another. Not working in Firefox or Safari on Mac.