[IPB] Contiguous Board Index

P

phenetic

New Member
Messages
490
Reaction score
0
Points
0
Ok i got this from http://invisionthings.com thought I should share this :D

Step 1: New Template Set
Make sure you're starting with a seperate template set. It's always a good idea to never change the default skin elements in case you ever need to revert to them. See the Getting Started section for how to create a new skin set.

Step 2: Load Template Bits
Now to edit the skin. We are going to be working with the board index, so login to your AdminCP and navigate to Skins & Templates > HTML Templates > click the Manage HTML link next to your template set > Board Index Sections.

Fronm here, we are going to load all four template bits at the same time for easier editing. Tick the checkboxes next to Board Index Page Top, Start Category Table, End Category Row, and End Category Table, and then click the “Edit Selected” button. All four templates will load ready for editing.

Step 3: Move the Beginning of the Table
The first thing we are going to do is move the code that opens the table from each category's header to the board index's header, so for this step focus only on Board Index Page Top and Start Category Table. Your template bits should look similar to mine right now.

HTML Templates > Board Index Sections > “Board Index Page Top” (HTML)
Code: 
<div align='left' style='text-align:left;padding-bottom:4px'>
<!-- IBF.NEWSLINK -->{ibf.lang.welcome_back_text} $lastvisit
</div>

HTML Templates > Board Index Sections > “Start Category Table” (HTML)
Code: 
<div class="tableborder">
<div class='maintitle' align='left'><{CAT_IMG}>&nbsp;<a href="{ibf.script_url}c={$Data['id']}">{$Data['name']}</a></div>
<table width="100%" border="0" cellspacing="1" cellpadding="4">
<tr> 
<th align="center" width="2%" class='titlemedium'><img src="{ibf.vars.img_url}/spacer.gif" alt="" width="28" height="1" /></th>
<th align="left" width="59%" class='titlemedium'>{ibf.lang.cat_name}</th>
<th align="center" width="7%" class='titlemedium'>{ibf.lang.topics}</th>
<th align="center" width="7%" class='titlemedium'>{ibf.lang.replies}</th>
<th align="left" width="25%" class='titlemedium'>{ibf.lang.last_post_info}</th>
</tr>

This is one of the tricky parts. We have to take two seperate lines from the Start Category Table template bit and move them to the end of the Board Index Page Top template bit. These are those lines.

HTML
<div class="tableborder">

HTML
<table width="100%" border="0" cellspacing="1" cellpadding="4">

Your template bits should look similar to this now.

HTML Templates > Board Index Sections > “Board Index Page Top” (HTML)
Code: 
<div align='left' style='text-align:left;padding-bottom:4px'>
<!-- IBF.NEWSLINK -->{ibf.lang.welcome_back_text} $lastvisit
</div>
<div class="tableborder">
<table width="100%" border="0" cellspacing="1" cellpadding="4">

HTML Templates > Board Index Sections > “Start Category Table” (HTML)
Code: 
<div class='maintitle' align='left'><{CAT_IMG}>&nbsp;<a href="{ibf.script_url}c={$Data['id']}">{$Data['name']}</a></div>
<tr> 
<th align="center" width="2%" class='titlemedium'><img src="{ibf.vars.img_url}/spacer.gif" alt="" width="28" height="1" /></th>
<th align="left" width="59%" class='titlemedium'>{ibf.lang.cat_name}</th>
<th align="center" width="7%" class='titlemedium'>{ibf.lang.topics}</th>
<th align="center" width="7%" class='titlemedium'>{ibf.lang.replies}</th>
<th align="left" width="25%" class='titlemedium'>{ibf.lang.last_post_info}</th>
</tr>

Do not save your changes yet.

Step 4: Recode the Category Titles
Now we need to jump back to the Start Category Table template bit to recode the category titles. This will be the last tricky part. This is the code we need to change.

HTML
Code: 
<div class='maintitle' align='left'><{CAT_IMG}>&nbsp;<a href="{ibf.script_url}c={$Data['id']}">{$Data['name']}</a></div> 

We need to exchange the <div> with a table cell that spans the all the columns (five by default), wrapped in a new table row. That should leave you with this. 
HTML 
<tr><td class='maintitle' colspan="5"><{CAT_IMG}>&nbsp;<a href="{ibf.script_url}c={$Data['id']}">{$Data['name']}</a></td></tr>

Your template bit should look similar to this now.
HTML Templates > Board Index Sections > “Start Category Table” (HTML)
Code: 
<tr><td class='maintitle' colspan="5"><{CAT_IMG}>&nbsp;<a href="{ibf.script_url}c={$Data['id']}">{$Data['name']}</a></td></tr>
<tr>
<th align="center" width="2%" class='titlemedium'><img src="{ibf.vars.img_url}/spacer.gif" alt="" width="28" height="1" /></th>
<th align="left" width="59%" class='titlemedium'>{ibf.lang.cat_name}</th>
<th align="center" width="7%" class='titlemedium'>{ibf.lang.topics}</th>
<th align="center" width="7%" class='titlemedium'>{ibf.lang.replies}</th>
<th align="left" width="25%" class='titlemedium'>{ibf.lang.last_post_info}</th>
</tr>

Do not save your changes yet.

Step 5: Move the Ending of the Table
Now we need to focus on the other two template bits, End Category Row and End Category Table. We need to move the closing table code from End Category Row to End Category Table. The End Category Table template bit is empty by default, but your End Category Row template bit should look similar to this.

HTML Templates > Board Index Sections > “End Category Row” (HTML)
Code: 
<tr> 
<td class='darkrow2' colspan="5">&nbsp;</td>
</tr>
</table>
</div>
<br />

What we have to do is move the closing table and div code, and break tag, from the End Category Row template bit to the End Category Table template bit. This is the code we are worried about.

HTML
Code: 
</table>
</div>
<br />

That will finish up restructuring the multiple tables into a single table for all categories and forums. The template bits should look like this now.

HTML Templates > Board Index Sections > “End Category Row” (HTML)
Code: 
<tr> 
<td class='darkrow2' colspan="5">&nbsp;</td>
</tr>

HTML Templates > Board Index Sections > “End Category Table” (HTML)
Code: 
</table>
</div>
<br />

If you want, you can save your changes now, but if you look at your board the only visibile changes is the removed gap between categories, which at this point would not be too encouraging. Do not worry though, you are almost there.

Step 6: Move the Column Headers
You are finally at the last requried step to achieve the effect. The final piece is to put an end to the duplicate column headers and move them to the very top of the table. To do this, we need to shift our attention back to Board Index Page Top and Start Category Table template bits. We need to cut the entire table header table row from the Start Category template bit.

HTML
Code: 
<tr> 
<th align="center" width="2%" class='titlemedium'><img src="{ibf.vars.img_url}/spacer.gif" alt="" width="28" height="1" /></th>
<th align="left" width="59%" class='titlemedium'>{ibf.lang.cat_name}</th>
<th align="center" width="7%" class='titlemedium'>{ibf.lang.topics}</th>
<th align="center" width="7%" class='titlemedium'>{ibf.lang.replies}</th>
<th align="left" width="25%" class='titlemedium'>{ibf.lang.last_post_info}</th>
</tr>

After cutting it, paste it at the very end of the Board Index Page Top template bit. Both should resemble this now.

HTML Templates > Board Index Sections > “Board Index Page Top” (HTML)
Code: 
<div align='left' style='text-align:left;padding-bottom:4px'>
<!-- IBF.NEWSLINK -->{ibf.lang.welcome_back_text} $lastvisit
</div>
<div class="tableborder">
<table width="100%" border="0" cellspacing="1" cellpadding="4">
<tr> 
<th align="center" width="2%" class='titlemedium'><img src="{ibf.vars.img_url}/spacer.gif" alt="" width="28" height="1" /></th>
<th align="left" width="59%" class='titlemedium'>{ibf.lang.cat_name}</th>
<th align="center" width="7%" class='titlemedium'>{ibf.lang.topics}</th>
<th align="center" width="7%" class='titlemedium'>{ibf.lang.replies}</th>
<th align="left" width="25%" class='titlemedium'>{ibf.lang.last_post_info}</th>
</tr>

HTML Templates > Board Index Sections > “Start Category Table” (HTML)
Code: 
<tr><td class='maintitle' colspan="5"><{CAT_IMG}>&nbsp;<a href="{ibf.script_url}c={$Data['id']}">{$Data['name']}</a></td></tr>

***The Steps In The Next Post Are Optional***
 
P

phenetic

New Member
Messages
490
Reaction score
0
Points
0
Step 7: Remove the Category Footers (Optional)
If you do not want the blank row at the footer of each category, take a deep breath, and jump back to HTML Templates > Board Index Sections > “End Category Row”. We are not actually going to remove the code for two reasons. One, just in case you ever want to bring the seperator back it will be easier, second, Invision Power Board will not allow you to submit an entirely blank template bit. Instead, we're going to take the entire template bit contents and “comment” it out. HTML includes a special tag for hiding code or comments from the user. Here's an example of an HTML comment.

HTML
Code: 
<!-- Everything inside this special comment tag will not show in the output. --> 

To “comment out” the code for the blank row, insert “<!--” at the very beginning of the template bit and “-->” at the very end. You should end up with something matching my template bit. 
HTML Templates > Board Index Sections > “End Category Row” (HTML) 
<!-- <tr> 
<td class='darkrow2' colspan="5">&nbsp;</td>
</tr> -->

Save your changes, your board will now look like how you want it.

Step 8: Improve Accessibility (Optional)
If you chose the contiguous board index style for being arguably truer to the tabular data, then you are probably interested in how to make the board index table more accessible. This doesn't change how your board appears visually, but it can help people who do not browse the way you would expect. Further details about web accessibilty is beyond the scope of this tutorial and can be found at sites like SitePoint and A List Apart. Invision Power Board already helps quite a bit by using the <th> tag to markup table header cells. You can still enhance the accessibility though by marking up what rows make up the table's header by using the <thead> tag and which rows should be grouped together into table body sections by using the <tbody> tag.

Accessibility isn't the only reason to use these tags. After grouping the table rows together, especially if you assign them a unique ID which we will do, you begin to control them independently, if you like, through stylesheets or javascript. For example you could use a different background-color for each category or add a link to category title bars to collapse categories. Be creative.

Reopen the same template bits for one final big edit. In the Board Index Page Top template bit, wrap the table row in a <thead> tag pair. The change will have your Board Index Page Top template bit looking like this.

HTML Templates > Board Index Sections > “Board Index Page Top” (HTML)
Code: 
<div align='left' style='text-align:left;padding-bottom:4px'>
<!-- IBF.NEWSLINK -->{ibf.lang.welcome_back_text} $lastvisit
</div>
<div class="tableborder">
<table width="100%" border="0" cellspacing="1" cellpadding="4">
<thead>
<tr> 
<th align="center" width="2%" class='titlemedium'><img src="{ibf.vars.img_url}/spacer.gif" alt="" width="28" height="1" /></th>
<th align="left" width="59%" class='titlemedium'>{ibf.lang.cat_name}</th>
<th align="center" width="7%" class='titlemedium'>{ibf.lang.topics}</th>
<th align="center" width="7%" class='titlemedium'>{ibf.lang.replies}</th>
<th align="left" width="25%" class='titlemedium'>{ibf.lang.last_post_info}</th>
</tr>
</thead>

In the Start Category Table template bit, first wrap the contents in a <tbody> tag pair but we're going to have these pairs use unique IDs using the following code.

HTML
Code: 
<tbody id="cathead{$Data['id']}">

</tbody>

Your Start Category Table template bit should now match this one.

HTML
Code: 
<tbody id="cathead{$Data['id']}">
<tr><td class='maintitle' colspan="5"><{CAT_IMG}>&nbsp;<a href="{ibf.script_url}c={$Data['id']}">{$Data['name']}</a></td></tr>
</tbody>

Now for one more change to this template bit, we need to open a new tbody section at the very end of the template bit and ID it as well using the following code.

HTML
Code: 
<tbody id="cat{$Data['id']}">

After that last change to Start Category Table, the template bit should now match the following.

HTML Templates > Board Index Sections > “Start Category Table” (HTML)
Code: 
<tbody id="cathead{$Data['id']}">
<tr><td class='maintitle' colspan="5"><{CAT_IMG}>&nbsp;<a href="{ibf.script_url}c={$Data['id']}">{$Data['name']}</a></td></tr>
</tbody>
<tbody id="cat{$Data['id']}">

You are now only one tiny change away from being done. At the end of the End Category Row template bit, close the tbody tag opened in Start Category Table. That change will cause your End Category Row template bit to become this.
HTML Templates > Board Index Sections > “End Category Row” (HTML)
Code: 
<!-- <tr> 
<td class='darkrow2' colspan="5">&nbsp;</td>
</tr> -->
</tbody>

Congratulations! You now have an accessible contiguous board index.
 
X

XTMAN

Guest
What version of IPB is this for? Did you just copy it directly?
 
You must log in or register to reply here.
Top