Feb 7, 2013

How to use Twitter Bootstrap with CMS Made Simple

Step by step instructions on how to implement Twitter Bootstrap using CMS Made Simple

Posted by: Jose Antonio

Hello all,

I was in the process of updating my site and wanted to move on to HTML5 as this is good old HTML as it is supposed to be.

Discussing with my brother on the best way to make my site responsive he suggested me to use Twitter Bootstrap and he was completely right! its beauty and simplicity are great, even if you want to develop a site with a fixed layout.

Now I came up with a little problem, how to use Bootstrap with the CMS of my preference: CMS Made Simple  (CMSMS). I always liked CMSMS as you can adapt any template design easily and you can choose which template to use for every page.

Ok, let's get it done...

Download Bootstrap source

Download the Bootstrap files clicking on the bottom above or going to the Bootstrap official page.

Unzip the file and rename the unzipped folder to twitter-bootstrap. Once this is done upload the folder and all files and subfolders contained in it to the root folder of your CMSMS installation (usually this is the public_html folder).

Now, go to http://yourdomain.com/twitter-bootstrap/docs/index.html and you can see that you have already working a full Bootstrap installation, all we have to do now is adapt it to CMSMS.

Create a  Template

Now we have to create a template; for the purpose of this tutorial I am going to use the Bootstrap Starter Template to show that you can have a fully functional CMSMS site with all the Bootstrap features; click here to see it working. I will keep posting and adapting the other Bootstrap templates to CMSMS. But remember: this is just a starting point to help you do your own thing.

In the admin section of your CMSMS site, go to templates and create a copy of the Simplex template and rename it to Bootstrap Template (thanks Goran Ilic) you can follow him on Twitter @uniqu3e.

Now, in the head section of your Bootstrap Template, you have to add the right styles, all we have to do is copy the styles of the starter template and add it to your new template.

First remove all the CSS style sheets associated with the template and copy the following code just below your {cms_stylesheet} tag:

<link href="{root_url}/twitter-bootstrap/docs/assets/css/bootstrap.css" rel="stylesheet">
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
<link href="{root_url}/twitter-bootstrap/docs/assets/css/bootstrap-responsive.css" rel="stylesheet">

And delete the Google Fonts Style Sheet if you won't be using that font on your template.

Adding Content and Menus to your template

Now, we move on to the <body></body> section of the template, first delete everything in between the <body></body> tags of your current template and copy everything in between the <body></body> tags from http://yourdomain.com/twitter-bootstrap/docs/examples/starter-template.html (including the javascripts), I will talk a bit more about this at the end...

Now in the current template find <h1>Bootstrap starter template</h1> and replace it with <h1>{title}</h1>

Delete the paragraph below (including the <p></p> tags) and replace it with {content}

And we are almost there, now go to templates and set all pages to Bootstrap Template.

Go to http://yourdomain.com and voilà your site is almost ready, we just have to add the menu to it.

Find <a class="brand" href="#">Project name</a> and replace it with <a class="brand" href="#">{Sitename}</a>

Now we have to do the menus, just go to Layout->Menu Manager and create a new template and call it TBS:TBS Navigation; this is a copy of the template created by Goran Ilic for the Bootstrap Admin Theme for CMSMS (once again thanks!)

Copy exactly this code and paste it on the new menu template:


{if $count > 0}
<div class='nav-collapse collapse'>
    <ul class='nav' role='menu'>
    {* if using cmsms lower then 1.11 change foreach below to {foreach from=$nodelist item='node'} *}
    {foreach $nodelist as $node} 
        {* if depth is greater then previous we need ul *}
        {if $node->depth > $node->prevdepth}
            {repeat string="<ul class='dropdown-menu' role='menu'>" times=$node->depth-$node->prevdepth}   
        {* if depth is lower then we have to close unordered list *}
        {elseif $node->depth < $node->prevdepth}
            {repeat string='</li></ul>' times=$node->prevdepth-$node->depth}
        {elseif $node->index > 0}
        {* is menu item current? *}
        {if $node->current == true}
            <li class='active{if $node->parent == true || $node->haschildren == true}{if $node->depth > 1} dropdown-submenu{else} dropdown{/if}{/if}'>
                <a href='{$node->url}' {if $node->parent == true || $node->haschildren == true}class='dropdown-toggle {$node->alias}' data-toggle='dropdown' data-target='#'{else}class='{$node->alias}'{/if}{if $node->target != ''} target='{$node->target}'{/if}>{$node->menutext}{if ($node->parent == true || $node->haschildren == true) && ($node->depth < 2)} <b class='caret'></b>{/if}</a>        
        {* is menu item parent and not sectionheader? *}
        {elseif $node->parent == true && ($node->type != 'sectionheader' && $node->type != 'separator')}
            <li class='{if $node->parent == true || $node->haschildren == true} active{if $node->depth > 1} dropdown-submenu{else} dropdown{/if}{/if}'>
                <a href='{$node->url}' data-toggle='dropdown' data-target='#' class='dropdown-toggle active {$node->alias}'{if $node->target != ''} target='{$node->target}'{/if}>{$node->menutext}{if ($node->parent == true || $node->haschildren == true) && ($node->depth < 2)} <b class='caret'></b>{/if}</a>        
        {* is menu item a sectionheader? *}
        {elseif $node->type == 'sectionheader' && ($node->parent == true || $node->haschildren == true)}
            <li class='sectionheader {if $node->depth > 1} dropdown-submenu{else} dropdown{/if}'>
                <a href='#' data-toggle='dropdown' class='dropdown-toggle {$node->alias}{if $node->current == true} active{/if}'>{$node->menutext}{if ($node->parent == true || $node->haschildren == true) && ($node->depth < 2)} <b class='caret'></b>{/if}</a>
        {* and sectionheader has no children? *}
        {elseif $node->type == 'sectionheader' && $node->haschildren == false}
            <li class='sectionheader nav-header'>
        {* should a menu item be separated? *} 
        {elseif $node->type == 'separator'}
            <li class='divider'>
            <li{if $node->parent == true || $node->haschildren == true} class='{if $node->depth > 1}dropdown-submenu{else}dropdown{/if}'{/if}>
                <a href='{$node->url}' {if $node->parent == true || $node->haschildren == true}class='dropdown {$node->alias}'{else}class='{$node->alias}'{/if}{if $node->target != ''} target='{$node->target}'{/if}>{$node->menutext}{if ($node->parent == true || $node->haschildren == true) && ($node->depth < 2)} <b class='caret'></b>{/if}</a>

    {repeat string='</li></ul>' times=$node->depth-1}</li>


Now find <div class="nav-collapse collapse"> and delete the unordered list below it (including the <ul></ul> tags) and replace it with {menu template="TBS:TBS Navigation"}


Nearly there!

All we have to do now is tweak the JavaScript links at the bottom of the page.

Simply copy {root_url}/twitter-bootstrap/docs in front of all the JavaScript links. Do not forget to delete the two dots in the front.

For example <script src="../assets/js/jquery.js"></script> will look:

<script src="{root_url}/twitter-bootstrap/docs/assets/js/jquery.js"></script>

Well that's it! you just have made CMS Made Simple compatible with Twitter Bootstrap.

Hope you have found this tutorial helpful and please do share it. Please feel free to leave your comments with question or suggestions that you might have.

Thank you for reading!