H2O: Sidebar options
H2O comes with powerful and intelligent sidebars that can be used for showcasing your custom content.
Left sidebar: 120px
Right sidebar: 300px
Sidebar options
| Option Name | Value | Output |
| Enable Sidebars? | Yes | |
| No | |
|
| Sidebar Placement | Left Only | |
| Right Only | |
|
| Both | |
|
| Enable Sidebar Profile Widget Shows profile information when logged in. Shows login form when logged out. |
Yes | |
| |
No | |
| Enable Sidebar Search Widget | Yes | |
| No | |
|
Setting the sidebar options
- Open H2O theme settings
- Configure sidebar options as desired
- Submit
Adding custom content
- Open H2O theme settings
- Scroll to bottom
- Enter custom content in Left Sidebar Custom Content or Right Sidebar Custom Content
- Submit
The sidebars support HTML and special characters. See examples in section below.
The sidebars don't support template events, IF statements, JavaScript, PHP etc. These need to be added to the template files manually (sidebar_left.html and sidebar_right.html).
Custom content code examples
These can be entered through the FlightDeck extension (see steps above)
| Sidebar content | Preview | Code |
| 125 x 125 Grid | |
<div class="sidebar_widget ad_grid fancy_panel">
<div class="fancy_panel_padding">
<h3>Our Friends</h3>
<div class="sidebar_content">
<a href="#"><img src="http://i66.tinypic.com/14xgt5l.jpg" /></a>
<a href="#"><img src="http://i66.tinypic.com/14xgt5l.jpg" /></a>
<a href="#"><img src="http://i66.tinypic.com/14xgt5l.jpg" /></a>
<a href="#"><img src="http://i66.tinypic.com/14xgt5l.jpg" /></a>
</div>
</div>
</div>
|
| Content Block | |
<div class="sidebar_widget sidebar_box forabg">
<div class="inner">
<ul class="topiclist">
<li class="header">
<dl class="row-item">
<dt>Blank Widget (Inherits Cat. Style)</dt>
</dl>
</li>
</ul>
<div class="collapse-trigger open">
<span class="icon fa-minus tooltip-left" title="Collapse"></span>
<span class="icon fa-plus tooltip-left" title="Expand"></span>
</div>
<ul class="topiclist forums">
<li class="row">
Some information goes here! :)
</li>
</ul>
</div>
</div>
|
| Content Block (stripe) |
|
<div class="sidebar_widget fancy_panel forabg">
<div class="fancy_panel_padding">
<h3>Blank Widget (Fancy Panel)</h3>
<div class="collapse-trigger open">
<span class="icon fa-minus tooltip-left" title="Collapse"></span>
<span class="icon fa-plus tooltip-left" title="Expand"></span>
</div>
<div class="sidebar_content">
<p>Some things go here :)</p></div>
</div>
</div>
|
| Everything else | <div class="sidebar_widget">
Your code here
</div>
|
Adjusting sidebar widths
Due to complexities within the Merlin framework (which powers H2O), it is not recommended to adjust the sidebar widths
Responsive layout information
- The left sidebar will only show on viewports 1200px or wider
- On viewports below 990px, the right sidebar will collapse and show below the main forum content