2020-02-28, 08:14 AM
Hi. I'm sure there are other way's to do it. But today ill post the way i do it, and it's quite simple.
1) ACP - Templates & Styles - Your template - index page - index
This is how your default index code looks like
And this is how it will look after.
2) Add to global.css
![[Image: StOLiUS.png]](https://camo.mybb.com/754b0810414873b0b55ad51100a6b53a0fbb7624/68747470733a2f2f692e696d6775722e636f6d2f53744f4c6955532e706e67)
![[Image: jie3cCf.png]](https://camo.mybb.com/df92dac8f9cc1858c80b37fc5b14ca31ce829536/68747470733a2f2f692e696d6775722e636f6d2f6a6965336343662e706e67)
1) ACP - Templates & Styles - Your template - index page - index
This is how your default index code looks like
<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}
{$forums}
{$boardstats}
<dl class="forum_legend smalltext">
<dt><span class="forum_status forum_on" title="{$lang->new_posts}"></span></dt>
<dd>{$lang->new_posts} {$newestmember}</dd>
<dt><span class="forum_status forum_off" title="{$lang->no_new_posts}"></span></dt>
<dd>{$lang->no_new_posts}</dd>
<dt><span class="forum_status forum_offclose" title="{$lang->forum_closed}"></span></dt>
<dd>{$lang->forum_closed}</dd>
<dt><span class="forum_status forum_offlink" title="{$lang->forum_redirect}"></span></dt>
<dd>{$lang->forum_redirect}</dd>
</dl>
<br class="clear" />
{$footer}
</body>
</html>
And this is how it will look after.
<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="wrap_row">
<div class="leftcolumn">
{$forums}
</div>
<div class="rightcolumn">
Side bar content here.
{$boardstats}
</div>
{$boardstats}
<dl class="forum_legend smalltext">
<dt><span class="forum_status forum_on" title="{$lang->new_posts}"></span></dt>
<dd>{$lang->new_posts} {$newestmember}</dd>
<dt><span class="forum_status forum_off" title="{$lang->no_new_posts}"></span></dt>
<dd>{$lang->no_new_posts}</dd>
<dt><span class="forum_status forum_offclose" title="{$lang->forum_closed}"></span></dt>
<dd>{$lang->forum_closed}</dd>
<dt><span class="forum_status forum_offlink" title="{$lang->forum_redirect}"></span></dt>
<dd>{$lang->forum_redirect}</dd>
</dl>
</div>
<br class="clear" />
{$footer}
</body>
</html>
2) Add to global.css
.wrap_row {
overflow: hidden;
position: relative;
}
.leftcolumn {
float: left;
width: 75%;
display: table;
overflow: hidden;
}
.rightcolumn {
float: left;
width: 25%;
padding-left: 10px;
display: table;
}
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
padding-bottom: 10px;
}
}
* {
margin: 0;
padding: 0;
}
*, *:before, *:after {
box-sizing: border-box;
}
