# Milk: Sidebar options

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

**Left sidebar:** 120px\
**Right sidebar:** 300px

### Sidebar options

<table><thead><tr><th width="276">Option name</th><th width="156">Value</th><th>Output</th></tr></thead><tbody><tr><td><strong>Enable Sidebars?</strong></td><td>Yes</td><td><img src="/files/si2UtU7wcIuhWcTVCXMD" alt="" data-size="original"></td></tr><tr><td></td><td>No</td><td><img src="/files/Bq1Os33GZQZ4q3j0h9W7" alt="" data-size="original"></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td><strong>Sidebar Placement</strong></td><td>Left only</td><td><img src="/files/7O0h8h6JGpeuUucuJ05E" alt="" data-size="original"></td></tr><tr><td></td><td>Right only</td><td><img src="/files/b8oHxXWCBzqwycsJ5JVr" alt="" data-size="original"></td></tr><tr><td></td><td>Both</td><td><img src="/files/la87X2VR2AO0eE9MkdQc" alt="" data-size="original"></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td><strong>Enable Sidebar Profile Widget</strong><br><br>Shows profile information when logged in. <br><br>Shows login form when logged out. </td><td>Yes</td><td><img src="/files/nVyg066UTBRVrXjMyJg2" alt="" data-size="original"></td></tr><tr><td></td><td>No</td><td><img src="/files/67O8ClDo88aur6H8mhzg" alt="" data-size="original"></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td><strong>Enable Sidebar Search Widget</strong></td><td>Yes</td><td><img src="/files/aeaZUERJEksoWvh0kXBH" alt="" data-size="original"></td></tr><tr><td></td><td>No</td><td><img src="/files/YIvrh3vFK95Rc1dRVI8o" alt="" data-size="original"></td></tr></tbody></table>

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

<table><thead><tr><th width="188">Sidebar content</th><th>Preview</th><th>Code</th></tr></thead><tbody><tr><td>125 x 125 Grid</td><td><img src="/files/ZfMuCuaYMWOSGGox7nfo" alt="" data-size="original"></td><td><p></p><pre><code>&#x3C;div class="sidebar_widget ad_grid fancy_panel">
    &#x3C;div class="fancy_panel_padding">
        &#x3C;h3>Our Friends&#x3C;/h3>
        &#x3C;div class="sidebar_content">
            &#x3C;a href="#">&#x3C;img src="http://i66.tinypic.com/14xgt5l.jpg" />&#x3C;/a>
            &#x3C;a href="#">&#x3C;img src="http://i66.tinypic.com/14xgt5l.jpg" />&#x3C;/a>
            &#x3C;a href="#">&#x3C;img src="http://i66.tinypic.com/14xgt5l.jpg" />&#x3C;/a>
            &#x3C;a href="#">&#x3C;img src="http://i66.tinypic.com/14xgt5l.jpg" />&#x3C;/a>
        &#x3C;/div>
    &#x3C;/div>
&#x3C;/div>
</code></pre></td></tr><tr><td>Content block (matches accent colour)</td><td><img src="/files/1N3FFcBs0aB0aa1iB9cJ" alt="" data-size="original"></td><td><p></p><pre><code>&#x3C;div class="sidebar_widget sidebar_box forabg">
    &#x3C;div class="inner">
    &#x3C;ul class="topiclist">
        &#x3C;li class="header">
            &#x3C;dl class="row-item">
                &#x3C;dt>Blank Widget (Inherits Cat. Style)&#x3C;/dt>
            &#x3C;/dl>
        &#x3C;/li>
    &#x3C;/ul>
        &#x3C;div class="collapse-trigger open">
            &#x3C;span class="icon fa-minus tooltip-left" title="Collapse">&#x3C;/span>
            &#x3C;span class="icon fa-plus tooltip-left" title="Expand">&#x3C;/span>
        &#x3C;/div>
    &#x3C;ul class="topiclist forums">
		&#x3C;li class="row">
        	Some information goes here! :)
        &#x3C;/li>
    &#x3C;/ul>
    &#x3C;/div>
&#x3C;/div>
</code></pre></td></tr><tr><td>Content block (dark header)</td><td><img src="/files/SI4Iw3nq9nKDpSC84ZPK" alt="" data-size="original"></td><td><p></p><pre><code>&#x3C;div class="sidebar_widget alt_block forabg">
    &#x3C;div class="inner">
    &#x3C;ul class="topiclist">
        &#x3C;li class="header">
            &#x3C;dl class="row-item">
                &#x3C;dt>Blank Widget (Alt Block)&#x3C;/dt>
            &#x3C;/dl>
        &#x3C;/li>
    &#x3C;/ul>
        &#x3C;div class="collapse-trigger open">
            &#x3C;span class="icon fa-minus tooltip-left" title="Collapse">&#x3C;/span>
            &#x3C;span class="icon fa-plus tooltip-left" title="Expand">&#x3C;/span>
        &#x3C;/div>
    &#x3C;ul class="topiclist forums">
		&#x3C;li class="row">
        	Some information goes here! :)
        &#x3C;/li>
    &#x3C;/ul>
    &#x3C;/div>
&#x3C;/div>
</code></pre></td></tr><tr><td>Content block (stripe)</td><td><img src="/files/kvXPdBkOOIChAcarwXOY" alt="" data-size="original"></td><td><p></p><pre><code>&#x3C;div class="sidebar_widget fancy_panel forabg">
    &#x3C;div class="fancy_panel_padding">
    &#x3C;h3>Blank Widget (Fancy Panel)&#x3C;/h3>
    &#x3C;div class="collapse-trigger open">
        &#x3C;span class="icon fa-minus tooltip-left" title="Collapse">&#x3C;/span>
        &#x3C;span class="icon fa-plus tooltip-left" title="Expand">&#x3C;/span>
    &#x3C;/div>
    &#x3C;div class="sidebar_content">
        &#x3C;p>Some things go here :)&#x3C;/p>&#x3C;/div>
    &#x3C;/div>
&#x3C;/div>
</code></pre></td></tr><tr><td>Everything else</td><td></td><td>e762f78ed16248d2b16038599dea663d-ae7ca0f1c02d45f0aef1b17d6a6b23df</td></tr></tbody></table>

<table data-header-hidden><thead><tr><th></th></tr></thead><tbody><tr><td><pre><code>
&#x3C;div class="sidebar_widget">
    Your code here
&#x3C;/div>

</code></pre></td></tr></tbody></table>

### 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&#x20;
* On viewports below 990px, the right sidebar will collapse and show below the main forum content


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.planetstyles.net/feature-guides/milk-theme/milk-sidebar-options.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
