Step #1. Open styles/we_clearblue/template/overall_header.html
and find:
<div class="inventea-content" role="main">
Step #2. Add after:
<div class="sidebar">
<!-- Block 1 -->
<div class="forabg">
<div class="inner">
<ul class="topiclist">
<li class="header">
<dl class="icon">
<dt><div class="list-inner">Block title</div></dt>
</dl>
</li>
</ul>
<div class="bg2" style="padding: 15px;">
Content
</div>
</div>
</div>
<!-- Block 2 -->
<div class="forabg">
<div class="inner">
<ul class="topiclist">
<li class="header">
<dl class="icon">
<dt><div class="list-inner">Second block title</div></dt>
</dl>
</li>
</ul>
<div class="bg2" style="padding: 15px;">
Content 2
</div>
</div>
</div>
</div>
<div class="content-floated">
Step #3. Open styles/we_clearblue/template/overall_footer.html
and find:
<!-- EVENT overall_footer_content_after -->
<!-- EVENT overall_footer_page_body_after -->
</div>
Step #4. Add after:
</div> <!-- /content-floated -->
Step #5. Open styles/we_clearblue/theme/common.css
and find:
.inventea-content:after {
content: "";
display: block;
clear: both;
}
Step #6. Add after:
.sidebar {
box-sizing: border-box;
float: right;
width: 20%;
margin-top: 60px;
padding-left: 20px;
}
.content-floated {
float: left;
width: 80%;
}