May 222014
 
Article WordPress

Adding style with bootstrap

Now that all the basic components of a theme have been added to our sample “minimum” theme, it is time to spend some time working on the design. To do it, we will use the Twitter Bootstrap framework. Bootstrap 3 offsers an out-of-the-box responsive solution to render the site on multiple devices, from desktop computers to laptops, tablets and smartphones.

The first steps of this task are:

  • Download Bootstrap 3 and extract the content of the zip file under the theme’s directory (for the development of our sample theme, we have downloaded bootstrap-3.1.1-dist.zip).
  • Edit stile.css to import the bootstrap stylesheet:

Then, we can load again our site in the browser, and have a look at the result:

 

Indeed, the look and feel of the site has improved substantially. The menu, however, still appears as a list of elements.

Next, we will use the bootstrap grid to put the sidebar to the right of the main content. To do this, the whole content of the page is put inside a “container” div, with to inner divs in it:

  • A div with class “col-md-8”, to hold the main content
  • A div with class “col-md-4”, that will contain the sidebar

1. In the header.php template, replace all the lines below the <body> tag with:

2. At the beginning of the footer.php template, add the markup to close the “col-md-8” div, and enclose the sidebar inside a  “col-md-4” div:

3. Also in the footer.php template, close the “container” div immediately before the </body> tag:

And, loading again the site in the browser, we can see how the sidebar is now placed to the right of  the main content:

blog-with-sidebar

 

 

In the next post in this series we will explain the changes required on the theme templates to render the menu as a bootstrap navigation bar.

References

 Posted by at 4:27 pm

 Leave a Reply

(required)

(required)