D&D Forums - MyBB Plugins & Themes
[Tutorial] jQuery collapsible sidebar - Printable Version

+- D&D Forums - MyBB Plugins & Themes (https://developement.design/forum)
+-- Forum: MyBB General Discussions (https://developement.design/forum/forumdisplay.php?fid=23)
+--- Forum: Tricks & Tutorials (https://developement.design/forum/forumdisplay.php?fid=11)
+--- Thread: [Tutorial] jQuery collapsible sidebar (/showthread.php?tid=27957)

[Tutorial] jQuery collapsible sidebar - AmazOuz - 09-27-2022

Hello everyone Smile

First off, you need to download the attached files and upload them to your forum. The two image go in your forum's images folder. The two javascript files go in your jscripts folder.

After you have downloaded and uploaded those files, you must go to your Admin CP, click the Templates & Style tab, then on the left click Templates, select your theme, expand the Index Templates, and finally, open up index. Replace it all with this.
Code:
<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
    lang.no_new_posts = "{$lang->no_new_posts}";
    lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
<style type="text/css">
.buttons {
    background: url(images/arrowright.png) no-repeat;
    width: 16px;
    height: 16px;
    display: block;
    cursor: pointer;
}

.clickedbuttons {
    background: url(images/arrowleft.png) no-repeat;
    width: 16px;
    height: 16px;
    display: block;
    cursor: pointer;
}
</style>
</head>
<body>
{$header}
<a class="buttons" style="float: right;"></a>
<a class="clickedbuttons" style="float: right;"></a>
<br class="clear" />
<div class="sidebar" style="float: right;width: 19%;">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead"><strong>
Latest News
</strong></td>
</tr>
<tr>
<td class="trow1">
You can put some news stuff here
</td>
</tr>
</table>
</div>
<div class="forums" style="float: left;width: 80%;">
{$forums}
</div>
<br class="clear" />
{$boardstats}

<dl class="forum_legend smalltext">
    <dt><img src="{$theme['imgdir']}/on.gif" alt="{$lang->new_posts}" title="{$lang->new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
    <dd>{$lang->new_posts}</dd>

    <dt><img src="{$theme['imgdir']}/off.gif" alt="{$lang->no_new_posts}" title="{$lang->no_new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
    <dd>{$lang->no_new_posts}</dd>

    <dt><img src="{$theme['imgdir']}/offlock.gif" alt="{$lang->forum_locked}" title="{$lang->forum_locked}" style="vertical-align: middle;" /></dt>
    <dd>{$lang->forum_locked}</dd>
</dl>
<br style="clear: both" />
{$footer}
</body>
</html>

Save and close.

Now expand the Ungrouped Templates, and open headerinclude.

Find:
Code:
{$stylesheets}

Add before:
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/jquery.cookie.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/sidebar.js"></script>

I'm pretty sure that's all you will need. If you have any problems let me know!

Source : https://community.mybb.com/thread-73062.html

Enjoy Big Grin