Simple Machines Community Forum

New Board Index Table Layout


In this tutorial I will show you all how to redesign the board index table. As some of you know with my Syringa SMF theme I changed the layout if the board index table. This ofcourse was with the help of Antechinus... and his patience. :laugh:




Templates/Files we will be editing -


BoardIndex.Template.php


Index.css


Notes -


1. I will be using notepad++ to edit my files.


2. I will be using the default theme in this demo.


3. If your theme does not have a boardindex.template.php, you will need to copy it from the default theme folder to your custom theme folder.


Lets Begin - .


1. First we will make the last post area take up two columns instead of one.


To do this Find -


<td class="lastpost">


Replace With -


<td class="lastpost" colspan="2">


2. Next we will be moving the post and topics column under the last post column.


To do this Find -




// Show some basic information about the number of posts, etc.
echo '
               </td>
               <td class="stats windowbg">
                  <p>', comma_format($board['posts']), ' ', $board['is_redirect'] ? $txt['redirects'] : $txt['posts'], ' <br />
                  ', $board['is_redirect'] ? '' : comma_format($board['topics']) . ' ' . $txt['board_topics'], '
                  </p>
               </td>



Replace with -




            // Show some basic information about the number of posts, etc.
               echo '
               </td>





Now Find -




            // Show the "Child Boards: ". (there's a link_children but we're going to bold the new ones...)
            if (!empty($board['children']))
            {
               // Sort the links into an array with new boards bold so it can be imploded.
               $children = array();
               /* Each child in each board's children has:
                     id, name, description, new (is it new?), topics (#), posts (#), href, link, and last_post. */
               foreach ($board['children'] as $child)
               {
                  if (!$child['is_redirect'])
                     $child['link'] = '<a href="' . $child['href'] . '" ' . ($child['new'] ? 'class="new_posts" ' : '') . 'title="' . ($child['new'] ? $txt['new_posts'] : $txt['old_posts']) . ' (' . $txt['board_topics'] . ': ' . comma_format($child['topics']) . ', ' . $txt['posts'] . ': ' . comma_format($child['posts']) . ')">' . $child['name'] . ($child['new'] ? '</a> <a href="' . $scripturl . '?action=unread;board=' . $child['id'] . '" title="' . $txt['new_posts'] . ' (' . $txt['board_topics'] . ': ' . comma_format($child['topics']) . ', ' . $txt['posts'] . ': ' . comma_format($child['posts']) . ')"><img src="' . $settings['lang_images_url'] . '/new.gif" class="new_posts" alt="" />' : '') . '</a>';
                  else
                     $child['link'] = '<a href="' . $child['href'] . '" title="' . comma_format($child['posts']) . ' ' . $txt['redirects'] . '">' . $child['name'] . '</a>';


                  // Has it posts awaiting approval?
                  if ($child['can_approve_posts'] && ($child['unapproved_posts'] || $child['unapproved_topics']))
                     $child['link'] .= ' <a href="' . $scripturl . '?action=moderate;area=postmod;sa=' . ($child['unapproved_topics'] > 0 ? 'topics' : 'posts') . ';brd=' . $child['id'] . ';' . $context['session_var'] . '=' . $context['session_id'] . '" title="' . sprintf($txt['unapproved_posts'], $child['unapproved_topics'], $child['unapproved_posts']) . '" class="moderation_link">(!)</a>';


                  $children[] = $child['new'] ? '<strong>' . $child['link'] . '</strong>' : $child['link'];
               }
               echo '
               <tr id="board_', $board['id'], '_children">
                  <td colspan="3" class="children windowbg">
                     <strong>', $txt['parent_boards'], '</strong>: ', implode(', ', $children), '
                  </td>
               </tr>';



Replace With -




            echo '
               </td>
            </tr>
            <tr class="boardstats">
               <td class="windowbg" ', empty($board['children']) ? 'colspan="1"':'','>';

            // Show the "Child Boards: ". (there's a link_children but we're going to bold the new ones...)
            if (!empty($board['children']))
            {
               // Sort the links into an array with new boards bold so it can be imploded.
               $children = array();
               /* Each child in each board's children has:
                     id, name, description, new (is it new?), topics (#), posts (#), href, link, and last_post. */
               foreach ($board['children'] as $child)
               {
                  if (!$child['is_redirect'])
                     $child['link'] = '<a href="' . $child['href'] . '" ' . ($child['new'] ? 'class="new_posts" ' : '') . 'title="' . ($child['new'] ? $txt['new_posts'] : $txt['old_posts']) . ' (' . $txt['board_topics'] . ': ' . comma_format($child['topics']) . ', ' . $txt['posts'] . ': ' . comma_format($child['posts']) . ')">' . $child['name'] . ($child['new'] ? '</a> <a href="' . $scripturl . '?action=unread;board=' . $child['id'] . '" title="' . $txt['new_posts'] . ' (' . $txt['board_topics'] . ': ' . comma_format($child['topics']) . ', ' . $txt['posts'] . ': ' . comma_format($child['posts']) . ')"><img src="' . $settings['lang_images_url'] . '/new.gif" class="new_posts" alt="" />' : '') . '</a>';
                  else
                     $child['link'] = '<a href="' . $child['href'] . '" title="' . comma_format($child['posts']) . ' ' . $txt['redirects'] . '">' . $child['name'] . '</a>';


                  // Has it posts awaiting approval?
                  if ($child['can_approve_posts'] && ($child['unapproved_posts'] || $child['unapproved_topics']))
                     $child['link'] .= ' <a href="' . $scripturl . '?action=moderate;area=postmod;sa=' . ($child['unapproved_topics'] > 0 ? 'topics' : 'posts') . ';brd=' . $child['id'] . ';' . $context['session_var'] . '=' . $context['session_id'] . '" title="' . sprintf($txt['unapproved_posts'], $child['unapproved_topics'], $child['unapproved_posts']) . '" class="moderation_link">(!)</a>';


                  $children[] = $child['new'] ? '<strong>' . $child['link'] . '</strong>' : $child['link'];
               }
               echo '
                  <strong>', $txt['parent_boards'], '</strong>: ', implode(', ', $children);
            }


         echo '
               </td>
               <td class="windowbg" style="text-align: center"><p>', comma_format($board['posts']), ' ', $board['is_redirect'] ? $txt['redirects'] : $txt['posts'], '</p></td>
               <td class="windowbg" style="text-align: center"><p>', $board['is_redirect'] ? '' : comma_format($board['topics']) . ' ' . $txt['board_topics'], '</p></td>
            </tr>';





3. Now we need to get the icon to take two rows no matter if there is a child board or not.


To do this Find -



               <td class="icon windowbg"', !empty($board['children']) ? ' rowspan="2"' : '', '>



Replace With -



               <td class="icon windowbg" rowspan="2">



4. Now you should have the layout itself all done. So lets say you want to make the new board stats areas bigger.


To do this you will need to open the index.css file and add this class at the bottom -





.boardstats {
   height: 20px;
   padding: 4px;
   margin: 0;
}



As you can see here I made it 20px high, I added some padding so the text isn't sitting right on the border, and also set no margin.




===================================
Here should be the final product -





So there you go, you now have a new board index table layout.

Thanks for the tip.
If I may I would just suggest to attach demo image rather than use tinypic service... :)

Thanks for the comment :).


Hopefully this will be useful for some and possible inspire more to see customize SMF more.

you should make it in to a packaged mod :)

also i prefer the topic before posts on the section, i guess it's just my preference :)

So you mean if he makes it as a mod, people will grumble about the order of things and want it different? :D

Not to mention the support headache of trying to get it to work on myriad non-default themes.

Yeah, that too.

Nice & neat Thanks ;D
=================>

It's hard to do it xD
you may make packaged mod, would be much better
and good job

If someone would like to make it a mod package go right ahead. As others have stated it is better to simply do the edit due to compatibility problems the mod would have with custom themes.


Thank you everyone for the comments. I plan to make a custom post bit area tutorial aswell.

there ya go....
note up instructions for all the various sections
and
package them so they install into the forum help
call it HowTo mod, deliver it through package manager

<snicker>
sorry, sorta
I jes couldn't pass this, smartass, opportunity

/me clicks own bad karma