🚀
PlanetStyles Theme Documentation
  • 👋Intrdouction
  • 🏃Getting started
    • How to install our phpBB themes
    • How to install phpBB extensions
    • How to update theme to new version
    • How to update extension to new version
    • How to edit code files
    • How to purge cache
    • How to set new theme as default
    • How to add your own code to our themes
  • 🛠️Troubleshooting
    • Theme not showing in "install styles" list
    • Extension not showing in "manage extensions"
    • Unable to find template "ajax.js"
    • HTTP error 500
    • No colours are showing up
    • Advance BBCode box on Milk theme
    • "missing style.css stylesheet"
  • ✨Feature Guides
    • 🥛Milk theme
      • Milk: Favicon
      • Milk: Logo
      • Milk: Header background
      • Milk: Navbar position
      • Milk: Font options
      • Milk: Layout width
      • Milk: Light / dark options
      • Milk: Accent colour options
      • Milk: Forum list options
      • Milk: Content block headers
      • Milk: Sidebar options
      • Milk: Social footer options
      • Milk: Post profile side
      • Milk: Collapsible panels
      • Milk: Scroll to top
      • Milk: Rounded corner options
      • Milk: Forum icon options
      • Milk: Global <head> code
Powered by GitBook
On this page
  • Sidebar options
  • Setting the sidebar options
  • Adding custom content
  • Custom content code examples
  • Adjusting sidebar widths
  • Responsive layout information

Was this helpful?

  1. Feature Guides
  2. Milk theme

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

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

  1. Open FlightDeck extension (control panel)

  2. Configure sidebar options as desired

  3. Submit


Adding custom content

  1. Open FlightDeck extension (control panel)

  2. Scroll to bottom

  3. Enter custom content in Left Sidebar Custom Content or Right Sidebar Custom Content

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

Content block (matches accent colour)

Content block (dark header)

Content block (stripe)

Everything else

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 1 year ago

Was this helpful?

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

<div class="sidebar_widget">
    Your code here
</div>