Add left sidebar to the default theme

[xjessie007]

Hi,

I am new to SMF, and I installed the 1.1.6. build a few days ago. I like the default theme, I do not have any reason to change my configuration to some different theme, but I would like 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 (the same like this forum here). Horizontally, I want the layout to be left sidebar that is for example 10% of the page width followed by 90% of the page for the forum content.

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.

Edit: In other words, I want to accomplish something like can be seen on Tinyportal, see for example here:
http://www.tinyportal.net/index.php/topic,18636.0.html They have a nice sidebar on the left side of the page with stats and stuff from info center. That is exactly what I am looking for. Tx.

[Nathaniel]

Well you could easily install a portal to do it for you, but if you don't want to do that then I can help you to add a sidebar.

The edits below are for your '/Themes/default/index.template.php' file.

Find this code:

Code Select Expand

    // The main content should go here.
    echo '
    <div id="bodyarea" style="padding: 1ex 0px 2ex 0px;">';

Replace with this code:

Code Select Expand

    // The main content should go here.
    echo '
<table>
<tr>
    <td>
        Sidebar HTML code.
    </td>
    <td>
    <div id="bodyarea" style="padding: 1ex 0px 2ex 0px;">';

Find this code:

Code Select Expand

    echo '
    </div>';

    // Show the "Powered by" and "Valid" logos, as well as the copyright. Remember, the copyright must be somewhere!


Replace with this code:

Code Select Expand

    echo '
    </div>
</td>
</tr>
</table>';

    // Show the "Powered by" and "Valid" logos, as well as the copyright. Remember, the copyright must be somewhere!


[xjessie007]

Hi,

Thanks for your advice. I wanted the sidebar to be a bit more "integrated" into the website, so after getting it done, I am summarizing it and posting here for everyone.

What I wanted to do:

Add a sidebar on the left side of my display topic pages that would show two blocks, one for most recent topics and one for most recent posts. Most recents should be displayed from the board that the visitor is viewing at the moment only (kinda "content related" stuff).

How it is done:

Page design is done via layers. See here what it means: http://www.simplemachines.org/community/index.php?topic=145838.0

The top of the page 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 content that is inbetween 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 with the function template_main() doing the magic.

Then in this function I wrapped everything into another table where the first collumn is my sidebar. Add more tables is not very nice, but it won't make it much worse, easier than to rewrite the whole template.

Code Select Expand

[font=courier]function template_main()
{
echo "<div>\n<table cellpadding=\"3\" cellspacing=\"0\" border=\"0\" width=\"100%\">\n"
."<tr>\n<td width=\"200px\" valign=\"top\" \n";[/font]

Table, tr, td is the piece that I added.

How do you 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.

How do you pull only content-related posts?

You want to pull 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 named above. Arg(0) = number of posts to display. Arg(1) = array of board IDs that should be excluded from the view.

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 Select Expand

$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. You can see an example, for instance here: http://www.maxi-pedia.com/forum/index.php?topic=49.0 or by going to any topic.

Cheers.

---------
www.Maxi-Pedia.com Maxi-Pedia: Your resource for finance and IT!
www.Maxi-Pedia.com/forum Maxi-Pedia Forum: Your place to discuss finance and IT!
www.finance-management.cz Central European Center for Finance and Management

[Deaks]

xjessie007 did any of the suggestions here help

[palofdru]

xjessie007 did any of the suggestions here help

--
  Note: this post will not display until it's been approved by a moderator.

LOL!

Obviously you didnt read the thread before asking that question!
He declined the initial reply and responded with a very detailed and expert dissertation of the layers system in SMF and delved into context variables and the like

QUITE THE ACCOMPLISHMENT for some who asked

I am new to SMF, and I installed the 1.1.6. build a few days ago. I like the default theme, I do not have any reason to change my configuration to some different theme, but I would like 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 (the same like this forum here). Horizontally, I want the layout to be left sidebar that is for example 10% of the page width followed by 90% of the page for the forum content.

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.

ROFL : D

[xjessie007]

LOL  Thanks.


---------
www.Maxi-Pedia.com Maxi-Pedia: Your resource for finance and IT!
www.Maxi-Pedia.com/forum Maxi-Pedia Forum: Your place to discuss finance and IT!
www.finance-management.cz Central European Center for Finance and Management

[haito]

how about add left sidebar to another theme such as OrangeLime??
can u help me??

[Antechinus]

Install a portal. Seriously. Also when posting code use the code tags. That's the # button next to the quote button.

[haito]

i install simpleportal~, simpleportal cant...

Also when posting code use the code tags. That's the # button next to the quote button.

sorry

[xjessie007]

how about add left sidebar to another theme such as OrangeLime??
can u help me??

I am sorry, I am not familiar with OrangeLime at all, but I assume the template and the concept will be similar.

---------
www.Maxi-Pedia.com Maxi-Pedia: Your resource for finance and IT!

[Antechinus]

i install simpleportal~, simpleportal cant...

Tiny Portal can.

[I JaR oF JaM I]

i install simpleportal~, simpleportal cant...

Tiny Portal can.

TinyPortal is magic.      No offense, LVHWB   

[verawat]

Refer SMF 2.0.2

Step 1 Prepare sample sidebar from Dreamweaver

Copy code

Code Select Expand

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="20%" valign="top" bgcolor="#CEFFFF">Side Bar Test</td>
    <td width="80%" valign="top">&nbsp;</td>
  </tr>
</table>


Step 2 Goto ---> /Themes/default/index.template.php

Step 3 Find out

Code Select Expand

<div id="main_content_section">';
// Custom banners and shoutboxes should be placed here, before the linktree.
// Show the navigation tree.
theme_linktree();

Step 4 Edit Code to

Code Select Expand

<div id="main_content_section">';
// Custom banners and shoutboxes should be placed here, before the linktree.

//Test Implement Side bar Start Step 1
echo '
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="20%" valign="top" bgcolor="#CEFFFF">Side Bar Test</td>
    <td width="80%" valign="top">
';
//Test Implement Side bar End Step 1

// Show the navigation tree.
theme_linktree();


Step 5 Find out

Code Select Expand

function template_body_below()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo '
</div>
</div></div>';


Step 6 Edit Code to

Code Select Expand

function template_body_below()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo '
<!-- Test Implement Side bar Start Step 2 -->
</td>
  </tr>
</table>
<!-- Test Implement Side bar Stop Step 2 -->

</div>
</div></div>';

[winsoft]

It's working very well, thank you.

Can we have right sidebar as well via using this codes?

Refer SMF 2.0.2

Step 1 Prepare sample sidebar from Dreamweaver

Copy code

Code Select Expand

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="20%" valign="top" bgcolor="#CEFFFF">Side Bar Test</td>
    <td width="80%" valign="top">&nbsp;</td>
  </tr>
</table>


Step 2 Goto ---> /Themes/default/index.template.php

Step 3 Find out

Code Select Expand

<div id="main_content_section">';
// Custom banners and shoutboxes should be placed here, before the linktree.
// Show the navigation tree.
theme_linktree();

Step 4 Edit Code to

Code Select Expand

<div id="main_content_section">';
// Custom banners and shoutboxes should be placed here, before the linktree.

//Test Implement Side bar Start Step 1
echo '
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="20%" valign="top" bgcolor="#CEFFFF">Side Bar Test</td>
    <td width="80%" valign="top">
';
//Test Implement Side bar End Step 1

// Show the navigation tree.
theme_linktree();


Step 5 Find out

Code Select Expand

function template_body_below()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo '
</div>
</div></div>';


Step 6 Edit Code to

Code Select Expand

function template_body_below()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo '
<!-- Test Implement Side bar Start Step 2 -->
</td>
  </tr>
</table>
<!-- Test Implement Side bar Stop Step 2 -->

</div>
</div></div>';