[For 1.8] Responsive sidebar
#1
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

<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;
}



[Image: StOLiUS.png]
[Image: jie3cCf.png]
Reply
#2
Thank you for your contribution.
Reply
#3
(2020-02-28, 11:24 AM)Omar G. Wrote: Thank you for your contribution.

No problem. Sleepy
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)