Forum Home Enhancements - SCANU's Elegant Forum description on mouseover [as Xenforo]

Description

This modification shows an elegant forum description when moving mouse over the forum title. Look at the screenshots for more! This is the upgrade of my template modification SCANU - Forum description on title mouseover [as Xenforo].

Live Demo

If you want to see how great looks the jquery effect go here for the online demo.

Installation

Upload the product via admincp and go in Settings->SCANU's Forum description on tilte mouseover for customize the style.
For 2.2 version: go in "Settings->SCANU's Forum description on tilte mouseover", set lesscode to yes and put the id of your last forum to perform the script.
For the update just redownload and reupload the file, make sure that overwriting is set to Yes.

Translations

Please post your translation in a reply so everyone can uses it.

Restrictions

In the description your " will replaced with ' for example if you write "errare humanum est" you will see 'errare humanum est'.

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 Boofo for his basing php code, to haincha for the idea and to my brother Clear for the styling.

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]

Please mark as installed

[goshalim]

Hi very nice mod , but i am have the same problem showing the code when you put the mouse over

HEre is my link : http://www.canarybreeder.net/up/forum/forum.php

[strudinox]

Installed and works great!

One question though... Would it be possible to also include this code in the thread previews?

For example:

[thecore762]

Originally Posted by goshalim

Hi very nice mod , but i am have the same problem showing the code when you put the mouse over

HEre is my link : http://www.canarybreeder.net/up/forum/forum.php

The answer is in the last two pages...


Here is the fix.

Install plugin.
Then go to Plugin Manager, disable everything except "to"

then do this:

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> 


[bada_bing]

Originally Posted by thecore762

The answer is in the last two pages...


Here is the fix.

Install plugin.
Then go to Plugin Manager, disable everything except "to"

then do this:

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> 


I have done this and got it working in vb 4.19 EXCEPT now In adminCP unsder this mods settings I change the text color but it does not actually change the color, will there be a fix to this soon or else I will need to uninstall

[bada_bing]

OK so I was able to manually change the background and text color by changing this

Go to your template called forumhome_forumbit_level2_post and change these settings to match what you want.

#scanu {
/*styling of the box */
background:black;
color: DeepPink;
padding: 5px 10px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
filter:alpha(opacity=68);
-moz-opacity:.68;
opacity:.68;

One other question though is I noticed that this mod makes to seperate java calls which can be avoided by calling a local version correct

[thecore762]

Originally Posted by bada_bing

I have done this and got it working in vb 4.19 EXCEPT now In adminCP unsder this mods settings I change the text color but it does not actually change the color, will there be a fix to this soon or else I will need to uninstall

Yeah, same here.
Plus this mod doesn't work when prototype.js when it's on.
https://vborg.vbsupport.ru/showthrea...28#post2286328

[goshalim]

Thanks Man

Its working now perfectly

[Scanu]

Of corse you can't if you are using a template modification you must change it on the template, change color: white; to color: yourtextcolor;

[bada_bing]

Originally Posted by Scanu

Of corse you can't if you are using a template modification you must change it on the template, change color: white; to color: yourtextcolor;

Will these issues be fixed soon, great mod