Customizing SMF > SMF Coding Discussion
[Tip/Test] Box Type Boards on BoardIndex
Antes:
Hello, one of my good friends requested this from me 3-4 days ago, i did something lovely (i think) and I want to share this with you.
I put test prefix on this because i need some feedback - i'm still newbie :P so don't expect a master work from me.
Open your BoardIndex.php
--- Code: --- echo '
<tr id="board_', $board['id'], '" class="windowbg2">
<td class="icon windowbg"', !empty($board['children']) ? ' rowspan="2"' : '', '>
<a href="', ($board['is_redirect'] || $context['user']['is_guest'] ? $board['href'] : $scripturl . '?action=unread;board=' . $board['id'] . '.0;children'), '">';
// If the board or children is new, show an indicator.
if ($board['new'] || $board['children_new'])
echo '
<img src="', $settings['images_url'], '/', $context['theme_variant_url'], 'on', $board['new'] ? '' : '2', '.png" alt="', $txt['new_posts'], '" title="', $txt['new_posts'], '" />';
// Is it a redirection board?
elseif ($board['is_redirect'])
echo '
<img src="', $settings['images_url'], '/', $context['theme_variant_url'], 'redirect.png" alt="*" title="*" />';
// No new posts at all! The agony!!
else
echo '
<img src="', $settings['images_url'], '/', $context['theme_variant_url'], 'off.png" alt="', $txt['old_posts'], '" title="', $txt['old_posts'], '" />';
echo '
</a>
</td>
<td class="info">
<a class="subject" href="', $board['href'], '" name="b', $board['id'], '">', $board['name'], '</a>';
// Has it outstanding posts for approval?
if ($board['can_approve_posts'] && ($board['unapproved_posts'] || $board['unapproved_topics']))
echo '
<a href="', $scripturl, '?action=moderate;area=postmod;sa=', ($board['unapproved_topics'] > 0 ? 'topics' : 'posts'), ';brd=', $board['id'], ';', $context['session_var'], '=', $context['session_id'], '" title="', sprintf($txt['unapproved_posts'], $board['unapproved_topics'], $board['unapproved_posts']), '" class="moderation_link">(!)</a>';
echo '
<p>', $board['description'] , '</p>';
// Show the "Moderators: ". Each has name, href, link, and id. (but we're gonna use link_moderators.)
if (!empty($board['moderators']))
echo '
<p class="moderators">', count($board['moderators']) == 1 ? $txt['moderator'] : $txt['moderators'], ': ', implode(', ', $board['link_moderators']), '</p>';
// 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>
<td class="lastpost">';
/* The board's and children's 'last_post's have:
time, timestamp (a number that represents the time.), id (of the post), topic (topic id.),
link, href, subject, start (where they should go for the first unread post.),
and member. (which has id, name, link, href, username in it.) */
if (!empty($board['last_post']['id']))
echo '
<p><strong>', $txt['last_post'], '</strong> ', $txt['by'], ' ', $board['last_post']['member']['link'] , '<br />
', $txt['in'], ' ', $board['last_post']['link'], '<br />
', $txt['on'], ' ', $board['last_post']['time'],'
</p>';
echo '
</td>
</tr>';
// 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>';
}
}
echo '
</tbody>';
--- End code ---
--- Code: (Exchange with) --- // Boxed BoardIndex Start
echo '
<tr class="catbox windowbg2">';
echo '
<td class="info">
<div class="box100">
<div class="catbox-all">
<a class="subject" href="', $board['href'], '" name="b', $board['id'], '">', $board['name'], '</a>
<p>', $board['description'] , '</p>';
if (!empty($board['last_post']['id']))
echo '
<p><strong>', $txt['last_post'], '</strong> ', $txt['by'], ' ', $board['last_post']['member']['link'] , '<br />
', $txt['in'], ' ', $board['last_post']['link'], '<br />
', $txt['on'], ' ', $board['last_post']['time'],'
</p>';
echo '
</div>
</div>
</td>
</tr>';
}
echo '
</tbody>';
// Boxed BoardIndex End
--- End code ---
Finally
Open your Index.css and add this to end of it
--- Code: ---.catbox
{
height: 150px;
float: left;
margin-bottom: 1%;
}
.catbox-all
{
width:260px;
height:150px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #dadfe6;
padding-left: 3%;
padding-top: 3%;
}
--- End code ---
* Used CSS3 to make round corners.
> If you don't like round corners
--- Code: (Delete) --- -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
--- End code ---
** Div class merged into one i hope this makes things better (still trying)
*** You can change background color if you don't like it :)
**** Please feedbacks is most important thing now, suggestions are always welcome
Small Note : Theme in the picture Carbonate by Bloc
Thanks to MrGrumpy for helping and cleaning invalid xhtml values.
Ricky.:
Good work, I will test it and let you know.. whenever I get time :P
MrGrumpy:
Code doesn't work, gives a Template Parse and you will probably get a flood of validation errors too as you have <div> inside <td>
Antes:
--- Quote from: MrGrumpy on August 03, 2011, 03:04:58 PM ---Code doesn't work, gives a Template Parse and you will probably get a flood of validation errors too as you have <div> inside <td>
--- End quote ---
Yes that's why i added Test prefix :) - And i wrongly added
--- Code: --- // Assuming the category hasn't been collapsed...
if (!$category['is_collapsed'])
{
echo '
<tbody class="content" id="category_', $category['id'], '_boards">';
/* Each board in each category's boards has:
new (is it new?), id, name, description, moderators (see below), link_moderators (just a list.),
children (see below.), link_children (easier to use.), children_new (are they new?),
topics (# of), posts (# of), link, href, and last_post. (see below.) */
foreach ($category['boards'] as $board)
--- End code ---
part too that's why giving error :(
MrGrumpy:
OK the code works now but got 60 Validation errors - I'll have a look into it later and clear those up for you, I know what the problems are so shouldn't be too much trouble to fix them.
Navigation
[0] Message Index
[#] Next page
Go to full version