Building a Twitter Bootstrap template

From Sohowiki
Revision as of 14:57, 14 April 2014 by Soho (Talk | contribs)
Jump to: navigation, search

The following is a guide for creating a Soholaunch template with Twitter Bootstrap.

Here’s the complete working template file that this guide uses: http://site.soholaunch.com/media/bootstrap-basic-gray.zip

Feel free to download it and use it.

Main getting started steps:

  1. Download the CSS version of bootstrap at: http://getbootstrap.com/
  2. (that is, not the Less or Sass versions. You can use Less or Sass, but this guide covers using the CSS version for now)

  3. Put the zip in your template folder. Here’s the path: sohoadmin/program/modules/site_templates/pages/your_template_name. Where "your_template_name" is the folder name that will contain your template. Then extract the zip in there.
  4. Add an index.html file. As of this writing, a default index.html doesn’t come with the zip, but Bootstrap’s example templates are here, under “examples”: http://getbootstrap.com/getting-started/
  5. If using one of their templates, open one in your browser, view the source and copy and paste it into your index.html file and save it in your template folder. This guide uses the “Jumbotron” template.
  6. Add the #relative_template_path# pound variable to any links to Bootstrap’s default stylesheets.
  7. Add the pound variables, a custom.css file, and then start making your template.

The menu

The main things the menu needs are certain css classes added to different elements. Copy the pgm-auto_menu.php found inside the zip file at the top of this doc, and paste it into your template folder. We added the required classes to it to make the menu work (like collapse into the “hamburger” icon, and retain all the drop-down menu items).

Add the #hmains# pound variable into the correct place in index.html for the menu. It’s usually where the template starts building out the menu with unordered list items (i.e. ul’s and li’s).

Our index.html and commentary

If you take a look at the index.html file in our template zip, you'll see we made a few changes. We had to change a few things from the Jumbotron template code that we copied and pasted. Below are the main highlights so you don’t miss anything:

  1. At the bottom, the main javascript file link had a path like ../../js/bootstrap.min.js . Remove the ../../ so it’s just js/bootstrap.min.js, or else it won’t be applied.
  2. There is no “jumbotron.css” stylesheet in the default download zip, so we just deleted that link in our index.html and it didn’t seem to matter.
  3. We commented out any forms that came with the template. Soholaunch lets you drag and drop login and search boxes already in the page editor.
Personal tools