2015-06-01, 10:59 PM
I am trying to follow this toggle sidebar tutorial but it did not work well. Is there a way I can toggle sidebar for 1.8?
http://www.tripulse.net/forum/
http://www.tripulse.net/forum/
2015-06-01, 10:59 PM
2015-06-11, 12:03 PM
I still need help with this lol
2015-06-11, 12:19 PM
actually that tutorial works like a charm
but keep in mind that this guid will add a side bar to index.
if you install some plugin like latest threads or recent posts it will add you another side bar
but tbh i dont have a clue on whats your problem since you dont specify or show whats wrong on it so, until that i guess no one can help you
but keep in mind that this guid will add a side bar to index.
if you install some plugin like latest threads or recent posts it will add you another side bar
but tbh i dont have a clue on whats your problem since you dont specify or show whats wrong on it so, until that i guess no one can help you
2015-06-12, 08:42 AM
It didn't work. I did everything it said and when I click on the button, nothing happened.
2015-06-13, 07:42 PM
If you don't have any plugins installed, you can do this:
Replace index template with this:
Then replace the portal_latestthreads_thread template with this code:
Now go to headerinclude and put this code all the way down below:
After, you need to put this 2 buttons where you want:
And that's all. This code has a fixed width of 1024px, you can change that for the width you want.
Replace index template with this:
<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>
</head>
<body>
{$header}
<div class="sidebar" style="float: right; width: 250px;">
<script type="text/javascript">
jQuery(function(){
jQuery(".latestthreads").load("{$mybb->settings['bburl']}/portal.php .latestthreads_portal");
});
</script>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead">
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse.png" id="ths_img" class="expander" alt="[-]" title="[-]" /></div>
<strong>Sidebar</strong>
</td>
</tr>
<tr>
<td style="{$collapsed['ths_e']} padding: 0;" id="ths_e">
<div class="latestthreads float_left"></div>
</td>
</tr>
</table>
<div class="theadend"></div>
</div>
<div class="forums" style="float: left; width: 824px;">
{$forums}
</div>
<br class="clear" /><br />
{$boardstats}
{$footer}
</body>
</html>
Then replace the portal_latestthreads_thread template with this code:
<tr class="latestthreads_portal">
<td width="230px" class="trow1">
<strong><a href="{$mybb->settings['bburl']}/{$thread['threadlink']}">{$thread['subject']}</a></strong>
<span class="smalltext"><br />
{$lang->by} {$lastposterlink}<br />
{$lastpostdate}
</td>
</tr>
Now go to headerinclude and put this code all the way down below:
<script type="text/javascript">
jQuery(function($) {
$(".clickedbuttons").hide();
$(".buttons").click(function() {
$(".sidebar").animate({height: "hide", opacity: 0}, 500,
function() {
$(".forums").animate({width: "1024px"}, 500);
});
$(this).hide();
$(".clickedbuttons").show();
$.cookie("sidebar","collapsed", {expires: 365});
return false;
});
$(".clickedbuttons").click(function() {
$(".forums").animate({width: "824px"}, 500,
function() {
$(".sidebar").animate({height: "show", opacity: 1}, 500);
});
$(this).hide();
$(".buttons").show();
$.cookie("sidebar","expanded", {expires: 365});
return false;
});
if($.cookie("sidebar") == "collapsed") {
$(".buttons").hide();
$(".clickedbuttons").show();
$(".forums").css("width","1024px");
$(".sidebar").hide();
};
});
</script>
After, you need to put this 2 buttons where you want:
<a class="buttons" title="Collapse sidebar" style="float: right;">C</a>
<a class="clickedbuttons" title="Expand sidebar" style="float: right;">E</a>
And that's all. This code has a fixed width of 1024px, you can change that for the width you want.
2015-06-14, 09:47 AM
It worked! Thanks!