Skip to content

Instantly share code, notes, and snippets.

@jpustula
Last active April 26, 2016 08:40
Show Gist options
  • Save jpustula/ea53171a05c2ce842c46029eb48df35c to your computer and use it in GitHub Desktop.
Save jpustula/ea53171a05c2ce842c46029eb48df35c to your computer and use it in GitHub Desktop.
Adding sidebar in we_clearblue 2.1 for phpBB 3.1

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%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment