Bootstrap Columns Plugin for MODX Evolution

This simple and powerful plugin allows you to switch layout and sidebars in any MODX bootstrap template.

• Full Width
• Left Sidebar
• Alt Left Sidebar (alternative left sidebar)
• Right Sidebar
• Alt Right Sidebar (alternative right sidebar)
• Left and Right Sidebars
• 2 Left Sidebars (default and alternative left sidebars)
• 2 Right Sidebars (default and alternative right sidebars)
• 2 Left and 1 Right Sidebars
• 1 Left and 2 Right Sidebars

What you need

Any MODX Boostrap template

Basic Template

Just add class="[+CoClass+]" into your bootstrap "content div" and four "sidebar placeholder"

......

<section>

      <div class="container">

          [+ColumnLContent+] <!--sidebar left 1 chunk placeholder--->

          [+ColumnL2Content+] <!--sidebar left 2 chunk placeholder--->

         <div class="[+CoClass+]"> <!---content div class placeholder--->

           [*content*]

          </div>

          [+ColumnRContent+] <!--sidebar right 1 chunk placeholder--->

          [+ColumnR2Content+] <!--sidebar right 2 chunk placeholder--->

      </div>

</section>

.......

Sidebars

Create 4 chunks for your sidebars

Example chunk code for sidebar

<aside class="[+CRClass+]"> <!--sidebar class placeholder--->

 <h2>Sidebar</h2>

   <div class="widget">  

   ....

   </div>

</aside>

If you prefer, you can use TVs inside sidebars chunks for onpage "sidebar content" editing

<aside class="[+CRClass+]"> <!--sidebar class placeholder--->

[*Sidebar1*]

</aside>

Plugin configuration

You just need to set your sidebar chunks:

• Left Sidebar Chunk: default left sidebar chunk name
• Right Sidebar Chunk: default right sidebar chunk name
• 2 Left Sidebar Chunk: alternative left sidebar chunk name
• 2 Right Sidebar Chunk: alternative right sidebar chunk name

optional:

"Sidebar Width in two columns layout":
The sidebar width in "single sidebar" layouts

• LeftSidebar
• LeftSidebar2
• RightSidebar
• RightSidebar2

The Page Layout Template Variable

Assign PageLayout template variable to your Bootstrap template.

Edit a resource and shoose your favourite layout. Done!

Instructions

Install with Package Manager or Store module

Comments