Miscellaneous Hacks - To-the-top button in postbit footer.

This simple mod does what is says on the tin, it adds a Top button in the postbit footer using the vBulletin 4.0.2 css convention for mouseover buttons.

Note: This mod is NOT compatible with vBulletin 4.0.1 or earlier.



This is a mod I've always used because, as simple as it may be, a Top button in the bottom right of each postbit, can dramatically speed up the navigation of your site. No more spinning that mouse wheel trying to get back to the menus.

There are...
1x addition to the postbit.css template
1x addition to the posbit (and/or postbit_legacy) template
2x images to upload

INSTRUCTIONS:
1x additions to he posbit.css template
Go to..
Styles & Templates>Stlye Manager>your skin>edit templates>CSS templates>postbit.css
----------------------------------------------------------------------
Find (search for "multiquote"):

.postbitlegacy .postfoot .textcontrols a.multiquote, .postbit .postfoot .textcontrols a.multiquote  {
	background: url({vb:stylevar imgdir_button}/multiquote-back_40b.png) no-repeat transparent {vb:stylevar left};
	padding-{vb:stylevar left}: 20px;
}
.postbitlegacy .postfoot .textcontrols a.multiquote:hover, .postbit .postfoot .textcontrols a.multiquote:hover  {
	background: url({vb:stylevar imgdir_button}/multiquote_40b-hover.png) no-repeat transparent {vb:stylevar left};
	padding-{vb:stylevar left}: 20px;
}

Under that, put:

.postbitlegacy .postfoot .textcontrols a.tothetop, .postbit .postfoot .textcontrols a.tothetop  {
	background: url({vb:stylevar imgdir_button}/tothetop_40b.png) no-repeat transparent {vb:stylevar left};
	padding-{vb:stylevar left}: 20px;
}
.postbitlegacy .postfoot .textcontrols a.tothetop:hover, .postbit .postfoot .textcontrols a.tothetop:hover  {
	background: url({vb:stylevar imgdir_button}/tothetop_40b-hover.png) no-repeat transparent {vb:stylevar left};
	padding-{vb:stylevar left}: 20px;
}

----------------------------------------------------------------------
Click "save".

1x addition to the posbit (and/or postbit_legacy) template:
Now navigate to..
Styles & Templates>Stlye Manager>your skin>edit templates>postbit templates>postbit
----------------------------------------------------------------------
Find (search for "multiquote"):

<vb:if condition="$show['multiquote_post']">
					<a class='multiquote' href="{vb:raw post.replylink}" rel="nofollow" onclick="return false;" 

id="mq_{vb:raw post.postid}"><img id="mq_image_{vb:raw post.postid}" src="{vb:stylevar imgdir_button}/trans_40b.png" 

alt="{vb:rawphrase multi_quote_this_message}" />&nbsp;</a>
				</vb:if>

Under that, put:

<!-- ////////start To-The-Top button in postbit////// -->
<span class="seperator">&nbsp;</span><a class='tothetop' href="{vb:raw relpath}#top" onclick="self.scrollTo(0, 0); return false;"><img src="{vb:raw vboptions.cleargifurl}" alt="...to the top" />{vb:rawphrase top}</a>
<!-- ////////end To-The-Top button in postbit////// -->

----------------------------------------------------------------------
Click "save".

2x images to upload:
FTP into your forum/images/buttons dir and upload these two attached images:
----------------------------------------------------------------------
tothetop_40b.png
tothetop_40b-hover.png
----------------------------------------------------------------------

That's it.

[trilOByte]

Arrow Images:
You can use whatever arrow images you like, but make sure they have transparent backgrounds and save them as transparent .png files and ....be very careful about changing the image file names (see below).

Some things about css function:
In vB 4.0.1, all the rollover images in the postbit footer pointed to "/trans_40b.png". The upgrade to 4.0.2 has seen some changes to the css and now all the buttons point to..

src="{vb:raw vboptions.cleargifurl}"

The clear.gif acts as a hook or transparent "wrapper" usually in the root dir - do not edit, move or delete it or you will break all of the rollover images. The actual image names are defined in the postbit.css template ONLY. Also, whatever images you use, they should follow the naming convention...

*********_40_b.png (the image displayed under normal circumstances)
*********_40b-hover.png (the image displayed on mouseover)

If you use different image names than those I've supplied, or are using this as the basis for other button mods, then make sure your choice of image names is reflected in the postbit.css template. In the postbit itself, all the buttons should point to src="{vb:raw vboptions.cleargifurl}".

This can be used as the basis for any css button mod in the postbit foot and follows the vB4* css conventions. It should make things like adding a "Send PM" button pretty straightforward.

[KEKforce]

Top

[cbiweb]

Ginormous kudos to you for this mod! I tried adding some custom buttons to the postbit myself, and decided to come back to it when I had time to sort it out. Thank the code gods you did all the work for me!

[trilOByte]

Originally Posted by cbiweb

Ginormous kudos to you for this mod! I tried adding some custom buttons to the postbit myself, and decided to come back to it when I had time to sort it out. Thank the code gods you did all the work for me!

Lynne did most of the work in the end, but you're welcome. Half the battle is getting your head round the logic. Once that is known and understood, it's pretty simple.

[Front Range 4x4]

Thanks you, excellent & installed!

[OturanBoğa]

Thank you

[trilOByte]

Welcome fellas.

[Jabong82]

Installed!

I have a question though.

Is this "Top" only supposed to appear next to the multi-quote icon on the lower right hand side of the post?

I'm asking because I only have the word "Top" there with no arrow. Is there supposed to be another symbol in the actual Postbit_Legacy itself?

Thanks in advance.

[trilOByte]

Yes, there is a rollover "arrow" that turns pale blue on mouseover. Did you upload the images from the zip file to your /images/buttons/ directory?