.. _bootstrap-chapter: .. note:: A newer version of this tutorial using Django 1.9 is available from `Leanpub: https://leanpub.com/tangowithdjango19 `_ Bootstrapping Rango =================== In this chapter, we will be styling Rango using the *Twitter Bootstrap 3.2* toolkit. We won't go into the details about how Bootstrap works, and we will be assuming you have some familiarity with CSS. If you don't, check out the CSS chapter so that you understand the basics and then check out some Bootstrap tutorials. However, you should be able to go through this section and piece things together. To get started take a look at the `Bootstrap 3.2.0 website `_ - it provides you with sample code and examples of the different components and how to style them by added in the appropriate style tags, etc. On the Bootstrap website they provide a number of `example layouts `_ which we can base our design on. To style Rango we have identified that the `dashboard style `_ more or less meets our needs in terms of the layout of Rango, i.e. it has a menu bar at the top, a side bar (which we will use to show categories) and a main content pane. Given the html from the bootstrap website we need to do a bit of work on it before we can use it. This is what we did, the resulting html, which you can copy is below: * Replaced all references of ``../../`` to be ``http://getbootstrap.com`` * Replaced ``dashboard.css`` with the absolute reference, ``http://getbootstrap.com/examples/dashboard/dashboard.css`` * Removed the search form from the top nav bar * Stripped out all the non-essential content from the html and replaced it with ``{% block body_block %}{% endblock %}`` * Set the title element to be, ``Rango - {% block title %}How to Tango with Django!{% endblock %}`` * Changed the project name to be ``Rango``. * Added the links to the index page, login, register, etc to the top nav bar. * Added in a side block, i.e., ``{% block side_block %}{% endblock %}`` The New Base Template --------------------- .. code-block:: html Rango - {% block title %}How to Tango with Django!{% endblock %}
{% block side_block %}{% endblock %}
{% block body_block %}{% endblock %}
If you take a close look at the dashboard html source, you'll notice it has a lot of structure in it created by a series of ``
`` tags. Essentially the page is broken into two parts - the top navigation bar and the main pane which are denoted by the two ``
`` tags. In the nav bar section, we have injected all the links to the different parts of our website. Inside the main pane, there are two columns, one for the ``side_block``, and the other for the ``body_block``. Quick Style Change ------------------ Update your ``base.html`` with the html code above (assumes you are using the django-registration-redux package, if not you will need to update those url template tags). Reload your application. Obviously you will need a connection to the internet in order to download the css, js, and other related files. You should notice that your application looks heaps better with this one changes. Flip through the different pages. Since they all inherit from base, they will all be looking pretty good. Not perfect, but pretty good. .. note:: You could download all the associated files and stored them in your static folder. If you do this, simply update the base template to reference the static files stored locally. Now that we have the ``base.html`` all set up and ready to go, we can do a really quick face lift to Rango by going through the Bootstrap components and selecting the ones that suit the pages. Lets update the ``about.html`` template, by putting a page header on the page (http://getbootstrap.com/components/#page-header). From the example, all we need to do is provide an encapsulating ``
`` with the ``class="page-header"``: .. code-block:: html {% extends 'base.html' %} {% load staticfiles %} {% block title %}About{% endblock %} {% block body_block %}

About

.

Picture of Rango
{% endblock %} .. _fig-about-page-before: .. figure:: ../images/ch4-rango-about.png :figclass: align-center A screenshot of the About page without style. #TODO(leifos):update this screen shot. .. _fig-about-page-after: .. figure:: ../images/ch11-bootstrap-about.png :figclass: align-center A screenshot of the About page with Bootstrap Styling applied. #TODO(leifos):update this screen shot. To each template, add in a page-header. Remember to update all the templates in both ``rango`` and ``registration``. While the application looks much better, somethings look particularly out of place. For example on the registration page, the fields are not lined up, and the button looks like it is from the 20th century. .. _fig-register-initial: .. figure:: ../images/ch11-bootstrap-register-initial.png :figclass: align-center A screenshot of the Registration page with Bootstrap Styling applied but not customised. #TODO(leifos):update this screen shot. Also, you'll probably have noticed the sidebar is empty. In the next chapter we will sort that out with some handy navigation links. But first, lets sort out the Index page. The Index Page .............. Since we have only encapsulated the title with a page header i.e. ``
``, we haven't really capitalised on the classes and styling that Bootstrap gives us. So here we have taken the columns from the fluid page and used them to house the top categories and top pages. Since the original page had four columns, we have taken two and made them bigger by adjusting the column sizes. Updatet the ``index.html`` template to look like the following: .. code-block:: html {% extends 'base.html' %} {% load staticfiles %} {% block title %}Index{% endblock %} {% block body_block %} {% if user.is_authenticated %}

Rango says... hello {{ user.username }}!

{% else %}

Rango says... hello world!

{% endif %}

Categories

{% if categories %} {% else %} There are no categories present. {% endif %}

Pages

{% if pages %} {% else %} There are no categories present. {% endif %}

visits: {{ visits }}

{% endblock %} The page should look a lot better now. But the way the list items are presented is pretty horrible. Lets use the list-group style provided by Bootstrap, http://getbootstrap.com/components/#list-group. Change the ``
    `` elements to ``
      `` and the ``
    • `` elements to ``
    • `` then update the headings using a panel style: .. code-block:: html

      Categories

      Pages

      Replacing ``

      Categories

      `` and ``

      Pages

      `` respectively. Now the page should look pretty neat. .. _fig-index-page-before: .. figure:: ../images/ch11-bootstrap-index-initial.png :figclass: align-center A screenshot of the Index page with a Hero Unit. .. _fig-index-page-after: .. figure:: ../images/ch11-bootstrap-index-rows.png :figclass: align-center A screenshot of the Index page with customised Bootstrap Styling. The Login Page -------------- Now let's turn our attention to the login page. On the Bootstrap website you can see they have already made a `nice login form `_, see http://getbootstrap.com/examples/signin/. If you take a look at the source, you'll notice that there are a number of classes that we need to include to pimp out the basic login form. Update the ``login.html`` template as follows: .. code-block:: html {% block body_block %} {% endblock %} Besided adding in a link to the bootstrap ``signin.css``, and a series of changes to the classes associated with elements, we have removed the code that automatically generates the login form, i.e. ``form.as_p``. Instead, we took the elements, and importantly the id of the elements generated and associated them with the elements in this bootstrapped form. In the button, we have set the class to ``btn`` and ``btn-primary``. If you check out the `Bootstrap section on buttons `_ you can see there are lots of different colours that can be assigned to buttons, see http://getbootstrap.com/css/#buttons. .. _fig-register-page-after: .. figure:: ../images/ch11-bootstrap-login-custom.png :figclass: align-center A screenshot of the login page with customised Bootstrap Styling. #TODO(Leifos): update the screen shot Other Form-based Templates .......................... You can apply similar changes to ``add_cagegory.html`` and ``add_page.html`` templates. For the ``add_page.html`` template, we can set it up as follows. .. code-block:: html {% extends 'base.html' %} {% block title %}Add Page{% endblock %} {% block body_block %} {% if category %}
      {% csrf_token %} {% for hidden in form.hidden_fields %} {{ hidden }} {% endfor %} {% for field in form.visible_fields %} {{ field.errors }} {{ field.help_text }}
      {{ field }}
      {% endfor %}
      {% else %}

      This is category does not exist.

      {% endif %} {% endblock %} And similarly for the ``add_category.html`` template (not shown). The Registration Template ------------------------- For the ``registration_form.html``, we can update the form as follows: .. code-block:: html {% extends "base.html" %} {% block body_block %}
      {% csrf_token %}

      {% endblock %} Again we have manually transformed the form created by the ``{{ form.as_p }}`` template tag, and added the various bootstrap classes. .. note:: I am not happy with this solution. I would prefer this to be automated. It does give you an idea of the class from bootstrap which you need to augment your html templates though. Using Django-Bootstrap-Toolkit ------------------------------ A simple alternative would be to use ``django-bootstrap-toolkit`` see https://github.com/dyve/django-bootstrap-toolkit. Note that there are other packages like this. To install the ``django-bootstrap-toolkit`` run, ``pip install django-bootstrap-toolkit``. Add, ``bootstrap_toolkit`` to the ``INSTALLED_APPS`` tuple in ``settings.py``. Then modify the template like that shown below: .. code-block::html {% load bootstrap_toolkit %}
      {% csrf_token %} {{ form|as_bootstrap }}
      In which case the ``category.html`` template would become: {% extends 'base.html' %} {% load bootstrap_toolkit %} {% block title %}Add Category{% endblock %} {% block body_block %}
      {% csrf_token %} {{ form|as_bootstrap }}
      {% endblock %} This solution is much cleaner, and automated. However, it does not render as nicely :-(. Probably requires some tweaking to improve how it renders. The End Result -------------- Now that Rango is starting to look better we can go back and add in the extra functionality that will really pull the application together. .. _fig-register-page-custom: .. figure:: ../images/ch11-bootstrap-register-custom.png :figclass: align-center A screenshot of the Registration page with customised Bootstrap Styling.