vb.org Archive - Miscellaneous Hacks - To-the-top button in postbit footer.

Page 1 of 2

Show 40 post(s) from this thread on one page

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

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

- - Miscellaneous Hacks - To-the-top button in postbit footer. (https://vborg.vbsupport.ru/showthread.php?t=235530)

trilOByte

02-09-2010 10:00 PM

To-the-top button in postbit footer.

1 Attachment(s)

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"):

HTML Code:

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

HTML Code:

.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"):

HTML Code:

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

HTML Code:

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

02-10-2010 07:06 PM

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

HTML Code:

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

02-10-2010 07:12 PM

Top ;)

cbiweb

02-10-2010 07:55 PM

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

02-10-2010 08:11 PM

Quote:

Originally Posted by cbiweb (Post 1979429)

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

02-13-2010 06:40 PM

Thanks you, excellent & installed!

OturanBoğa

02-14-2010 09:53 AM

Thank you

trilOByte

02-14-2010 05:16 PM

Welcome fellas. :)

Jabong82

02-17-2010 05:06 AM

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

02-17-2010 11:05 AM

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

02-17-2010 05:13 PM

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

trilOByte

02-17-2010 05:40 PM

ahhhaaa....

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

trilOByte

02-17-2010 07:48 PM

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

HTML Code:

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

That's it.

trilOByte

02-17-2010 07:56 PM

Mod instructions updated for 4.0.2

RedHacker

02-19-2010 10:36 AM

Thanks install in 4.0.2

Popa Andrei

02-23-2010 04:41 PM

nice modification.
thx

Popa Andrei

03-16-2010 11:59 PM

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

03-17-2010 12:47 AM

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

03-17-2010 01:11 AM

Quote:

Originally Posted by Front Range 4x4 (Post 2005152)

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

03-17-2010 01:40 AM

Quote:

Originally Posted by stormzone (Post 2005129)

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.

Quote:

Originally Posted by Front Range 4x4 (Post 2005152)

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

03-18-2010 01:05 PM

nice, thanks :)

LifesGreatestGift

03-19-2010 05:58 AM

Quote:

Code:

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

03-19-2010 01:32 PM

Quote:

Originally Posted by markwein (Post 2005186)

I'm getting the same issue....

Quote:

Originally Posted by TheWindows7Site (Post 2006299)

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

03-19-2010 02:43 PM

Quote:

Originally Posted by TheWindows7Site (Post 2006299)

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

03-19-2010 09:38 PM

Quote:

Originally Posted by TheWindows7Site (Post 2006299)

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

03-20-2010 12:37 AM

works great.No more white pages :D

Front Range 4x4

03-20-2010 12:48 AM

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

trilOByte

05-13-2010 09:50 PM

Quote:

Originally Posted by TheWindows7Site (Post 2006299)

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

05-14-2010 04:09 PM

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

05-20-2010 06:47 PM

Quote:

Originally Posted by steeler7 (Post 2036999)

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

steeler7

06-02-2010 03:39 PM

Quote:

Originally Posted by Alec W (Post 2040704)

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

Code:

<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

06-03-2010 12:45 AM

looks correct steeler7

thanks for the mod 2 thumbs up

trilOByte

06-03-2010 12:35 PM

Quote:

Originally Posted by steeler7 (Post 2036999)

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

Hippy

06-03-2010 11:27 PM

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

Gero50

07-07-2010 03:18 AM

Tagged thanks for the cool mod.

steeler7

08-04-2010 08:02 PM

Quote:

Originally Posted by trilOByte (Post 2047613)

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

08-09-2010 04:22 AM

Not Work to Version 4.0.5

EmAnh

08-12-2010 03:32 AM

Quote:

Originally Posted by kabir (Post 2081162)

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"):

HTML Code:

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

HTML Code:

.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

09-01-2010 02:30 PM

tagged

COL NIL SATIS

09-01-2010 04:50 PM

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

All times are GMT. The time now is 06:08 PM.

Page 1 of 2

Show 40 post(s) from this thread on one page

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.02519 seconds Memory Usage 1,849KB 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 (2)bbcode_code_printable (8)bbcode_html_printable (15)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: