Tag Archives: bootstrap

Responsive Umbraco Blog with Twitter Bootstrap

Umbraco 4.9 logo

So the semester assignments are finally turned in and the exam is still a way off so the time has finally come for me to look into Umbraco 4.9.
For the first little project to get me started, I’ve decided to try and put Twitter Bootstrap to work. Below you can find a relatively basic tutorial of how to make one of the starterkit blogs responsive.

The starterkit I am using is called SweetAs and is available during Umbraco 4.9 installation. We will start by stripping it down and then we will make it responsive with Bootstrap.

I am using Visual Studio to manipulate the files, but you might just as well do it from within your backoffice.


Setting Up Umbraco and Bootstrap Files

  1. Install Umbraco 4.9 with blog starterkit. Choose SweetAs.
  2. Download Bootstrap and add the files to proper folders in your Umbraco project (.js files to scripts/js, .css files to css folder)
  3. Remember to download new version of jquery (1.8 or newer) and substitute it for blog starterkit version (right now it’s 1.4 and it doesn’t work)
  4. Comment out references to all css files in masterpages/umbMaster.master and add reference to bootstrap.css and bootstrap-responsive.css, bootstrap.js. If you are sure you will use no styles from the existing css files, feel free to remove the links and the corresponding files. You can also remove reset.css – this is included in your bootstrap.css file anyway.
  5. In the same file replace the meta viewport tag with this tag:
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

    The existing one with “;” causes Chrome to throw errors.

  6. Update: In order to make sure that the navigation also works from within the posts, you need to change the links to scripts. Go to umbBlogpost.master file and change the cp_head content placeholder to look like this:
    <asp:content contentplaceholderid="cp_head" runat="server">
      <script type="text/javascript" src="../../../scripts/js/jquery.min.js"></script>
      <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js></script>
      <script type="text/javascript" src="../../../scripts/js/bootstrap.js"></script>
    </asp:content>
    

Changing the Umbraco Code

  1. In masterpages/umbMaster.master: add class=”container-fluid” on div id=”main” and div id=”footer”
  2. In masterpages/umbHomepage.master: add “row-fluid” to the div id=”content” class. Now that we have the row we need to divide it into spans.
     <div class="bodyText span7">
    

    and

    <div id="sidebar" class="umbModuleContainer span4 offset1">
    

    You need to do that because the homepage document type contains two columns and we want to make sure that the layout responds nicely to screen sizes.

    If you want to make sure that the bodyText is on the left, make sure that it comes first in the code.

    To learn more about the fluid layout and the grid , take a look at the Bootstrap page.

  3. In xslt/umbTopNavigation.xslt: change the code within template tags so that it looks like the following:
    <xsl:template match="/">
    
          <div class="navbar">
            <div class="navbar-inner">
              <div class="container-fluid">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar">.</span>
                <span class="icon-bar">.</span>
                <span class="icon-bar">.</span>
              </a>
                <div class="nav-collapse collapse">
                  <ul id="topNavigation" class="nav">
                    <li class="home">
                      <xsl:if test="$currentPage/@id = $currentPage/ancestor-or-self::* [@level=$level]/@id">
                        <xsl:attribute name="class">home current</xsl:attribute>
                      </xsl:if>
                      <a href="/">Home</a>
                    </li>
                    <xsl:for-each select="$currentPage/ancestor-or-self::* [@level=$level]/* [@isDoc and string(umbracoNaviHide) != '1']">
                      <li>
                        <xsl:if test="@id = $currentPage/@id">
                          <xsl:attribute name="class">current</xsl:attribute>
                        </xsl:if>
                        <a class="navigation" href="{umbraco.library:NiceUrl(@id)}">
                          <span>
                            <xsl:value-of select="@nodeName"/>
                          </span>
                        </a>
                      </li>
    
    
                    </xsl:for-each>
                  </ul>
                </div>
              </div>
            </div>
          </div>
    
        </xsl:template>
    

    It might look complicated but all you really do is adding the markup and classes to tell Bootstrap what to with the navigation when screen size changes.

    You can read more about what the different elements do on bootstrap’s page.

Final Thoughts

And done. Wasn’t so hard now, was it? Your blog is now responsive. Resize the screen to your heart’s content.

This, of course, is not the end of your work. Your blog is stripped bare so you will need to add styles and graphics. But all you need to do is dive into bootstrap.css and modify it as per usual. Enjoy and let me know how it went.