Better Forum Layout - Page 2

		vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 3 Articles
Better Forum Layout

Page 2 of 2

Thread Tools

Better Forum Layout

pein87

Join Date: Sep 2008

Posts: 352

pein87

01-04-2009, 10:00 PM

How to seperate your forums for a cleaner, more appealing skin/style.

To start for those who arent good with xhtml never fear no additional coding will be used its pretty much a search, move, and delete deal.

Open you forumhome template to your default theme. I noticed that some skins had it so each forum was seperateed so with a bit of playing around and code reading I figured out how to do it and I would like to share with with my fellow members.

Search for

take note of all the code between the   comments thats the code will be changing, feel free to copy this to a txt file if you wanna play with it later on.

Notice the $forumbits variable, that is what maks up your entire forum on forumhome. Now copy this to a text document and save the file. DO NOT CUT AND PASTE! When you save you`ll see a bunch of forumhome templates.

Search for this template:

forumhome_forumbit_level1_nopost
open this template this is what we will be mostly editing.

See how incomplete this template is? Thats because its what your software prints each time you make a new forum.

Ok I`ve already done the edit for you but to explain it the standard vbulletin skin has the $forumbits variable evaled to the forumhome_forumbit_level1_nopost template.

Clear the entire forumhome_forumbit_level1_nopost template and add this code:

PHP Code:


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

<thead>

    <tr>

        <td class="tcat" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</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>

</thead>

<tbody>

    <tr align="center">

      <td class="thead">&nbsp;</td>

      <td class="thead" width="100%" align="$stylevar[left]">$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>

</tbody>

<if condition="$childforumbits">

<tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">

$childforumbits

</tbody>

</if>

</table><br />

This code adds the the colum name to the top of the table making it a table head instead of a table body and the post/forumname display is not a table head, its instead been switched to a table body. You bascilly just moved a few things around changed the tags around and deleted some useless code. Now you have the forum leaders colum. Its not good to place this in the forumbits template because each forum would have it at the end, we can add it below it as a seperate table but it would just be floating there since after each forum a space is included. TO fix it we will move it to the bottom of the whats going on area.

Open forumhome template and find:

$template_hook[forumhome_wgo_pos5]

This is near the end right before this:

</table>
<br />


Place this code right above it

After the </if>)

PHP Code:


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

This moves the forum leaders colum below the whats going on box to cap it off and makes your forum look nicer.

Code should look like this:

PHP Code:


			
</if>

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

$template_hook[forumhome_wgo_pos5]

</table>

<br />

<!-- end what's going on box -->

Now to finish out this project when you save use the save and reload option so your brought back to the template.

Find:



Delete everything after this all the way till you see:



Next add this in between the  and  comments.

$forumbits
$forumhome_markread_script

so it should look like this:


$forumbits
$forumhome_markread_script


Next save and enjoy your newly styled forum now you can make your defaut theme into a nice new skin using vbulletin's built in style manager.
Images provided to see the final out come and attached txt file with info aswell for easy access for those like me and cant be online much. Also tiny green check marks in images means valid xhtml transitional. I use a firefox plugin with and sgml and xml/xhtml validater.

UPDATED

If your making the change to 3.7.5 or any of the 3.8.x versions use this instead of the above forumhome_forumbit_level1_nopost

PHP Code:


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

<thead>

    <tr>

        <td class="tcat" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</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>

</thead>

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

<tbody>

</if>

    <tr align="center">

      <td class="thead">&nbsp;</td>

      <td class="thead" width="100%" align="$stylevar[left]">$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>

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

You will still need to do the part with the forum leader part but this is a replacement to fix template upgrades in those versions.

Attached Images

	layout_tutorial.jpg (85.6 KB, 0 views)
	layout_tutorial2.jpg (82.3 KB, 0 views)

Attached Files

layout_tutorial.txt (5.3 KB, 32 views)

#12

02-18-2009, 06:04 PM

TimberFloorAu TimberFloorAu is offline

Join Date: May 2008

Location: Brisbane

Posts: 2,264

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

Ok been working thru this.

However I only wish to get one feature...

That being in $forumbits

I wish to add at the end of each displayed forum on forumhome, a collapseobj button. So that each forum, can be expanded and contracted on forum home, allowing our users to customize the forum as they require.

If I can get that working, I can then set about moo-tooling it to concertina up and down as is needed.

Any suggestions please.

#13

02-21-2009, 07:40 PM

pein87

Join Date: Sep 2008

Posts: 352

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

Wait let me get this right you wont to add a new collaspable object icon to your forums so that your users can customize which forums tehy wont to view?

#14

03-08-2009, 01:24 AM

Jasem

Join Date: Feb 2006

Location: www.menokia.com

Posts: 594

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

Good One, Thank you

#15

05-09-2009, 05:47 AM

Lautaro

Join Date: Jan 2009

Location: United States

Posts: 233

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

great, thanks for the tut.

Page 2 of 2

« Previous Thread | Next Thread »

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts BB code is On Smilies are On [IMG] code is On HTML code is Off Forum Rules

Forum Jump

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

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.06833 seconds Memory Usage 2,345KB Queries Executed 22 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (4)bbcode_php (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_article (1)navbar (4)navbar_link (120)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (5)post_thanks_box (5)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (5)post_thanks_postbit_info (4)postbit (3)postbit_attachment (5)postbit_onlinestatus (5)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.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/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_postinfo_query fetch_postinfo fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_attachment postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!