To-the-top button in postbit footer.

[trilOByte]

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.

https://vborg.vbsupport.ru/external/2010/02/39.jpg

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 (https://vborg.vbsupport.ru/showthread.php?t=236167) 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! :p

[trilOByte]

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

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?

[KEKforce]

in 4.02 postbit.css is different...
Can you make an update?

[trilOByte]

ahhhaaa....

Just seen the 4.0.2 update is available. I'll install, check the .css and update the mod.

[trilOByte]

Sorted, it's no biggie. For those wanting a quick fix, just replace the image src= in ther postbit with...

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

That's it.

[trilOByte]

Mod instructions updated for 4.0.2

[RedHacker]

Thanks install in 4.0.2

[Popa Andrei]

nice modification.
thx

[Popa Andrei]

After replying to a thread with quikrepli if y pres the top button of the fresh post the page become white.
Please fix it.It`s very annoing.

[Front Range 4x4]

I occasionally also get a white page instead of the top of the page. I'm not sure why but it's intermittent at best.

[Popa Andrei]

I occasionally also get a white page instead of the top of the page. I'm not sure why but it's intermittent at best.
you get it for shure when you do wath y have told in mi upper post

[markwein]

After replying to a thread with quikrepli if y pres the top button of the fresh post the page become white.
Please fix it.It`s very annoing.

I occasionally also get a white page instead of the top of the page. I'm not sure why but it's intermittent at best.

I'm getting the same issue....

[doopz]

nice, thanks :)

[LifesGreatestGift]

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



May I make a suggestion? :)

Change:

onclick="document.location.hash='top'; return false;"

To:

onclick="window.scrollTo(0,0); return false;"


Works a lot better :)

[doopz]

I'm getting the same issue....

May I make a suggestion? :)

Change:

onclick="document.location.hash='top'; return false;"

To:

onclick="window.scrollTo(0,0); return false;"


Works a lot better :)

Would that by any change fix this problem? :)

[Popa Andrei]

May I make a suggestion? :)

Change:

onclick="document.location.hash='top'; return false;"

To:

onclick="window.scrollTo(0,0); return false;"


Works a lot better :)
wath does this exactluy do?

[markwein]

May I make a suggestion? :)

Change:

onclick="document.location.hash='top'; return false;"

To:

onclick="window.scrollTo(0,0); return false;"


Works a lot better :)

Thanks! it seems to work really well now!

[Popa Andrei]

works great.No more white pages :D

[Front Range 4x4]

Installing this mod eliminates the white pages too: https://vborg.vbsupport.ru/showthread.php?t=180330

[trilOByte]

May I make a suggestion? :)

Change:

onclick="document.location.hash='top'; return false;"

To:

onclick="window.scrollTo(0,0); return false;"


Works a lot better :)

Thanks for that.

Untested as yet, but vBulletin seem to be using...

onclick="self.scrollTo(0, 0); return false;"

Minor difference, I'll update the mod. :)

[steeler7]

Both The windows7site and trilobytes suggestions are yielding the white screen for me..

basically it happens right after you make a Quick Reply post. If you go and click the "to the top" button with that Quick Reply Post you make, it gives you a white screen

[Alec W]

Both The windows7site and trilobytes suggestions are yielding the white screen for me..

basically it happens right after you make a Quick Reply post. If you go and click the "to the top" button with that Quick Reply Post you make, it gives you a white screen


onclick="window.scrollTo(0,0); return false;" fixed it on our forum.

[steeler7]

onclick="window.scrollTo(0,0); return false;" fixed it on our forum.

Doesn't work for me. I get the same results. .. not sure if I'm doing something wrong or not..

Here's a snippet of code, if anyone can look at it and tell me where I've meesed up if I have :D

<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:raw vboptions.cleargifurl}" alt="{vb:rawphrase multi_quote_this_message}" />&nbsp;</a>
</vb:if>
<!-- ////////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////// -->
</span>

<span class="postlinking">

[Hippy]

looks correct steeler7

thanks for the mod 2 thumbs up

[trilOByte]

Both The windows7site and trilobytes suggestions are yielding the white screen for me..

basically it happens right after you make a Quick Reply post. If you go and click the "to the top" button with that Quick Reply Post you make, it gives you a white screen

Does that also happen when you do the same thing using the vbulletin "top" button just above the footer?

[Hippy]

How do I get this mod to not display in private messages

[Gero50]

Tagged thanks for the cool mod.

[steeler7]

Does that also happen when you do the same thing using the vbulletin "top" button just above the footer?

The vbulletin "top" button works fine. It'as pretty inconsistent and it only happens clicking the Top button attached to my own posts. I've been trying to see if I can pin point it and get others to try as well and no luck.

I'm thinking that maybe I'll just try a fresh install of this add-on and give it a whirl!

[kabir]

Not Work to Version 4.0.5

[EmAnh]

Not Work to Version 4.0.5

In Version 4.0.5 the code changed

All others of the author instruction are still valid and you need only change the code in "step one"

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 {vb:stylevar postbit_control_background} {vb:stylevar left};
padding: {vb:stylevar postbit_control_padding};
padding-{vb:stylevar left}: {vb:math {vb:stylevar postbit_control_padding}+20};
border: {vb:stylevar postbit_control_border};
}
.postbitlegacy .postfoot .textcontrols a.multiquote:hover, .postbit .postfoot .textcontrols a.multiquote:hover {
background: url({vb:stylevar imgdir_button}/multiquote_40b-hover.png) no-repeat {vb:stylevar postbit_control_hover_background} {vb:stylevar left};
padding: {vb:stylevar postbit_control_padding};
padding-{vb:stylevar left}: {vb:math {vb:stylevar postbit_control_padding}+20};
border: {vb:stylevar postbit_control_hover_border};
}

Under that, put:

.postbitlegacy .postfoot .textcontrols a.tothetop, .postbit .postfoot .textcontrols a.tothetop {
background: url({vb:stylevar imgdir_button}/tothetop_40b.png) no-repeat {vb:stylevar postbit_control_background} {vb:stylevar left};
padding: {vb:stylevar postbit_control_padding};
padding-{vb:stylevar left}: {vb:math {vb:stylevar postbit_control_padding}+20};
border: {vb:stylevar postbit_control_border};
}
.postbitlegacy .postfoot .textcontrols a.tothetop:hover, .postbit .postfoot .textcontrols a.tothetop:hover {
background: url({vb:stylevar imgdir_button}/tothetop_40b-hover.png) no-repeat {vb:stylevar postbit_control_hover_background} {vb:stylevar left};
padding: {vb:stylevar postbit_control_padding};
padding-{vb:stylevar left}: {vb:math {vb:stylevar postbit_control_padding}+20};
border: {vb:stylevar postbit_control_hover_border};
}

Click "save" .

------------------------------------------------------------------
The rest of instructions are same as the author instructed (first post)

[COL NIL SATIS]

tagged

[COL NIL SATIS]

rated 5 ...great stuff!!!! works a1

[Popa Andrei]

can someone make this to work with 4.0.6?

[xinnek]

I'd really like to use this, PLEASE UPDATE! This should be standard with Vbulletin.

[kingmotox]

any chance to get this to work on 4.0.7?

[markwein]

any chance to get this to work on 4.0.7?

Actually it still works on my forum...I'll see if I can copy the code today..

[markwein]

any chance to get this to work on 4.0.7?

Actually it still works on my forum...I'll see if I can copy the code today..


ook...from post_bit (i use legacy)

<!-- ////////start To-The-Top button in postbit////// -->
<span class="seperator">&nbsp;</span><a class='tothetop' href="{vb:raw relpath}#top" onclick="window.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////// -->

and the postbit.css:

.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;
}


You can see it work on my forum: http://markweinguitarlessons.com/forums/forum.php

[white demon]

...4.1.0...dont work... :(

[Fastbird]

+1 would love to see this working iin 4.1

[Sforums]

I assumed it does and ruined my site. Look what happened at the footer, can anyone help me fix this? I tried to revert templates to old settings but something happened and looks like sh1t now....

[whitedd]

...hi..i find solution...
...if you need this button more then multiquote button,dont put this codes under...overwrite them...its work on 4.1.2. ... ;)

[RedHacker]

I cant show anything in 4.1.3 Version....

[whitedd]

..in Styles & Templates>Stlye Manager>your skin>edit templates>postbit templates>postbit search for "multiquote" ...then replace
<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>

with this
<!-- ////////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////// -->

...works fine with 4.1.3 ;)

[RedHacker]

Must be Replace...? No put under this

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

[whitedd]

must be replace...if you put under dont work...

[KEKforce]

It works but I lose another function (multiquote)...

Don't want that....

[steeler7]

got this working with vB4.1.4

Here's what I did. to be honest I didn't even try this hack first since everyone was saying it didn't work. I came here to get code since I recently updated and forgot to store it in a text document. Anyways, all I did was just matched a little code with some of the existing buttons like "multiquote" and "reply" etc..

In postbit.css

Find :

.postbitlegacy .postfoot .textcontrols a.multiquote, .postbit .postfoot .textcontrols a.multiquote {
background: url({vb:stylevar imgdir_button}/multiquote-back_40b.png) no-repeat {vb:stylevar postbit_control_background} {vb:stylevar left};
padding: {vb:stylevar postbit_control_padding};
padding-{vb:stylevar left}: {vb:math {vb:stylevar postbit_control_padding}+20};
padding-bottom:1px;
border: {vb:stylevar postbit_control_border};
}
.postbitlegacy .postfoot .textcontrols a.multiquote:hover, .postbit .postfoot .textcontrols a.multiquote:hover {
background: url({vb:stylevar imgdir_button}/multiquote_40b-hover.png) no-repeat {vb:stylevar postbit_control_hover_background} {vb:stylevar left};
}

Add After :

.postbitlegacy .postfoot .textcontrols a.tothetop, .postbit .postfoot .textcontrols a.tothetop {
background: url({vb:stylevar imgdir_button}/tothetop_40b.png) no-repeat {vb:stylevar postbit_control_background} {vb:stylevar left};
padding: {vb:stylevar postbit_control_padding};
padding-{vb:stylevar left}: {vb:math {vb:stylevar postbit_control_padding}+20};
padding-bottom:1px;
border: {vb:stylevar postbit_control_border};
}

.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};
}

In postbit_legacy

Find:

<vb:if condition="$show['multiquote_post']"><span class="seperator">&nbsp;</span></vb:if>
</vb:if>
<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:raw vboptions.cleargifurl}" alt="{vb:rawphrase multi_quote_this_message}" />&nbsp;</a>
</vb:if>

Alter and Add:

<vb:if condition="$show['multiquote_post']"><span class="seperator">&nbsp;</span></vb:if>
</vb:if>
<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:raw vboptions.cleargifurl}" alt="{vb:rawphrase multi_quote_this_message}" />&nbsp;</a>
<span class="seperator">&nbsp;</span></vb:if>

Add After :

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

[spillage]

I just used steeler7's code (above) on 4.1.8.
It didn't show for me until edits to both postbit_legacy and postbit where complete.

The button shows and works fine, but the hover image does not show, only a blank space.
There isn't any text message on hover either.
Any thoughts?

This mod is marked as supported, but trilOByte hasn't posted here for close to a year, despite him having been onsite as recent as Oct... have we been abandoned?

[spillage]

Hover image not showing issue solved;
I had edited the image to add some colour to it... when I saved it, the file extension was changed to uppercase (.PNG)... on changing it back to lowercase (.png) it worked.

Still no hover text... shouldn't it show "...to the top"?

[BANDiT600]

It's nice looking modification, but who can made changes to work it on 4.1.11?

[TrIp0d]

works fine on 4.1.11 PL 1

[zascok]

nice one , thank you. Works 4.2 pl2. If only it could have a little smooth animation instead of jumping ..... :o

[datoneer]

Awesome, installed and rated

[tommyxv]

...,,,

[ozzy47]

Tommy, did you get the issue sorted with the button you were trying to add?

[harismoghal]

I am not sure but I did every thing rite and I can't see the top button
using VB 4.2.2

[ozzy47]

I am not sure but I did every thing rite and I can't see the top button
using VB 4.2.2

Try this mod, https://vborg.vbsupport.ru/showthread.php?t=314174

[harismoghal]

Try this mod, https://vborg.vbsupport.ru/showthread.php?t=314174

All right Thanks

[RedHacker]

Install in vBulletin 4.1.7 and work fine with instroductions in here : https://vborg.vbsupport.ru/showpost.php?p=2208237&postcount=55

But not show the vertical line before the image of top. Anyone to know how to add this line ?