PDA

View Full Version : Forum Home Enhancements - Category Layout like vBulletin 4


Sofia
23 Jun 2009, 19:46
Kier (http://www.vbulletin.com/forum/member.php?u=1034)
"The forum home page was the first complete page I built, and looking back at it now there are some bits of it that look a little out-of-place next to some of the more recent design elements I've built. Right now, it's using the same iconography as vBulletin 3, though I have produced new, larger versions of the images with alpha transparency from my original masters so they work a lot better on variable backgrounds.

As you can see, the forumbits have moved on from their column-based layout that was used in vB1, vB2 and vB3. The new design is less rigid and allows whitespace to imply connections between data items rather than enforcing encapsulation with heavy borders or backgrounds.

Forum titles and icons are made much larger and more prominent, as these are the primary points of reference for the forums. Information such as the number of contained threads and posts is demoted to a floating line of de-emphasized data to the right of the title while last post information gets a line all to itself in order to allow thread titles to be shown without the excessive wrapping that would invariably come from the small container available in vB3. "

http://www.vbulletin.org/forum/vborg_miscactions.php?do=installhack&threadid=216937


This is not the original code of vBulletin 4

With category spacing


https://www.vbulletin.org/forum/


Without category spacing


https://www.vbulletin.org/forum/




Before templates modifications - Note

If you have a customized style, please save the original code of your templates before doing these modifications.
This mod is adapted to default style, so you may have problems or the code to be found can differ if you have a customized style.






Only Without category spacing
In the template "forumhome"

Find:




<!-- main -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr align="center">
<td class="thead">&nbsp;</td>
<td class="thead" width="100%" align="$stylevar">$vbphrase[forum]</td>
<td class="thead">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
</thead>
$forumbits
<tbody>

Replace by:

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">

$forumbits
<tbody>Only if you want category spacing
In the template "forumhome"

[LEFT]
Find:



<!-- main -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr align="center">
<td class="thead">&nbsp;</td>
<td class="thead" width="100%" align="$stylevar">$vbphrase[forum]</td>
<td class="thead">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
</thead>
$forumbits
<tbody>
<tr>
<td class="tfoot" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong>
<a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a>
<if condition="$vboptions['forumleaders']">&nbsp; &nbsp;
<a href="showgroups.php$session[sessionurl_q]">$vbphrase[view_forum_leaders]</a></if>
</strong></div></td>
</tr>
</tbody>
</table>
$forumhome_markread_script
<!-- /main -->

Replace by:


<!-- main -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">

$forumbits
<tbody>
</table>

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="tfoot" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong>
<a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a>
<if condition="$vboptions['forumleaders']">&nbsp; &nbsp;
<a href="showgroups.php$session[sessionurl_q]">$vbphrase[view_forum_leaders]</a></if>
</strong></div></td>
</tr>
</tbody>
</table>
$forumhome_markread_script
<!-- /main -->In the template "forumdisplay"

[LEFT]Find:



<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr align="center">
<td class="thead">&nbsp;</td>
<td class="thead" width="100%" align="$stylevar">$vbphrase[forum]</td>
<td class="thead">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions[showmoderatorcolumn]">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
</thead>
$forumbits
</table>

Replace by:

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
$forumbits
</table> In the template forumhome_forumbit_level2_post,

[LEFT]Replace all your code by:



<tr align="center">
<td class="alt1Active" width="100%">

<span style="float: right;">Threads: $forum[threadcount] &nbsp; Posts: $forum[replycount] &nbsp; <br /><if condition="$vboptions['showmoderatorcolumn']">Moderators: $forum[moderators]</if></span>


<div style="float: left;"></div>

<span style="float: left;"><img src="$stylevar[imgdir_statusicon]/$forum[imageprefix]forum_$forum[statusicon].gif" alt="" border="0" id="forum_statusicon_$forum[forumid]" />&nbsp; &nbsp; </span>
<div style="float:left;">


<div align="left">
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]</strong></a></div>

<if condition="$show['browsers']"><span class="smallfont">(<phrase 1="$forum">$vbphrase[x_viewing]</phrase>)</span></if>

<if condition="$show['forumdescription']"><div class="smallfont">
<div align="left">$forum[description]</div></div></if>


<if condition="$show['forumsubscription']"><div class="smallfont" style="margin-top: 6px;">
<div align="left"><strong><a href="subscription.php?$session[sessionurl]do=removesubscription&amp;f=$forum[forumid]" rel="nofollow">$vbphrase</a></strong></div></div></if>

<if condition="$show['subforums']"><div class="smallfont" style="margin-top:$stylevar[cellpadding]px"><div align="left"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></div></if>


</div>

</td>

</tr>
<tr><td class="alt2"><div align="right">$forum[lastpostinfo]</div></td></tr>
$childforumbitsIn the template forumhome_forumbit_level1_post,

[B]
Replace all your code by:




<if condition="!$show['collapsable_forums']">
<tbody>
</if>

<tr align="center">

<td class="alt1Active" width="100%">

<span style="float: right;">Threads: $forum[threadcount] Posts: $forum[replycount]
</span>

<div style="float: left;"></div>
<span style="float: left;"><img src="$stylevar[imgdir_statusicon]/$forum[imageprefix]forum_$forum[statusicon].gif" alt="" border="0" id="forum_statusicon_$forum[forumid]" />&nbsp;&nbsp; </span>



<div align="left" id="f$forum[forumid]">
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]</strong></a></div>
<if condition="$show['browsers']"><span class="smallfont">(<phrase 1="$forum">$vbphrase[x_viewing]</phrase>)</span></if>
</div>

<if condition="$show['forumdescription']"><div class="smallfont">
<div align="left">$forum[description]</div></div></if>

<if condition="$show['forumsubscription']"><div class="smallfont"><div align="left">

<strong><a href="subscription.php?$session[sessionurl]do=removesubscription&amp;f=$forum[forumid]" rel="nofollow">$vbphrase</a></strong></div></div></if>
<if condition="$show['subforums']"><div class="smallfont" style="margin-top:$stylevar[cellpadding]px"> <div align="left"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></div></if>
</tr>
<tr>
<td class="alt2" colspan="2"><div align="right">$forum[lastpostinfo]</div></td></tr>

<if condition="!$show['collapsable_forums']">
</tbody>
</if>

<if condition="$childforumbits">
<if condition="!$show['collapsable_forums']">
<tbody>
</if>
$childforumbits
<if condition="!$show['collapsable_forums']">
</tbody>
</if>
</if>[U][B]In your template forumhome_lastpostby,
[U]Replace all your code by:



<if condition="$show['lastpostinfo']">
<div class="smallfont" style="float:right;">
<div style="float:left;">
<span style="white-space:nowrap"><strong>Last post:</strong>&nbsp;
<if condition="$show['icon']"><img class="inlineimg" src="$icon[iconpath]" alt="$icon[title]" border="0" /></if>
<if condition="$lastpostinfo['prefix']">
$lastpostinfo[prefix]
</span><if condition="is_browser('safari')"><!--bug#24775-->&nbsp;</if>
<span style="white-space:nowrap">
</if>
<a href="showthread.php?$session[sessionurl]goto=newpost&amp;t=$lastpostinfo[lastthreadid]" style="white-space:nowrap" title="<phrase 1="$lastpostinfo[lastthread]">$vbphrase[go_first_unread_in_thread_x]</phrase>"><strong>$lastpostinfo[trimthread]</strong></a></span>
&nbsp;</div>
<div style="float:left;<if condition="is_browser('ie', 6)">; float:$stylevar[left]</if>">
<phrase 1="member.php?$session[sessionurl]find=lastposter&amp;f=$lastpostinfo[forumid]" 2="$lastpostinfo[lastposter]">$vbphrase</phrase>
</div>
<div style="float:left;">&nbsp;
$lastpostinfo[lastpostdate] <if condition="!$show['detailedtime']"><span class="time">$lastpostinfo[lastposttime]</span></if>

</div>
</div>
<else />
<div class="smallfont" style="float:right;">
$lastpostinfo[lastpostdate] <if condition="!$show['detailedtime']"><span class="time">$lastpostinfo[lastposttime]</span></if>

</div>
</if>[B]Only if you want category spacing
In your template forumhome_forumbit_level1_nopost,



Replace all your code by:

<if condition="!$show['collapsable_forums']">
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tbody>
</if>
<tr>
<td class="tcat" colspan="<if condition="$vboptions[showmoderatorcolumn]">2<else />1</if>">
<if condition="$childforumbits">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumbit_$forumid')"><img id="collapseimg_forumbit_$forumid" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" /></a>
</if>
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>

<if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
<if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
</td>
</tr>
<if condition="!$show['collapsable_forums']">
</tbody>
</if>
<if condition="$childforumbits">
<if condition="!$show['collapsable_forums']">
<tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">
</if>
$childforumbits
<if condition="!$show['collapsable_forums']">
</tbody>
</if>
</if></table>
<div style="padding: 0 0 15px 0;"></div>

Brandon Sheley
23 Jun 2009, 19:50
Thanks for sharing Sofia :)

Voonyx
23 Jun 2009, 20:08
great thx a lot

Blackheart_72
23 Jun 2009, 20:43
Very nice have added it on mine with a purchased style, can be viewed here as demo:

http://vauxhall-sri.co.uk/forum.php

Just seeing what my members think now.

Sofia
23 Jun 2009, 20:57
Thanks for sharing Sofia :)

great thx a lot

No problem. You're welcome. :)

Very nice have added it on mine with a purchased style, can be viewed here as demo:

http://vauxhall-sri.co.uk/forum.php

Just seeing what my members think now.

Yeahh. Very clean now ;)

Pcwolfx
23 Jun 2009, 21:21
Thank You BOSS :p

Nice Nice :p

Fırtına
23 Jun 2009, 21:37
Sofia, thank you for this nice article. : )

Hornstar
23 Jun 2009, 21:47
I wonder if doing this would get my members a little more familiar with the feel of vb4 before going with vb4 when it comes out lol

FiMeTi
25 Jun 2009, 17:06
sofia rocks! :D
I dont need this, but I really do like the VB4 Threadbits. Can you make our Threads look like VB4 ones and own da house?! :-)

Would really appreciate that!

regards
cloni

ITDarasgah
26 Jun 2009, 01:20
Install...thanks I like it

Sofia
26 Jun 2009, 10:54
sofia rocks! :D
I dont need this, but I really do like the VB4 Threadbits. Can you make our Threads look like VB4 ones and own da house?! :-)

Would really appreciate that!

regards
cloni

What do you want exactly? This? http://images.vbulletin.com/blog-content/kier/40-style-firstlook/threadbits.png

miner
27 Jun 2009, 05:20
Thanks Sofia, i will be using this mod for my next new free skin design...



What do you want exactly? This? http://images.vbulletin.com/blog-content/kier/40-style-firstlook/threadbits.png

And yes i like to have the above...

dvbusuario
27 Jun 2009, 05:23
What do you want exactly? This? http://images.vbulletin.com/blog-content/kier/40-style-firstlook/threadbits.png

Thank you very much!!!

I concur with the request...

http://images.vbulletin.com/blog-content/kier/40-style-firstlook/threadbits.png

EidolonAH
27 Jun 2009, 07:40
Great idea, I shall look at incorporating this into my next Theme, the threadbit would be a perfect evolution to this mod, I will also request the threadbit code.
You'll be accredited if I do use this code, thanks for the share.

FiMeTi
27 Jun 2009, 15:06
Yes Sofia! I was pointing on that image! :)
Would be great to see this released.

regards

Sofia
28 Jun 2009, 11:11
Thanks Sofia, i will be using this mod for my next new free skin design...





And yes i like to have the above...

Thank you very much!!!

I concur with the request...

http://images.vbulletin.com/blog-content/kier/40-style-firstlook/threadbits.png

Great idea, I shall look at incorporating this into my next Theme, the threadbit would be a perfect evolution to this mod, I will also request the threadbit code.
You'll be accredited if I do use this code, thanks for the share.

Yes Sofia! I was pointing on that image! :)
Would be great to see this released.

regards

I'll try to do that tomorrow ;)

freewilley
28 Jun 2009, 17:42
this one is really good!! thanks sofia.

DevilzFan
01 Jul 2009, 00:30
Very cool mod.

I must have done something wrong though, or am missing something, because I can't get the "sub-forums" links to show up under the main forum.

Any idea's?

EidolonAH
01 Jul 2009, 17:15
No pressure Sofia, just wondering if you've had time to look at the vB4 threadbit layout as yet.

Sofia
01 Jul 2009, 17:20
Oh sorry, I've forgotten it! I'll do it tonight or tomorrow.

But what do you want exactly in the threadbit? Because this is very similar to the current threabit.

Sofia
01 Jul 2009, 23:43
Do you want this?

nascartr
02 Jul 2009, 04:17
Do you want this?

I like that style!

EidolonAH
02 Jul 2009, 08:11
Oh sorry, I've forgotten it! I'll do it tonight or tomorrow.

But what do you want exactly in the threadbit? Because this is very similar to the current threabit.

Not a problem Sofia, I so understand being as busy as I am myself I tend to forget things at times.
I rather liked the idea of the entire new layout as found in this:
http://images.vbulletin.com/blog-content/kier/40-style-firstlook/threadbits.png
With the navbits to the left and the new thread button to the right.
Please do not feel in any way pushed into having to do this, it's your free time we are requesting of you, if you can then that would be lovely, if you cannot then that's not a problem.
Kindest regards,
Eidolon.

Sofia
02 Jul 2009, 11:11
You can find threadbits here: http://www.vbulletin.org/forum/showthread.php?t=217667

New Joe
03 Jul 2009, 07:58
The only thing is that you can't go to the Last Post on the last posted Thread after making these changes.
Before the changes you have a "Last Post" button showing.

Sofia
03 Jul 2009, 08:03
The only thing is that you can't go to the Last Post on the last posted Thread after making these changes.
Before the changes you have a "Last Post" button showing.

In your template forumhome_lastpostby,

Find:

<a href="showthread.php?$session[sessionurl]goto=newpost&amp;t=$lastpostinfo[lastthreadid]" style="white-space:nowrap" title="<phrase 1="$lastpostinfo[lastthread]">$vbphrase[go_first_unread_in_thread_x]</phrase>"><strong>$lastpostinfo[trimthread]</strong></a></span>
&nbsp;</div>

Replace by:

<a href="showthread.php?$session[sessionurl]goto=newpost&amp;t=$lastpostinfo[lastthreadid]" style="white-space:nowrap" title="<phrase 1="$lastpostinfo[lastthread]">$vbphrase[go_first_unread_in_thread_x]</phrase>"><strong>$lastpostinfo[trimthread]</strong></a></span>&nbsp;<a href="showthread.php?$session[sessionurl]p=$lastpostinfo[lastpostid]#post$lastpostinfo[lastpostid]"><img class="inlineimg" src="$stylevar[imgdir_button]/lastpost.gif" alt="$vbphrase[go_to_last_post]" border="0" /></a>
&nbsp;</div>

christicehurst
03 Jul 2009, 11:32
Could there be any help for custom styles?

Limode
04 Jul 2009, 13:54
For valid html.

At lastpostby change :
<div style="float:left;"<if condition="is_browser('ie', 6)">; float:$stylevar[left]</if>">
<phrase 1="member.php?$session[sessionurl]find=lastposter&amp;f=$lastpostinfo[forumid]" 2="$lastpostinfo[lastposter]">$vbphrase[by_x]</phrase>
</div>


Replace by :
<div style="float:left;<if condition="is_browser('ie', 6)">; float:$stylevar[left]</if>">
<phrase 1="member.php?$session[sessionurl]find=lastposter&amp;f=$lastpostinfo[forumid]" 2="$lastpostinfo[lastposter]">$vbphrase[by_x]</phrase>
</div>

Sofia
05 Jul 2009, 21:57
For valid html.

At lastpostby change :
<div style="float:left;"<if condition="is_browser('ie', 6)">; float:$stylevar[left]</if>">
<phrase 1="member.php?$session[sessionurl]find=lastposter&amp;f=$lastpostinfo[forumid]" 2="$lastpostinfo[lastposter]">$vbphrase[by_x]</phrase>
</div>
Replace by :
<div style="float:left;<if condition="is_browser('ie', 6)">; float:$stylevar[left]</if>">
<phrase 1="member.php?$session[sessionurl]find=lastposter&amp;f=$lastpostinfo[forumid]" 2="$lastpostinfo[lastposter]">$vbphrase[by_x]</phrase>
</div>


Thank you, Limode :) Fixed in my first post ;)

ArbStar
09 Jul 2009, 13:37
Nice code,
but please next time do not put ( dir="ltr" ) and english words,
use the default vBulletin settings so it will fit on all styles and languages. My forum is Arabic, and I had to edit your code so I can use it.

Sofia
09 Jul 2009, 15:29
Nice code,
but please next time do not put ( dir="ltr" ) and english words,
use the default vBulletin settings so it will fit on all styles and languages. My forum is Arabic, and I had to edit your code so I can use it.

Next time, simply don't use my mods.
Would it be too much trouble for you to be polite? pfff

billy126
12 Jul 2009, 23:47
in the forumhome template (with category spacing) The 'mark forums read' section and 'what's going on' was showing full page width with vBadvanced (across left and center columns, instead of just center)

<!-- main -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">

$forumbits
<tbody>
</table>

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="tfoot" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong>
<a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a>
<if condition="$vboptions['forumleaders']">&nbsp; &nbsp;
<a href="showgroups.php$session[sessionurl_q]">$vbphrase[view_forum_leaders]</a></if>
</strong></div></td>
</tr>
</tbody>
</table>
$forumhome_markread_script
<!-- /main -->

changed to:

<!-- main -->

$forumbits

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="tfoot" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong>
<a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a>
<if condition="$vboptions['forumleaders']">&nbsp; &nbsp;
<a href="showgroups.php$session[sessionurl_q]">$vbphrase[view_forum_leaders]</a></if>
</strong></div></td>
</tr>
</table>
$forumhome_markread_script
<!-- /main -->

that seemed to fix it. Not done much coding though, so I dont know if that's the best way to go.

sebil
30 Jul 2009, 20:45
after i add this modification...
the last post area gone messed up


Itz says

Array [trimthread]
by Array [lastposter]

see the image attached...


how can i revert it backk..
please help

DubaiZone
02 Aug 2009, 02:29
really nice why to show the forum
but better to wait for the vbulletin 4 to come
^_-

Charged
24 Sep 2009, 23:32
I get validation errors when trying to set this up

I checked http://vauxhall-sri.co.uk/forum.php who has it set up as well and see there are lots of validation errors there as well

anyone else got this installed and passes markup validation?

Lianelli
03 Oct 2009, 07:50
Already tried the tip posted in this topic about wrong offset with vB-Advanced, but still got this style wrong.

Can anyone provide a solution to this problem?

(see attachment)

-Lianelli

P.S. - Sofia are you also going to make a What's Going On box like vB4? :D

Lianelli
04 Oct 2009, 07:38
NVM - Got it working already...

Request for Whats Going On box is still open though...

Log on
04 Oct 2009, 11:08
great thank u

Log on
05 Oct 2009, 10:11
Its agreat job

I have a miner problem that my forum in Arabic langauge so the writing style from right to left... when I made all the changes it show me all things from left to right..

so how this problem could be solved.?

regards

Log on
05 Oct 2009, 10:37
the problem have been solved

I replaced right by left & left by right :D

Log on
06 Oct 2009, 07:12
If we want to add something in this layout to be better u can add it ? I meane besisde last post then (posted by) then date and time for the post !!

if u need more details I can provide u


regards

Dr.LoVe
08 Oct 2009, 10:19
thanx Sofia ,

i did it every was OK ..

but could you change the code to be in the right side ( from right to left )

because my board is Arabic

So i face this problem can you solve it please ( i used category with spacing )

thank you very much i really like your work :D