[Release] Page Nav. Blocks

[SaintDog]

Author: TubeDogg (Modified By: SaintDog)

Description: This will teach you how to change the basic page navigation (ie: 1, 2, 3) to that of block navigation using CSS with a few template modifications (preview below).

Preview:
https://vborg.vbsupport.ru/

[Rezet]

cool...nice i was looking for this

[corsacrazy]

nice one ....its hard to click the individual numbers.... so the blocks really do make navigation easy'er cheers

[bokmade]

Thanks ^ - *

[N9ne]

how do I space them out like here? they're stuck together on mine...

[SaintDog]

The ones used here followed that exact tutorial, unless you maybe modified something, they should come out the same way :).

- SaintDog

[MalaK_3araby]

Excellent.
Installed.

[crocket]

I get no spaces too between the blocks :(

[crocket]

ahh did it :D

N9ne Revert the templates back to original, then leave pagenav alone and just replace the text in the others, replace the text only, not spaces, be careful ;)

[imported_Mike Gaidin]

I will install this one today. Great stuff!

[imported_wot-Mike]

Well, I like this one, but it could be more complete if it included the "Last Thread Next Thread" and the "Go to first post" above and below each thread on the right

[Kars10]

me too! What can the mistake be, if i get no spaces??

[element]

Woah, really cool. I'll be installing this on my board when I register my licence...

[Boofo]

I had the same problem. When you replcae each of them in the templates, make sure you put the spaces in them at the beginning on the ones that need them just like they are in the original templates. Just do a view original on each one and you should see a space at the beginning of some of them. If you play with it long enough, you can get it spaced. :)


Originally posted by globalwin
I get no spaces too between the blocks :(

[erdem]

allright great modification ... tnx sd ...
here is the bug fixes and spaces for this modification ..

Edit: Please use attachments for ease of updating the original modification.

[erdem]

allright new modifications @ the attachment
greetz
:p

[SaintDog]

Thanks - attachment updated :)

[Floris]

Try adding   as a space.

The instructions do say to copy from the beginning of the line, due to the space. Maybe you didn't do that.

I have applied this to my site and it works great! Looks very good.

[Kars10]

Thanx Erdem!!
With your new modifications it works like a charm! :p

[erdem]

Originally posted by Kars10
Thanx Erdem!!
With your new modifications it works like a charm! :p

np ...
will look to others ... when i have time ;)
greetz

[TrueVenture]

excellent work saintdog, you truly are the top dawg ;) hehe

tV

[sphinx]

yep that sorted it out many thanks

[Jean147]

Hi all, first of all, a real great site. Fantastic Design and lots of Information :)

The question I have is, where do I have to put in the Template?. In all templates I have?

[SaintDog]

All you do is simply edit the templates described in the tutorial and make it so that the templates listed look as they do in the tutorial.

[Jean147]

yeah got it. what a pain :o :o :o

[Jean147]

Keep the excellent work. Great Hack :)

[imported_Niloc]

Thanks Im going to install this right now!

[Pady]

this is installed nicely on my board - thanx

[TrAsTiOn]

k
i have inserted all of the code that is needed then when i get into the headinclude stuff that needs to be inserted where do u put it?
do u put it right under: }
.thtcolor {
COLOR: {#4b4d5e}; thanx fer any help

[Trust]

Wow this looks great...Very much thx..:)

[Kai Bo]

Can i know what problem i got?

[Trust]

You writed something wrong...or you doens't copy it right...it's an error with the script...

[*^*Blue^Dan*^*]

thanks

cool

[Kai Bo]

################################################## ######
#### Page Navigation Blocks
#### By: TubeDogg modified by erdem
#### For: vBulletin Version 2.x.x
#### Downloaded From: vBulletinTemplates.com
################################################## ######

This template modification will change your current page navigation to a blocked
page navigation (such as that used at vBulletinTemplates). To make this work
you need to change the current coding in each template, to the below coding:
allright great modification ... tnx sd ...
here is the bug fixes and spaces for this modification ..

new modification list :
(copy from the line beginning... cause i put spaces to fit ur needs )

~ pagenav:
<!--Pages ($totalpages): --><b>$firstlink $prevlink $pagenav $nextlink $lastlink</b>

~ pagenav_curpage:
<span cl***="pagenumstatic">$curpage</span>

~ pagenav_firstlink:
<span cl***="pagenum"><a href="$address&pagenumber=$curpage">?/a></span>

~ pagenav_lastlink:
<span cl***="pagenum"><a href="$address&pagenumber=$curpage">?/a></span>

~ pagenav_nextlink:
<span cl***="pagenum"><a href="$address&pagenumber=$nextpage">?/a></span>

~ pagenav_pagelink:
<span cl***="pagenum"><a href="$address&pagenumber=$curpage">$curpage</a></span>

~ pagenav_prevlink:
<span cl***="pagenum"><a href="$address&pagenumber=$prevpage">?/a></span>


Now, after you have modified the above templates, you will need to add the below to your
"headinclude" template
(for making boxes color to board compatible new headinclude modification)


.pagenumstatic {
color: #000000;
background-color: {secondaltcolor};
border-color: #000000;
border-style: solid;
border-width: 1px;
margin: 0px;
padding: 0px;
padding-left: 4px;
padding-right: 4px;
padding-top: 1px;
padding-bottom: 1px;
width: 1em;
text-decoration: none;
}
.pagenum A:link, .pagenum A:visited, .pagenum A:active {
color: #000088;
background-color: {categorybackcolor};
border-color: #000000;
border-style: solid;
border-width: 1px;
margin: 0px;
padding: 0px;
padding-left: 4px;
padding-right: 4px;
padding-top: 1px;
padding-bottom: 1px;
width: 1em;
text-decoration: none;
}
.pagenum A:hover {
color: #000000;
background-color: {secondaltcolor};
text-decoration: none;
border-color: #000000;
border-style: solid;
border-width: 1px;
margin: 0px;
padding: 0px;
padding-left: 4px;
padding-right: 4px;
padding-top: 1px;
padding-bottom: 1px;
width: 1em;
text-decoration: none;
}
.cat A:link, .cat A:visited, .cat A:active {
color: {linkcolor};
text-decoration: none;
}
.cat A:hover {
color: {hovercolor};
text-decoration: underline;
}


thats all ...
greetz!
erdem


this is i download from here...
i dont know why have some "?/a>" inside...
i guess this is my problem. and i am using Chi Windows.

[B2S]

cool...nice i was looking for this

[Kai Bo]

b4 i use winXP to read it have "?" inside...
this time i use win98 .. Display " "

[Andrew Tatum]

Hey people, I'm pretty new here, and I just installed this hack and am having a problem here. For some reason, there is a gray area near my buttons. If anyone can help me out, please let me know. Thank you:

Example:

http://www.finheaven.com/boardvb2/showthread.php?s=&threadid=4617&perpage=15&display=&pagenumber=3

[noelmd2001]

i posted this plea for help in the template mod support, but was not able to get any response. hope it's okay if i post it here...

i followed the instrcutions very carefully.

i got the page navigation blocks working for several days, then when i was putting in some hacks, i finally found that my page nav blocks are not what they should appear to be.

i don't have any idea what happened. i edited the templates again and again, checking each time, and still the same results.

guys, do you have any idea where the problem might be?

this is how my page blocks look like.... (see attached)

thank you. though the page navigation is working, i of course want it to work really well (as in vbt). adance thanks guys...

this forum really rocks!

[SaintDog]

The background you have there is not free for use, stealing images from vBT is no way to get any support (in fact, it is a great way to be banned from the community and website alltogether).

:rolleyes:

[noelmd2001]

Originally posted by SaintDog
The background you have there is not free for use, stealing images from vBT is no way to get any support (in fact, it is a great way to be banned from the community and website alltogether).

:rolleyes:

sorry..but i realized that early enough after i posted this plea...

i apologize again... i just tested the background with the hope of putting a similar one myself...

i changed the background and textareas to this (see attachment)...

again my apologies if i caused confusion and hurt...

this site really rocks and would not do anything to lose this privelege...

[Martin64]

Nice one. Installed. :)

[Ethics]

well the last part where it says... "Now, after you have modified the above templates, you will need to add the below to your
"headinclude" template
(for making boxes color to board compatible new headinclude modification)"

do i replace it or do i put it under? because i tried placing it under and i got a bunch of text on top of my forum which looked really bad, where do i insert the last part?

[c-pr0mpt]

Ethics: Insert it directly above this


</style>

[Ethics]

thank you :)

[c-pr0mpt]

No prob :)

[rukasu]

This rawks!

[TheLink]

where do I put the bottom part in the headinclude area? Whats it go under?

[SaintDog]

See above 2-3 posts :)

[AxelRos3]

Hi Kai Bo, i dont know if im wrong or right but i think this is the problem

~ pagenav_firstlink:
<span cl***="pagenum"><a href="$address&pagenumber=$curpage">?/a></span>

~ pagenav_lastlink:
<span cl***="pagenum"><a href="$address&pagenumber=$curpage">?/a></span>

~ pagenav_nextlink:
<span cl***="pagenum"><a href="$address&pagenumber=$nextpage">?/a></span>

~ pagenav_pagelink:
<span cl***="pagenum"><a href="$address&pagenumber=$curpage">$curpage</a></span>

~ pagenav_prevlink:
<span cl***="pagenum"><a href="$address&pagenumber=$prevpage">?/a></span>



see where it says:

~ pagenav_prevlink:
<span cl***="pagenum"><a href="$address&pagenumber=$prevpage">?/a></span>

i think you need to change the

">?/a></span>

to

">?</a></span>

its missing the <

if im wrong sorry, but thats how it looks to me.

[eGoR]

I was requesting it ages ago and ppl were telling what its DHTML applet.. arghh ey...

thx, m8

[Loxias]

Cool mod guys....I too have a question though. I tried putting a link to the css code into an external style sheet, however it doesn't work. Anyone have any ideas or suggestions?

This is the link I put in my headinclude

<link href="styles.css" rel="stylesheet" type="text/css">

Thanks for the help!

[ZiRu$]

INSTALLED! thx

[K33nny]

Cool mod guys....I too have a question though. I tried putting a link to the css code into an external style sheet, however it doesn't work. Anyone have any ideas or suggestions?

This is the link I put in my headinclude

<link href="styles.css" rel="stylesheet" type="text/css">


Thanks for the help!


The style sheet calls for variables from vB and if the file is external those variables can be read so everything is discarded and none of the CSS works such as colors, font sizes, & so forth.

I'm so tired, my explanation is crap. Hopefully it somehow helps you understand.

[Loxias]

Originally posted by k33nny


The style sheet calls for variables from vB and if the file is external those variables can be read so everything is discarded and none of the CSS works such as colors, font sizes, & so forth.

I'm so tired, my explanation is crap. Hopefully it somehow helps you understand.


Understood perfectly. I'm having other weird problems now that I've actually implemented it. I've reapplied it 3 or 4 times and everytime it's a different issue. Sometimes I only get the blocks only onmouseover, sometimes I only get a block for the active page. Gotta figure out where I'm messing this up.

Anyway, thanks for the reply.

[noelmd2001]

i have the same problem....

still hasn't solve it too...and i don't know what to do...

[Loxias]

Figured it out....I was using the image name in the Styles | Colors option i.e.

#FFFFFF" background="blah.gif"

So if you're doing that take out the image name and try it. Thought I had already done that, but I guess not.

[noelmd2001]

Originally posted by Loxias
Figured it out....I was using the image name in the Styles | Colors option i.e.

#FFFFFF" background="blah.gif"

So if you're doing that take out the image name and try it. Thought I had already done that, but I guess not.

where exactly is this Styles | Colors option?

tell me please. i have to get my page na blocks working...

thanks...

[mashby]

Originally posted by noelmd
where exactly is this Styles | Colors option?

1. Log in to your Admin Control Panel.

2. Browse down the navigation on the left for a section called "Styles"

3. Select the "modify" option

4. Select the "[fonts/colors/etc]"

5. Scroll down to your "Color Options" and make the changes you wish to make there.

[fraqheart]

&nbsp;&nbsp;&nbsp;&nbsp;Lol. Good suggestion mashby. I just installed and modded this to fit the Chatter Phorums. Check it out here (http://chatter.phorums.net/showthread.php?s=&threadid=31). Tell me what you think. Thanks Saint.

~ Anthony ~

[Trekkie]

Thank you

[Trekkie]

Originally posted by Loxias
Figured it out....I was using the image name in the Styles | Colors option i.e.

#FFFFFF" background="blah.gif"

So if you're doing that take out the image name and try it. Thought I had already done that, but I guess not.

To solve the Problem search for {categorybackcolor} and put your Hex Code instead of that

now the blocks are working

[Fresco]

I got a problem with this..
i installed everything but at my forum it just says 123 but when you go over it it suddenly becomes a box :S what did i do wrong? :(


[ re-did it 2 times :(]

[Velocd]

Nice addition :D

[Velocd]

For some reason this modification doesn't wanna work correctly on my forum. I've done the spaces and what not all correctly, yet it's looking as it does in the screenshot I've attached.

Any help would be great :D

[Mclaren]

Originally posted by Fresco
I got a problem with this..
i installed everything but at my forum it just says 123 but when you go over it it suddenly becomes a box :S what did i do wrong? :(


[ re-did it 2 times :(]

The same happened with me...... the mod only worked in the Netscape Browser, in the IE not worked the way it supposted to be

can somebody help us...... thanks.......

[flip]

thnx alot i like it :)

[LoRDsTaR]

Thanks!!!! -> installed

[Av3ng3r]

cool template mod , thanks keep it up :)

[NickieNonstop]

Hi ya VB'ers out there!!! :)

Got a problem with this absolutely great modification (W0o0o0oho0o0o0ow!!)... Maybe you guys can help me out on this one...

I modified the templates just as you told, but I don't get the boxes around the pagenumbers!!!!!!

Got a screenshot here (http://forum.partygangers.nl/showthread.php?threadid=4)


And my headinclude is attached...

Thanx in advance!!!!!

NickieNonstop
Partygangers.NL (http://www.partygangers.nl)

[Red Shadow]

i finally found this!!

[Richy T.]

Awesome modification. Total rookie here and with all of your posts on the little probs I was able to knock this out in 10 minutes.

Thanks.

[alkatraz]

I noticed this mod on this board and said "I've got to find that!"

Thanks!!

PS: Installed without any probs

[Smoothie]

Works and looks nice. Thanks for this...

[Zehlek]

Excellent job, thanks?

[jackos]

Great ! thx

[imported_Speedy]

All of theses poeple love this hack, and I do to lol, but look what it does when I add the hack, it just doesn't look right for some strange reason :(


\\ - Speedy- //


PS sorry I forgot to had this, how can I make this look more readable I guess is what I want to say lol

[imported_Speedy]

I hope bumping is aload :S

*BUMP*

\\ - Speedy - //

[bonnmac]

Thanks :) This really makes a nice addition. Much appreciated

[sonic3d]

i having trouble with this too. i installed this hack b4 and it worked flawlessly but i un-installed it for some reason. now i am re-installing it but it doesn't work. there isn;t ne boxes whatso ever. i put the code in the header insert correct. dunno whats the problem. cna ne1 help me?

l8er
sonic

[Zehlek]

Thanks it works great!!!

[CaMi]

worked
awesome
:)

[guest dude]

If people havent figured it out and still get the space between the blocks, here's wut u do...

in pagenav_pagelink, u should have...
<span class="pagenum"><a href="$address&pagenumber=$curpage">$curpage</a></span>

Well replace it with...
<span class="pagenum"><a href="$address&pagenumber=$curpage">$curpage</a></span>&nbsp


It should work, it worked for me.

[Vray]

nice hack

[Popa'Doc]

sweet thx man
this is a great little template

[imageconstrux]

This is my first template mod on my new board! Makes it much easier on the >20yr old eyes, easier to click.

Thanks for the great mod!

*clicks install*

Jeff

[Splitz]

how do you get them to hover

[imported_ULTIMATESSJ]

Originally posted by Fresco
I got a problem with this..
i installed everything but at my forum it just says 123 but when you go over it it suddenly becomes a box :S what did i do wrong? :(


[ re-did it 2 times :(]

i'm getting this problem as well, so anyone gonna answer this sometime soon

[crusades]

vey nice thank's!!!

[Orfejs]

great

[dstruct2k]

I have no clue what you guys are doing wrong, because mine worked great. Now I'm gonna look in to finding some styles for cheap (free, I hope lol) that have support for vBPortal. They're not easy to find, and I can't buy them. (My vBulletin was a gift from a friend... :D He's awesome lol) If only I was old enough to have a PayPal account....

My site! (http://www.focalpoint.tk/)

[chiel]

I'm trying to install this hack but I find I verry hard to understand. What templates must I edit?

Its says:"Now, after you have modified the above templates" but what templates are that??

[imported_XrayHead]

Installed with no probs. I left the pagenav one alone as i liked it more.
Thanks for the mod.

Xrayhead

PS, I think you should cange the txt file to say [replace the code with this].

[chiel]

Is there maybe a original tread for this?? maybe on vbulletin.org?

[mcyates]

NOT WORKING
http://www.myfootballforum.com/discussion/showthread.php?s=&threadid=2923

Its just numbers again, i have changed all the code and below is my headerinclude:

<meta http-equiv="MSThemeCompatible" content="Yes">
<script language="Javascript">
function *****gister() { window.open
("*****gister.php?s=&action=*****gistered",
"*****gistered", "toolbar=no,scrollbars=yes,resizable=yes,width=240, height=400"); }
</script>
<style type="text/css">
BODY {
background-color:#CBDBED;
SCROLLBAR-BASE-COLOR: {categorybackcolor};
SCROLLBAR-ARROW-COLOR: {categoryfontcolor};
}
SELECT {
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
FONT-SIZE: 11px;
COLOR: #000000;
BACKGROUND-COLOR: #CFCFCF
}
TEXTAREA, .bginput {
FONT-SIZE: 12px;
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
COLOR: #000000;
BACKGROUND-COLOR: #CFCFCF;
BACKGROUND-IMAGE: url("http://www.myfootballforum.com/image.gif");
BORDER: 1px dotted #5182C2;
A:link, A:visited, A:active {
COLOR: {linkcolor};
}
A:hover {
COLOR: {hovercolor};
}
#cat A:link, #cat A:visited, #cat A:active {
COLOR: {categoryfontcolor};
TEXT-DECORATION: none;
}
#cat A:hover {
COLOR: {categoryfontcolor};
TEXT-DECORATION: underline;
}
#ltlink A:link, #ltlink A:visited, #ltlink A:active {
COLOR: {linkcolor};
TEXT-DECORATION: none;
}
#ltlink A:hover {
COLOR: {hovercolor};
TEXT-DECORATION: underline;
}
.thtcolor {
COLOR: {tableheadtextcolor};
}
.pageNum {color: #ffffff; background-color: #808080; border-color: #000000; border-style: solid; border-width: 1px; margin: 0px; padding: 0px; padding-left: 4px; padding-right: 4px; width: 1em;}
a.pageNum {color: #0000ff; background-color: #e0e0e0;}
a.pageNum:hover {color: #ffffff; background-color: #a0a0a0;}


.pagenumstatic {
color: #000000;
background-color: {secondaltcolor};
border-color: #000000;
border-style: solid;
border-width: 1px;
margin: 0px;
padding: 0px;
padding-left: 4px;
padding-right: 4px;
padding-top: 1px;
padding-bottom: 1px;
width: 1em;
text-decoration: none;
}
.pagenum A:link, .pagenum A:visited, .pagenum A:active {
color: #000088;
background-color: {categorybackcolor};
border-color: #000000;
border-style: solid;
border-width: 1px;
margin: 0px;
padding: 0px;
padding-left: 4px;
padding-right: 4px;
padding-top: 1px;
padding-bottom: 1px;
width: 1em;
text-decoration: none;
}
.pagenum A:hover {
color: #000000;
background-color: {secondaltcolor};
text-decoration: none;
border-color: #000000;
border-style: solid;
border-width: 1px;
margin: 0px;
padding: 0px;
padding-left: 4px;
padding-right: 4px;
padding-top: 1px;
padding-bottom: 1px;
width: 1em;
text-decoration: none;
}
.cat A:link, .cat A:visited, .cat A:active {
color: {linkcolor};
text-decoration: none;
}
.cat A:hover {
color: {hovercolor};
text-decoration: underline;
}



</style>

$headnewpm

[dstruct2k]

Ok, now I need help. My vBulletin had to be reinstalled, and now this isn't working properly. It's centered. Here's a multi-page thread (http://focalpoint.sytes.net/forums/showthread.php?s=&postid=26#post26) that I'm having problems with, showthread avaliable upon request.

[dstruct2k]

Never mind, I reverted the showthread template back to original, and then re-added the Quick-Reply hack. Works fine now.

[imported_Someguy]

no offense, but couldn't all these silly little problems go away (the spaces) with a &nbsp; in the doc?

[Mickie D]

PUCKA

thanks so much cant find this install button i keep reading about if i could i would have pressed it ages ago

thanks so much super dooper mod this is

[Vb-Hispano]

hello

is valid for vb3?

[dstruct2k]

PUCKA

thanks so much cant find this install button i keep reading about if i could i would have pressed it ages ago

thanks so much super dooper mod this is
Been reading old posts, I see. The install button ran away with vB 2.3.0 when they upgraded vBT.

[MrNase]

great one :)

iam using this for the "last Thread" & "next Thread" Feature too :)

Demo: http://www.sportboard.de/v2/showthread.php?s=&goto=lastpost&forumid=129 (bottom)

[Areku]

How come u removed this so cool hack from this site???

I dont mean the attach, but the fact of vbulletintemplates.com board using it!

[Floris]

Probably because it hasn't been ported or re-released for version 3 yet :)

You might be suprised some time this week :)

[azmi]

it works very well, but....

how can i disable the space, when there is the "next link"
looks like:
|1|2|3|4|5|Spacer|>| Spacer |>>|

[trekwarfare]

Nice! Thank You!

[imported_GLO]

Author: TubeDogg (Modified By: SaintDog)

Description: This will teach you how to change the basic page navigation (ie: 1, 2, 3) to that of block navigation using CSS with a few template modifications (preview below).

Preview:
http://www.vbulletintemplates.com/mods/previews/blocknav.gif

Where is the preview??

Thanks