SSI.php output for CSS, recentTopics

[RH]

Since I like websites with small sourcecode, I reworked the table-based output of the SSI.php function ssi_recentTopics to some list-based stuff including divs for fine-tuning. In my site it then fitted perfectly in the already existing CSS so I had nearly no work with adjusting the SSI's output to fit the Design of my website.

So what to do?

- open SSI.php, search for:

Code Select Expand

// Recent topic list:   [board] Subject by Poster Date
function ssi_recentTopics

- then scroll down to where the output begins:

Code Select Expand

// Just return it.
if ($output_method != 'echo' || empty($posts))
return $posts;

echo '
<table border="0" class="ssi_table">';

- the piece to replace from there ends with:

Code Select Expand

echo '
</table>';
}
(following is the code for the next function, just to be sure)

- for the radicals the code to replace is:

Code Select Expand

// Just return it.
if ($output_method != 'echo' || empty($posts))
return $posts;

foreach ($posts as $post)
echo '
<li><div class="board">[', $post['board']['link'], ']</div>
<div class="topic"><a href="', $post['href'], '">', $post['subject'], '</a>
', $txt[525], ' ', $post['poster']['link'], '
', $post['new'] ? '' : '<a href="' . $scripturl . '?topic=' . $post['topic'] . '.msg' . $post['new_from'] . ';topicseen#new"><img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/new.gif" alt="' . $txt[302] . '" border="0" /></a>', '</div>
', $post['time'], '
</li>';
echo '
</ul>';
}

- for those more concerned the following part still has the table-tags, but commented, so you can easily switch back to the original version by deleting all UL, LI and DIV-tags and release the former tables from their comments-jail:

Code Select Expand

// Just return it.
if ($output_method != 'echo' || empty($posts))
return $posts;

echo '
<!--<table border="0" class="ssi_table">-->';
foreach ($posts as $post)
echo '
<!--<tr>
<td align="right" valign="top" nowrap="nowrap">-->
<li><div class="board">[', $post['board']['link'], ']
</div><!--</td>
<td valign="top">-->
<div class="topic"><a href="', $post['href'], '">', $post['subject'], '</a>
', $txt[525], ' ', $post['poster']['link'], '
', $post['new'] ? '' : '<a href="' . $scripturl . '?topic=' . $post['topic'] . '.msg' . $post['new_from'] . ';topicseen#new"><img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/new.gif" alt="' . $txt[302] . '" border="0" /></a>', '</div>
<!--</td>
<td align="right" nowrap="nowrap">-->
', $post['time'], '
<!--</td>
</tr>--></li>';
echo '
<!--</table>--></ul>';
}

- the CSS-selectors to use are:
UL, LI, DIV.BOARD, DIV.TOPIC
or UL LI, UL LI DIV.BOARD, UL LI DIV.TOPIC,
depends on what you prefer, where you're using it and how you're used to name your selectors.

My CSS for example looks like:

Code Select Expand

ul { list-style: none; margin: 0 0.8em; }
li { font: 0.9em/1.2em arial, sans-serif; }
ul ul li div.board { width: 140px; float: left; }
ul ul li div.topic { width: 320px; float: left; }

Here you also can see why I decided to use the DIVs inside LI, so I have control about the width. Together with the unordered lists I already had in my site it's simply the last 2 lines to add and ready.
It works even nice with CSS disabled, because it makes a list with each LI consisting of three lines because of the break caused by the DIVs.