Building a Twitter Bootstrap template

From Sohowiki
(Difference between revisions)
Jump to: navigation, search
(updated the bottom list for clarity)
 
(3 intermediate revisions by one user not shown)
Line 10: Line 10:
 
<li>Download the CSS version of bootstrap at: http://getbootstrap.com/</li>
 
<li>Download the CSS version of bootstrap at: http://getbootstrap.com/</li>
 
(that is, not the Less or Sass versions. You can use Less or Sass, but this guide covers using the CSS version for now)
 
(that is, not the Less or Sass versions. You can use Less or Sass, but this guide covers using the CSS version for now)
<li>Put the zip in your template folder. Here’s the path: sohoadmin/program/modules/site_templates/pages . And extract the zip.</li>
+
<li>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.</li>
 
<li>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/</li>
 
<li>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/</li>
 
<li>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.</li>
 
<li>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.</li>
Line 28: Line 28:
  
 
<ol>
 
<ol>
<li>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 applied.</li>
+
<li>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. In other words, match the folder structure you have.</li>
<li>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.</li>
+
<li>There is no “jumbotron.css” stylesheet in the get bootstrap download zip, so we just deleted that link in our index.html. Plus we deleted other items that didn't come with the zip file, like the link to a favicon, etc. </li>
<li>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.</li>
+
<li>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. But you can still use them if you need to. </li>
 
</ol>
 
</ol>
  
  
 
[[category: Templates ]]
 
[[category: Templates ]]

Latest revision as of 15:55, 19 February 2015

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. In other words, match the folder structure you have.
  2. There is no “jumbotron.css” stylesheet in the get bootstrap download zip, so we just deleted that link in our index.html. Plus we deleted other items that didn't come with the zip file, like the link to a favicon, etc.
  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. But you can still use them if you need to.
Personal tools