In our previous blog, we saw how to install and configure Mezzanine blog and up running. As you can see, the site had no fancy design and it is a typical blog layout for the site. But this site you are reading now is a mezzanine blog with a fancy home page and a matching inner page. How its done ? First of all get a nice design from a web designer and convert it to HTML.

Step 1. Convert HTML to fit Django

Yes, you know Mezzazine is Django. Now everything applicable to Django template is applied here, with a difference. Our app is not rendering any HTML directly yet. We dont have a view yet. All templates we see is part of mezzanin. So you have to get all templates from mezzanine to our project. Fo that use Django's collecttemplates command

$ python manage.py collecttemplates
Copied 47 templates

At this point we are interested in one file, index.html. This file contains the HTML for home page. Since this website uses entirely different HTML, we replaced index.html with our design. Next step is to make it work through Django. If you check the site via browser, you will see the HTML with no image, no styles and no Javascript. Then we need to configure the HTML page to load files from the static folders for JS, CSS and images. Django experts can skip reading this step. A Sample code is

<!--Load Django static directives -->
{% load staticfiles %}

<!-- Change CSS path -->
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
<link href="{% static "css/style.css" %}" rel="stylesheet">

<!--Change JavaScript path -->
<script src="{% static "js/jquery-2.1.1.js" %}"></script>
<script src="{% static "js/pace.min.js" %}"></script>
<script src="{% static "js/bootstrap.min.js" %}"></script>


<!--Change image path -->
<img src="{% static "img/atemon_logo.png" %}" alt="ATEMON logo." /></a>

Now copy the folders cssjavascript and images from the design to the static folder of the project. Now restart the project and browse via a browser. You should see your nice home page, but the /blog/ url will have old mezzanine theme.

Now you can decide what is the common code for home page and the inner pages. For this website, we have the same header and menu and footer including contacts. Copy the new HTML from index.html to base.html. Then keep the "shared" thhings like meu, footer header etc in the base.html and add a block for main content. Then edit the index.html and remove what all kept in base.html and enclose the remaining content in a main block

base.html

<!DOCTYPE html>
<html lang="en">
{% load staticfiles %}
<head>
    <!-- Meta tags -->
    ...
    <!--CSS tags -->
    <link href="{% static "font-awesome/css/font-awesome.min.css" %}" rel="stylesheet">
    <link href="{% static "css/plugins/bootstrap-social.css" %}" rel="stylesheet">
    ....
</head>
<body>
    <div class="navbar-wrapper">
        <!-- Top navigaton code -->
    </div>
     <div class="outer-wrapper-breadcumb">
        <!-- Breadcrumb and search. Not for index page-->
    </div>

    <!-- The main block. -->
    {% block main %}
    {%endblock%}

    <!-- Contact section -->
    <section id="contact" class="gray-section contact">
 
    </section>
    <!--Javascript section -->
    {% compress js %}
    <script src="{% static "js/jquery-2.1.1.js" %}"></script>
 
</body>
</html>

index.html 

<!-- Tell Django to use base.html as the base for this template--->
{% extends "base.html" %}

{% block main %}
<!-- HTML code for home page -->
{% endblock %}

The Django has a better and detailed documation on templates here. With this, we are ready with our websites home page. 

Now if you go to http://127.0.0.1:8000/blog/ you will see that the base.html is reused, but there is some style issue.

Step 2: Convert the blog's home page

The HTML we are currently focusing at are

templates/
└── blog/
    ├── blog_post_detail.html
    ├── blog_post_list.html
    └── includes
        └── filter_panel.html

blog_post_list.html is the homepage for HTML. It contain different blocks. As you can see, only the content of {% block main %} is what we saw initially. There are other blocks inside the template. First apply HTML/Style from the designer to {% block main %}. Then change base.html to include other blocks as required. In our case, the designer included almost everything inside {% block main %} which made our task easier.

Other main blocks are

{% block meta_title %}  <!-- The title tag for each page is different on each page. Nice SEO -->

{% block meta_keywords %}  <!--  Meta keywords - SEO -->

{% block meta_description %} <!--  Meta description -->

{% block breadcrumb_menu %} <!-- Breadcrumb menu -->

{% block main %} <!--  Main block -->

{% block right_panel %} <!-- block right panel -->

Now you need to change the base.html to include title, keywors and description meta tags. If breadcrumb and right panel need to go to base.html or blog_post_list.html, s as per your designs.  After making these changes, your blog's home page will to look better. The filter_panel.html is the right panel's HTML. You can customize the right panel with required style.

Step 3: Customize blogs left tree, footer etc

Since our blog's design didnt have a left tree, we just removed its reference from all table and we are keeping the websites footer for blog, we removed reference to that to. the templates are at

└── pages/
    └── menus/
        ├── admin.html     # Menu for admin user
        ├── breadcrumb.html   # Breadcrumb on top
        ├── dropdown.html    # Top menu with dropdown
        ├── footer.html    # Main footer
        ├── footer_tree.html    # Menu inside footer
        └── tree.html    # Left menu

You may customize each of these templates accordingly. Now we had to djust some colors, styles and alignments accordingly to fit our theme. You may customize other templates accordingly.

We did these to get our site up & running. removed reference to unused items.

Happy Blogging!