vb.org Archive - Forum Home Enhancements - SCANU - Forum description on title mouseover [as Xenforo]

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)

- - Forum Home Enhancements - SCANU - Forum description on title mouseover [as Xenforo] (https://vborg.vbsupport.ru/showthread.php?t=275428)

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! :D

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

To get support:

Mark this mod as Installed
Copy/Pasted errors or screenshots
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

Version History
- 1.0
- First release on Vbulletin.org

- 2.0
- Added the arrow <
- Better positioned respect the forum title
- Adapted to long description
- The arrow < is not an image but a css code
- Added the indent to the CSS code

- 2.1
- I'm looking for new feature request you can request your feature responding to this thread

Quote:

Originally Posted by Scanu (Post 2277312)

3th post reeserved

3rd ;).

If I were to remove the forum description, is the mouseover info still readable by search engines?

Quote:

Originally Posted by Lazorbeam (Post 2277335)

3rd ;).

If I were to remove the forum description, is the mouseover info still readable by search engines?

Whhoops :D
Yes, it would be. the description is in the title attribute: "In contrast, you can use the TITLE attribute for just about any page element, but it isn't required for any page element. Use it to describe links, tables, individual table rows, and other structural HTML elements. They're more versatile than the ALT attribute and many search engine ranking algorithms read the text in TITLE attributes as regular page content."
For more see this: http://www.netmechanic.com/news/vol6/html_no1.htm

Quote:

Originally Posted by Scanu (Post 2277350)

That's awesome.

I think I can see where you're going with this product... seems very very promising. Care to give us a sneak peak?

Tagged, thanks. i'll try to install it in my vb 3.8 forum :)

Quote:

Originally Posted by Lazorbeam (Post 2277387)

That's awesome.

I think I can see where you're going with this product... seems very very promising.

Thanks :)

Quote:

Originally Posted by Lazorbeam (Post 2277387)

Care to give us a sneak peak?

Sorry what do you mean? What are you reffering to?

Quote:

Originally Posted by Arcade Fire (Post 2277435)

Tagged, thanks. i'll try to install it in my vb 3.8 forum :)

That would be works, i've never got vbulletin 3 but i think that you have to change the <vb:if> in <if>

I like this! Can't wait till it gets released as a plugin. :)

Quote:

Originally Posted by CharlieDelta (Post 2277450)

I like this! Can't wait till it gets released as a plugin. :)

Same here, I'd like to see a plugin version of this mod :)

Can you make for vb 3.8
Please..!!

well, i will try to :) Give me some time

It's not applying for 'forum description' only; includes last poster, thread title etc... Pls modify the code.

I'm not sure to understand you can you post a screen "Before" and "after"

Advise....

Rather than remove or replace

With the 1st code wrap it around with

PHP Code:


		
			
<vb:comment>  </vb:comment>

So when done it will look like

PHP Code:


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

Then proceed to add your code below it

Next do the same thing you did for the 1st one. So when done it will look like

PHP Code:


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

This will help you during an upgrade and not have to completely revert everything.

Mmh yes this is the same but it's better, thanks tommorow i will change the code :)

I just installed the Rocket Dock HERE b4 AND i install this mod too but my rocket dock not working ... Any help ?

Sorry i don't know what's the problem.. the template is another one, this is probably a jquery problem can't help you :( Choose one mod :(

It is not working when you use a description with color .. like:

Code:

forum description

There is a small undesired effect from this modification. It's not so much of an issue, but I would call it undesirable.

It works without issue on the forum description as it was meant to (see screen shot 1), but if you move your mouse on a topic, toward the right, outside the forum, it's basically unreadable because the text is black and the background is clear (see screen shot #2)

Any solution?

Ok perfect i've seen the problems,
I can fix many of those errors, but i can't help "HHelp1" sorry for many errors this is a beta version

Quote:

Originally Posted by OldSchoolDSL (Post 2278122)

Advise....

Rather than remove or replace

With the 1st code wrap it around with

PHP Code:


		
			
<vb:comment>  </vb:comment>

So when done it will look like

PHP Code:


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

Then proceed to add your code below it

Next do the same thing you did for the 1st one. So when done it will look like

PHP Code:


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

This will help you during an upgrade and not have to completely revert everything.

thanks i did it :)

Quote:

Originally Posted by Filgga (Post 2278071)

It's not applying for 'forum description' only; includes last poster, thread title etc... Pls modify the code.

Quote:

Originally Posted by OldSchoolDSL (Post 2278500)

Now this problem would be solved but i can't try please let me know if it works! :)

Quote:

Originally Posted by sadiq6210 (Post 2278437)

It is not working when you use a description with color .. like:

Code:

forum description

If i understand what u mean, you can change the color of the description searching in the code this

PHP Code:


		
			
color:white;

and replacing with the color that you want, for example

PHP Code:


		
			
color:#000000;

Quote:

Originally Posted by Scanu (Post 2278590)

Now this problem would be solved but i can't try please let me know if it works! :)

Your new code basically trashed the forum. So I re-applied the old code.

PHP Code:


		
			
<h2 class="forumtitle"><a <vb:if condition="$show['forumdescription']">title="<scanu>{vb:raw forum.description}</scanu>"</vb:if> href="{vb:link forum, {vb:raw forum}}">{vb:raw forum.title}</a></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> 
$(" a[title]").tooltip({ 
position: 'center right', 
effect: 'slide' 
}); 
</script> 
<style> 
scanu { 
background:black; 
color:white; 
padding: 5px 10px; 
-moz-border-radius: 8px; 
-webkit-border-radius: 8px; 
filter:alpha(opacity=68);  
-moz-opacity:.68; 
opacity:.68; 
} 
</style>

Can you try again with the new code? :)

Quote:

Originally Posted by Scanu (Post 2278592)

If i understand what u mean, you can change the color of the description searching in the code this

PHP Code:


		
			
color:white;

and replacing with the color that you want, for example

PHP Code:


		
			
color:#000000;

After update the code, now there is two errors!

1) Color description:
I have many forums, I changed the description color for some forums.
How to reproduce this bug:
- Add new forum
- write any title i.e (test forum)
- In description paste this:

Code:

Test forum with blue color

So you will have this result before install your mod.
https://vborg.vbsupport.ru/attachmen...1&d=1324188888

After modified the template and add your code:
https://vborg.vbsupport.ru/attachmen...1&d=1324188888

2) After update:
After update the old code with new update, It is not working with me !
see the last screenshot.

This is my (forumhome_forumbit_level2_post)

Code:

<li id="forum{vb:raw forum.forumid}" class="forumbit_post {vb:raw forum.statusicon} L2">

        <div class="forumrow table">

                <div class="foruminfo td">

                        <img src="{vb:stylevar imgdir_statusicon}/{vb:raw forum.imageprefix}forum_{vb:raw forum.statusicon}-48.png" class="forumicon" id="forum_statusicon_{vb:raw forum.forumid}" alt="" />

                        <div class="forumdata">

                                <div class="datacontainer">

                                        <div class="titleline">

<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="scanutitle"><a <vb:if condition="$show['forumdescription']">title="<scanu>{vb:raw forum.description}</scanu>"</vb:if> href="{vb:link forum, {vb:raw forum}}">{vb:raw forum.title}</a></h2></div>

<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>

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

position: 'center right',

effect: 'slide'

});

</script>

<style>

scanu {

background:black;

color:white;

padding: 5px 10px;

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

filter:alpha(opacity=68); 

-moz-opacity:.68;

opacity:.68;

}

</style>  

                                                <vb:if condition="$show['browsers']"><span class="viewing">({vb:raw forum.browsers} {vb:rawphrase viewing})</span></vb:if>

                                        </div>

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

                                        <vb:if condition="$vboptions['showmoderatorcolumn'] AND $forum['moderators']">

                                                <div class="moderators">

                                                        <h4>{vb:rawphrase moderators}:</h4>

                                                        <ol class="commalist">

                                                                <vb:each from="forum['moderators']" value="row">

                                                                        <li><a class="username" href="{vb:link member, {vb:raw row}}">{vb:raw row.musername}</a>{vb:raw row.comma}</li>

                                                                </vb:each>

                                                        </ol>

                                                </div>

                                        </vb:if>



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

                                                {vb:raw forum.subforums}

                                        </vb:if>



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

                                                <p class="unsubscribe">

                                                        <a href="{vb:raw vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}subscription.php?{vb:raw session.sessionurl}do=removesubscription&amp;f={vb:raw forum.forumid}" rel="nofollow">{vb:rawphrase unsubscribe_from_this_forum}</a>

                                                </p>

                                        </vb:if>

                                </div>

                        </div>

                </div>

        <vb:if condition="$forum['statusicon'] != 'link'">

                <h4 class="nocss_label">{vb:rawphrase forum_actions}:</h4>

                <vb:if condition="$vboptions['externalrss'] OR $show['member']">

                <ul class="forumactionlinks td">

                        <vb:if condition="$forum['allowposting']"><vb:if condition="$vboptions['externalrss']"><li class="forumactionlink rsslink"><a href="external.php?{vb:raw session.sessionurl}type=RSS2&amp;forumids={vb:raw forum.forumid}" title="{vb:rawphrase view_forum_rss_feed}">{vb:rawphrase view_forum_rss_feed}</a></li></vb:if>

                        <vb:if condition="$show['member']"><vb:if condition="$show['forumsubscription']"><li class="forumactionlink unsubslink"> <a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}subscription.php?{vb:raw session.sessionurl}do=removesubscription&amp;f={vb:raw forum.forumid}" title="{vb:rawphrase unsubscribe_from_this_forum}">{vb:rawphrase unsubscribe_from_this_forum}</a></li><vb:else /><li class="forumactionlink subslink"> <a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}subscription.php?{vb:raw session.sessionurl}do=addsubscription&amp;f={vb:raw forum.forumid}" title="{vb:rawphrase subscribe_to_this_forum}">{vb:rawphrase subscribe_to_this_forum}</a></li></vb:if></vb:if></vb:if>

                </ul>

                <vb:else />

                <div class="forumactionlinks"></div>

                </vb:if>

        <h4 class="nocss_label">{vb:rawphrase forum_statistics}:</h4>

                <ul class="forumstats td">

                        <li>{vb:rawphrase threads}: {vb:raw forum.threadcount}</li>

                        <li>{vb:rawphrase posts}: {vb:raw forum.replycount}</li>

                </ul>

                <div class="forumlastpost td">

                        <h4 class="lastpostlabel">{vb:rawphrase last_post}:</h4>

                        <div>

                                {vb:raw forum.lastpostinfo}

                        </div>

                </div>

        </vb:if>

        </div>

        <vb:if condition="$childforumbits">

                <ul class="childsubforum">

                        {vb:raw childforumbits}



                </ul>

        </vb:if>

</li>

Quote:

Originally Posted by OldSchoolDSL (Post 2278626)

Your new code basically trashed the forum. So I re-applied the old code.

PHP Code:


		
			
<h2 class="forumtitle"><a <vb:if condition="$show['forumdescription']">title="<scanu>{vb:raw forum.description}</scanu>"</vb:if> href="{vb:link forum, {vb:raw forum}}">{vb:raw forum.title}</a></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> 

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

position: 'center right', 

effect: 'slide' 

}); 

</script> 

<style> 

scanu { 

background:black; 

color:white; 

padding: 5px 10px; 

-moz-border-radius: 8px; 

-webkit-border-radius: 8px; 

filter:alpha(opacity=68);  

-moz-opacity:.68; 

opacity:.68; 

} 

</style>

Same
+1

Quote:

Originally Posted by sadiq6210 (Post 2278757)

Same
+1

Aren't you happy I kept a copy of the original code? LOL

Thanks for confirming.

Quote:

Originally Posted by OldSchoolDSL (Post 2278767)

Aren't you happy I kept a copy of the original code? LOL

Thanks for confirming.

Absolutely :D hah

ok so nothing to do I can't re-code the mod without testing board please wait for a fix for those problems. I revert the original code in the mod

i edited templaye as u said /....

but nothing happened :-s

Are you sure to edit the right template?
forumhome_forumbit_level2_post

We have a winner.

Thank you Scanu :)

This one will work

Code:

                <h2 class="forumtitle"><div id="test"><a <vb:if condition="$show['forumdescription']">title="<scanu>{vb:raw forum.description}</scanu>"</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>

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

position: 'center right',  

effect: 'slide'  

});

</script>

<style>

scanu {  

background:black;

color:white;

padding: 5px 10px;

-moz-border-radius: 8px; 

-webkit-border-radius: 8px;

filter:alpha(opacity=68);

-moz-opacity:.68;

opacity:.68;

}  

</style>

Be sure to include that large space in the 1st line when you copy & paste. ;)

You don't need to space after the end of the code. For some reason vBulletin.org adds it. Just copy all the way until you hit </style> at the end.

Installed and working

4.1.9

Thanks everybody now i've updated the code in the first topic

sadiq6210, regarding your error i'm working to solve it but i think that is impossible. I know the reason of that error so i think i can't help you :S

Quote:

Originally Posted by Scanu (Post 2278917)

sadiq6210, regarding your error i'm working to solve it but i think that is impossible. I know the reason of that error so i think i can't help you :S

I had his / hers spacing error originally. So I think this code should resolve it.

But I suspect the colored description in his / her forum maybe the cause.

Lol what am i saying try with the new code i fix this error too

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01628 seconds Memory Usage 1,944KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (5)bbcode_code_printable (16)bbcode_php_printable (17)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: