PlanetStyles Theme Documentation

Milk: Sidebar options

Milk comes with powerful and intelligent sidebars that can be used for showcasing your custom content.

Left sidebar: 120px Right sidebar: 300px

Sidebar options

Setting the sidebar options

Open FlightDeck extension (control panel)
Configure sidebar options as desired
Submit

Adding custom content

Open FlightDeck extension (control panel)
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)

Adjusting sidebar widths

Due to complexities within the Merlin framework (which powers Milk), 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

Last updated 4 months ago

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

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

<div class="sidebar_widget alt_block forabg">
    <div class="inner">
    <ul class="topiclist">
        <li class="header">
            <dl class="row-item">
                <dt>Blank Widget (Alt Block)</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>

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