Mini Mods - Innovative Signature Showcase

Innovative Signature Showcase for vBulletin 4.0
Compatible with vB4 Beta (All) and vB4 RC (All) and vBulletin Gold, pretty much 4.0.x until 4.1 is released.

By:

This is very similar to DJ's Dynamic Tab Content for Postbit Legacy found here:

https://vborg.vbsupport.ru/showthread.php?t=184136

Basically I decided to use this in my signatures and so can you, it slides in different content, the first is your signature per the boards allowed use and usergroup permissions, the second through fifth are per new profile fields you create and users simply fill in the images URL into their Options via USERCP.

** You can add more tabs/slide "dots" with other content and you can even use codes for scripts and vB codes versus images to make this achieve more! *I've had an mp3 Player in one of the "tabs" see the demo, it's slide/tab #6

Screenshot is included of this working on a 4.0 Beta 3 Install.
*The tab script used within this modification currently only compatible with FF1+ IE5+ Opr7+
Per: http://www.dynamicdrive.com/dynamici...tabcontent.htm
However it should not present an issue in other browsers unless they have show placeholders or similar enabled for images in which case little red X's might appear so you can conditional code it if desired not to show, please PM me for the code and instructions.

*Full install instructions included in the zip, once unzipped please view Install.html also the demo has two of the five images reused but hover to see the description is accurate

Future Updates to include full instructions on how to utilize this signature postbit or postbit_legacy modification so it's not just images and that will include many ideas I have not had time to look into just yet!

Files have been updated and commented to include credit to all involved:

/***********************************************
* Tab Content script v2.2- ? Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

/* June 23rd, 09 Code re-used by TheLastSuperman per Digital Jedi's mod marked as re-useable code, all credit remains that of Dynamic Drive and then for the original use in postbit, credits go to Digital Jedi. */
/* June 23rd, 09 File names and image names changed, folder location has changed as well, all was done so it would not interfer if you have DJ's mod installed as well, in my opinion each is like an add-on per say but DJ nailed this nice function a while back ;) S-MAN */

Updated August 23rd, 10 Cleaned up install.html instructions, renames some css and other misc changes.
Updated August 5th, 09 Spare </if> caught by Loco.M (Thanks )
Updated November 15th, 09 for vBulletin 4.0

TheLastSuperman
http://www.innovationbyinstinct.com

[TheLastSuperman]

Originally Posted by mk craig 42

There is no header_include - Only headinclude
However when i add it to the very bottom of that, my whole forum pretty much disappears, there are no forum categories, only the information at the bottom, such as who is online and the Icon Legend..

Am i doing anything wrong?

Your correct, it is headinclude

Find:

<vb:if condition="$vboptions['externalrss']">
	<link rel="alternate" type="application/rss+xml" title="{vb:raw vboptions.bbtitle} RSS Feed" href="{vb:raw vboptions.bburl}/external.php?type=RSS2" />
	<vb:if condition="$show['foruminfo'] OR $show['threadinfo']">
		<link rel="alternate" type="application/rss+xml" title="{vb:raw vboptions.bbtitle} - {vb:raw foruminfo.title_clean} - RSS Feed" href="{vb:raw vboptions.bburl}/external.php?type=RSS2&amp;forumids={vb:raw foruminfo.forumid}" />
	</vb:if>
</vb:if>

<link rel="stylesheet" type="text/css" href="{vb:stylevar yuipath}/reset-fonts/reset-fonts.css" />
<link rel="stylesheet" type="text/css" href="{vb:var vbcsspath}vbulletin.css,vbulletin-chrome.css,components.css<vb:if condition="$show['editor_css']">,editor.css</vb:if>" />

Add after:

<link rel="stylesheet" type="text/css" href="{vb:raw vboptions.bburl}/postbit_slide/slidecontent.css" />
<script type="text/javascript" src="{vb:raw vboptions.bburl}/postbit_slide/slidecontent.js">
/***********************************************
* Tab Content script v2.2- ? Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

Now give it a go

[Boko577]

I didn't understand steps 3 and up in your tutorial. Could you please make those more understandable and easy to follow? Sorry, I'm sort of a newb, but yeah...

[TheHardest]

I had some errors in vB4.0 Gold so I changed it a little.

<a class="musername" href="member.php?$session[sessionurl]u=$post[userid]">$post[musername]</a>
to
<a class="musername" href="member.php?{vb:raw post.userid}-{vb:raw post.musername}">{vb:raw post.musername}</a>

,

$post[signature]
to
{vb:raw post.signature}


And

src="$post[field5]"
to
src="{vb:raw post.field6}"

<strong></strong>
		<!-- POSTBIT SLIDE START -->
<if condition="$post['signature']">
		        <!-- sig -->

        		<!-- / sig -->

<div align="center"><a class="musername" href="member.php?{vb:raw post.userid}-{vb:raw post.musername}">{vb:raw post.musername}</a>'s Signature Showcase
<br />
<div id="postbittabs$post[postid]" class="smanslide">
 <ul>
<li><span title="View Tab 1"><a href="#" rel="tab1$post[postid]" id="selected$post[postid]"> </a></span></li>
<li><span title="View Tab 2"><a href="#" rel="tab2$post[postid]"> </a></span></li>
<li><span title="View Tab 3"><a href="#" rel="tab3$post[postid]"> </a></span></li>
<li><span title="View Tab 4"><a href="#" rel="tab4$post[postid]"> </a></span></li>
<li><span title="View Tab 5"><a href="#" rel="tab5$post[postid]"> </a></span></li>
 </ul>
<br style="clear: center" />
</div>
<div class="smallfont">
 
<!-- SLIDE 1 CONTENT -->
<div id="tab1$post[postid]" class="tabcontent">
<div class="info">				
				{vb:raw post.signature}</div>
</div>
 
<!-- SLIDE 2 CONTENT -->
<div id="tab2$post[postid]" class="tabcontent">
 <div class="info">				
<img alt="My 2nd Sig Pic" border="0" src="{vb:raw post.field5}" border="0"/>
</div>
</div>
 
<!-- SLIDE 3 CONTENT -->
<div id="tab3$post[postid]" class="tabcontent">
 <div class="info">
<img alt="My 3rd Sig Pic" border="0" src="{vb:raw post.field6}" border="0"/>
</div>
</div>
 
<!-- SLIDE 4 CONTENT -->
<div id="tab4$post[postid]" class="tabcontent">
<div class="info">
<img alt="My 4th Sig Pic" border="0" src="{vb:raw post.field7}" border="0"/>
</div>
</div>
 
<!-- SLIDE 5 CONTENT -->
<div id="tab5$post[postid]" class="tabcontent">
<div class="info">
<img alt="My 5th Sig Pic" border="0" src="{vb:raw post.field8}" border="0"/>
</div>
</div>

</div>
 
<script type="text/javascript">
var mytabs=new ddtabcontent("postbittabs$post[postid]")
mytabs.setpersist(false)
mytabs.setselectedClassTarget("link")
mytabs.init()
</script>  
</div>
        </if>
		<!-- /POSTBIT SLIDE END -->

[TheLastSuperman]

Originally Posted by Boko577

I didn't understand steps 3 and up in your tutorial. Could you please make those more understandable and easy to follow? Sorry, I'm sort of a newb, but yeah...

See Below

Originally Posted by TheHardest

I had some errors in vB4.0 Gold so I changed it a little.

<a class="musername" href="member.php?$session[sessionurl]u=$post[userid]">$post[musername]</a>
to
<a class="musername" href="member.php?{vb:raw post.userid}-{vb:raw post.musername}">{vb:raw post.musername}</a>

,

$post[signature]
to
{vb:raw post.signature}


And

src="$post[field5]"
to
src="{vb:raw post.field6}"

<strong></strong>
		<!-- POSTBIT SLIDE START -->
<if condition="$post['signature']">
		        <!-- sig -->

        		<!-- / sig -->

<div align="center"><a class="musername" href="member.php?{vb:raw post.userid}-{vb:raw post.musername}">{vb:raw post.musername}</a>'s Signature Showcase
<br />
<div id="postbittabs$post[postid]" class="smanslide">
 <ul>
<li><span title="View Tab 1"><a href="#" rel="tab1$post[postid]" id="selected$post[postid]"> </a></span></li>
<li><span title="View Tab 2"><a href="#" rel="tab2$post[postid]"> </a></span></li>
<li><span title="View Tab 3"><a href="#" rel="tab3$post[postid]"> </a></span></li>
<li><span title="View Tab 4"><a href="#" rel="tab4$post[postid]"> </a></span></li>
<li><span title="View Tab 5"><a href="#" rel="tab5$post[postid]"> </a></span></li>
 </ul>
<br style="clear: center" />
</div>
<div class="smallfont">
 
<!-- SLIDE 1 CONTENT -->
<div id="tab1$post[postid]" class="tabcontent">
<div class="info">				
				{vb:raw post.signature}</div>
</div>
 
<!-- SLIDE 2 CONTENT -->
<div id="tab2$post[postid]" class="tabcontent">
 <div class="info">				
<img alt="My 2nd Sig Pic" border="0" src="{vb:raw post.field5}" border="0"/>
</div>
</div>
 
<!-- SLIDE 3 CONTENT -->
<div id="tab3$post[postid]" class="tabcontent">
 <div class="info">
<img alt="My 3rd Sig Pic" border="0" src="{vb:raw post.field6}" border="0"/>
</div>
</div>
 
<!-- SLIDE 4 CONTENT -->
<div id="tab4$post[postid]" class="tabcontent">
<div class="info">
<img alt="My 4th Sig Pic" border="0" src="{vb:raw post.field7}" border="0"/>
</div>
</div>
 
<!-- SLIDE 5 CONTENT -->
<div id="tab5$post[postid]" class="tabcontent">
<div class="info">
<img alt="My 5th Sig Pic" border="0" src="{vb:raw post.field8}" border="0"/>
</div>
</div>

</div>
 
<script type="text/javascript">
var mytabs=new ddtabcontent("postbittabs$post[postid]")
mytabs.setpersist(false)
mytabs.setselectedClassTarget("link")
mytabs.init()
</script>  
</div>
        </if>
		<!-- /POSTBIT SLIDE END -->

Sorry, seems I uploaded the 3.8 file by mistake last time I'll have it updated tomorrow with the 4.x version I still have the .zip here on my hd and it's very similar to your code TheHardest

Mike

[TheLastSuperman]

Originally Posted by TheHardest

I had some errors in vB4.0 Gold so I changed it a little.

<a class="musername" href="member.php?$session[sessionurl]u=$post[userid]">$post[musername]</a>
to
<a class="musername" href="member.php?{vb:raw post.userid}-{vb:raw post.musername}">{vb:raw post.musername}</a>

,

$post[signature]
to
{vb:raw post.signature}


And

src="$post[field5]"
to
src="{vb:raw post.field6}"

<strong></strong>
		<!-- POSTBIT SLIDE START -->
<if condition="$post['signature']">
		        <!-- sig -->

        		<!-- / sig -->

<div align="center"><a class="musername" href="member.php?{vb:raw post.userid}-{vb:raw post.musername}">{vb:raw post.musername}</a>'s Signature Showcase
<br />
<div id="postbittabs$post[postid]" class="smanslide">
 <ul>
<li><span title="View Tab 1"><a href="#" rel="tab1$post[postid]" id="selected$post[postid]"> </a></span></li>
<li><span title="View Tab 2"><a href="#" rel="tab2$post[postid]"> </a></span></li>
<li><span title="View Tab 3"><a href="#" rel="tab3$post[postid]"> </a></span></li>
<li><span title="View Tab 4"><a href="#" rel="tab4$post[postid]"> </a></span></li>
<li><span title="View Tab 5"><a href="#" rel="tab5$post[postid]"> </a></span></li>
 </ul>
<br style="clear: center" />
</div>
<div class="smallfont">
 
<!-- SLIDE 1 CONTENT -->
<div id="tab1$post[postid]" class="tabcontent">
<div class="info">				
				{vb:raw post.signature}</div>
</div>
 
<!-- SLIDE 2 CONTENT -->
<div id="tab2$post[postid]" class="tabcontent">
 <div class="info">				
<img alt="My 2nd Sig Pic" border="0" src="{vb:raw post.field5}" border="0"/>
</div>
</div>
 
<!-- SLIDE 3 CONTENT -->
<div id="tab3$post[postid]" class="tabcontent">
 <div class="info">
<img alt="My 3rd Sig Pic" border="0" src="{vb:raw post.field6}" border="0"/>
</div>
</div>
 
<!-- SLIDE 4 CONTENT -->
<div id="tab4$post[postid]" class="tabcontent">
<div class="info">
<img alt="My 4th Sig Pic" border="0" src="{vb:raw post.field7}" border="0"/>
</div>
</div>
 
<!-- SLIDE 5 CONTENT -->
<div id="tab5$post[postid]" class="tabcontent">
<div class="info">
<img alt="My 5th Sig Pic" border="0" src="{vb:raw post.field8}" border="0"/>
</div>
</div>

</div>
 
<script type="text/javascript">
var mytabs=new ddtabcontent("postbittabs$post[postid]")
mytabs.setpersist(false)
mytabs.setselectedClassTarget("link")
mytabs.init()
</script>  
</div>
        </if>
		<!-- /POSTBIT SLIDE END -->

And Updated but here is the code:

		<!-- Postbit Slide by TheLastSuperman start -->
			<vb:if condition="$post['signature']">
			<blockquote class="signature restore">
<div align="center"><a class="musername" href="member.php?u={vb:raw post.userid}">{vb:raw post.username}</a>'s Signature Showcase
<br />
<div id="postbittabspost{vb:raw post.postid}" class="smanslide">
 <ul>
<li><span title="View Tab 1"><a href="#" rel="tab1post{vb:raw post.postid}" id="selectedpost{vb:raw post.postid}"> </a></span></li>
<li><span title="View Tab 2"><a href="#" rel="tab2post{vb:raw post.postid}"> </a></span></li>
<li><span title="View Tab 3"><a href="#" rel="tab3post{vb:raw post.postid}"> </a></span></li>
<li><span title="View Tab 4"><a href="#" rel="tab4post{vb:raw post.postid}"> </a></span></li>
<li><span title="View Tab 5"><a href="#" rel="tab5post{vb:raw post.postid}"> </a></span></li>
 </ul>
<br style="clear: center" />
</div>
<div class="smallfont">
 
<!-- SLIDE 1 CONTENT -->
<div id="tab1post{vb:raw post.postid}" class="tabcontent">
<div class="info">				
<div class="signaturecontainer">
{vb:raw post.signature}
</div>
</div>
</div>
 
<!-- SLIDE 2 CONTENT -->
<div id="tab2post{vb:raw post.postid}" class="tabcontent">
 <div class="info">				
<img alt="My 2nd Sig Pic" border="0" src="{vb:raw post.field5}" border="0"/>
</div>
</div>
 
<!-- SLIDE 3 CONTENT -->
<div id="tab3post{vb:raw post.postid}" class="tabcontent">
 <div class="info">
<img alt="My 3rd Sig Pic" border="0" src="{vb:raw post.field6}" border="0"/>
</div>
</div>
 
<!-- SLIDE 4 CONTENT -->
<div id="tab4post{vb:raw post.postid}" class="tabcontent">
<div class="info">
<img alt="My 4th Sig Pic" border="0" src="{vb:raw post.field7}" border="0"/>
</div>
</div>
 
<!-- SLIDE 5 CONTENT -->
<div id="tab5post{vb:raw post.postid}" class="tabcontent">
<div class="info">
<img alt="My 5th Sig Pic" border="0" src="{vb:raw post.field8}" border="0"/>
</div>
</div>

</div>
 
<script type="text/javascript">
var mytabs=new ddtabcontent("postbittabspost{vb:raw post.postid}")
mytabs.setpersist(false)
mytabs.setselectedClassTarget("link")
mytabs.init()
</script>  
</div>
</blockquote>
			</vb:if>
            <!-- Postbit Slide by TheLastSuperman end -->

[COL NIL SATIS]

This is cool..will definately be using this!!! great mod superman

[ProFifaLeagues]

Thank you Mike Another Superb Mod.
My Members love this one.

[TheLastSuperman]

Originally Posted by rammieone

Thank you Mike Another Superb Mod.
My Members love this one.

I'll be in later to see about the other mod that is causing an issue, I need to know what new mod you have installed that is hindering the Sig showcase mod then I can post for others the fix or the info that "hey this will not work if you have this other mod installed" etc.

Mike

[COL NIL SATIS]

Originally Posted by TheLastSuperman

I'll be in later to see about the other mod that is causing an issue, I need to know what new mod you have installed that is hindering the Sig showcase mod then I can post for others the fix or the info that "hey this will not work if you have this other mod installed" etc.

Mike

Mike when you get a chance will you come over and check out whats making this not work...me and rammie have bot looked but cant find the issue..cheers Col

[TheLastSuperman]

Originally Posted by COL NIL SATIS

Mike when you get a chance will you come over and check out whats making this not work...me and rammie have bot looked but cant find the issue..cheers Col

O.o I became side tracked with paid requests and work that I completely forgot to come back and check for you guys I'm sorry... let me finish up what I came on here to do i.e. find lol and I'll have a look first thing tomorrow... It has to be one of the mods you installed around that same time but if we have to I'll simply remove it and place the signature song I put in your version in your members profiles so everyone will have a nice little profile song .

Mike