How to add sidebar to the theme template in SMF

[atari]

Hi,

I am new to SMF. I want to add a column or sidebar to the left side of my forum.

For example, my forum is now stretched accross the 100% of the page width. I want to adjust the layout so that for example 10% of the page is sidebar followed by 90% of the page for the forum content. In other words, I want to accomplish something like can be seen here. They have a nice sidebar on the left side of the page.

Then, I would like to include two blocks in the left sidebar - most recent topics and most recent posts.

Would anyone know if there is some mod that can be used for this, or if I need to hack the template?

Thanks.

[mod]

Hi,

Page design is done via layers. See here for more details: http://www.simplemachines.org/community/index.php?topic=145838.0

The top of the page (page header, etc.) is done via function template_main_above() in index.template.php. The bottom part of page is done via function template_main_below() in index.template.php.

The stuff that is between these two sections the main_above and main_below is displayed using various templates depending on which page you are at. When you are at a displayed posts page, the Display.template.php is the file that is responsible for displaying the page content. The function template_main() is where the magic happens.

The layout of the page is done using tables which is not very nice from the design perspective, it would be nicer if everything was just DIVs, but since the page design is done via tables, I solved the task of adding a sidebar by wrapping everything into another table where the first collumn is my sidebar.

Code:

[font=courier]function template_main()
{
echo "<div>\n[color=red]<table cellpadding=\"3\" cellspacing=\"0\" border=\"0\" width=\"100%\">\n"
."<tr>\n<td width=\"200px\" valign=\"top\" style=\"border: 1px solid #9BAEBF;\">[/color]\n";[/font]

The table, tr, and td are the pieces that I added to the template_main() function in the Display.template.php file.

Now, how to add the most recent posts and most recent topics?

There are two functions called function ssi_recentPosts and function ssi_recentTopics in SSI.php. Theoretically, you could use these two functions, but the problem is that they output the content in HTML tables again. I wanted to modify the output format without destroying the original functions, so I just copied them into new functions named them function ssi_recentPostsDiv and function ssi_recentTopicsDiv. Then I modified these to output most recent posts and most recent topics in DIV format.

The next step is to do something so that these functions display only most recent posts and topics from the discussion board that the visitor is viewing at the moment. You can supply arguments to the functions. Arg(0) = number of posts to display. Arg(1) = array of board IDs that should be excluded from the view. So, the goal now was to develop this array.

All information about a page can be accessed by looking at GLOBALS[’context’].

[1] The ID of the current board is stored in $GLOBALS['context']['current_board'].
[2] The list of all boards that exist in our forum is available in $GLOBALS['context']['pretty']['board_urls'] as array.

So, now, you only need to strip [1] from [2]. Once you have that, call the ssi_recentPostsDiv and ssi_recentTopicsDiv functions and give it the [2] – [1] array as the second parameter.

Code:

$contextArr = $GLOBALS['context']['current_board'];
$arrBoardIds = $GLOBALS['context']['pretty']['board_urls'];
unset($arrBrdsExclude);
$arrBrdsExclude = array();
foreach ($arrBoardIds as $key => $value) {
if($key == $contextArr) { }
else { $arrBrdsExclude[] = $key; }
}
require_once("../forum/SSI.php");
echo "<div class=\"catbg3\">Most Recent Topics:</div>\n<div style=\"clear: both; \">\n";
ssi_recentTopicsDiv(8,$arrBrdsExclude);
echo "</div>\n";
echo "<div class=\"catbg3\">Most Recent Posts:</div>\n<div style=\"clear: both; \">\n";
ssi_recentPostsDiv(8,$arrBrdsExclude);
echo "</div>\n";

Result = sidebar which displays most recent posts and most recent topics from only this current discussion board. See at the left.

Cheers.

[D.Hooli]

How can I add breaks in my dynamic sidebar code?  I want separation between my sidebar widgets? 

This is what my sidebar code looks like right now below the email and news letter coding:

<div class="widgetarea">

<ul id="sidebarwidgeted">

        <?php if  function_existsdynamic_sidebar & dynamic_sidebar1  : else : ?>

<?php endif; ?>

Thanks,
Bradley

[anzibar]

I do not have your code here, so I am not able to provide precise answer, but the idea is to look for the code that generates the "sidebar items". What you pasted looks a little like the code that just displays the sidebar which is however created somewhere else. How to find that place... display the web page, open html source, look up the sidebar code, take the name of some css class that is specific to the sidebar, then do your php files content search on this name - probably the easiest way to find it.