How do I customize the look and feel of my blog?

The Web Cube blog application contains two main sections the blog entry list and the blog entry pages. Each of these sections can be customized with the help of DB Templates

First let's identify the main templates used by each section.

 

The blog entry list section uses:

  • blog/base.html
  • blog/blogentry_list.html
  • blog/includes/blogentry.html
  • blog/includes/extra_nav.html

 

The blog entry pages uses:

  • blog/base.html
  • blog/blogentry_detail.html
  • blog/includes/blogentry.html
  • social/blogentry.html
  • blog/includes/extra_nav.html

 

One of the main templates used on the blog entry list and the blog entry pages is blog/includes/blogentry.html. So let's open this template and explore its contents.

 

1. Click on the CMS tab.

Screen Shot 2013-01-10 at 11.45.16 AM.png

 

2. Click on the Templates menu items.

Screen_Shot_2013-02-21_at_8.55.46_AM.png

 

3. Click on the Add template button.

Screen_Shot_2013-02-21_at_8.56.33_AM.png

 

4. Write the template path blog/includes/blogentry.html in the Name text box.

Screen_Shot_2013-02-21_at_8.57.52_AM.png

 

5. Leave the Content text box empty.

Screen_Shot_2013-02-21_at_8.56.52_AM.png

 

6. Click on the Save and continue editing button.

Screen_Shot_2013-02-21_at_9.01.30_AM.png

 

7. The Content text box will be populated with the code below. Since Web Cube is is built on the Django framework you will notice the Django template tags and filters used throughout the template.

{# WebCube 4.2 #}
{% load markup comments i18n %}
<article>

<header>
<p class="date"><time pubdate datetime="{{ entry.date_added|date:'c' }}">{{ entry.date_added|date:"F jS, Y" }}</time></p>
<h1 class="title"><a href="{{ entry.get_absolute_url }}">{{ entry.title|title }}</a></h1>
</header>

<div class="body">{{ entry.body|markdown }}</div>

{% if entry.blogvideo_set.all or entry.blogimage_set.all %}
<div class="media">
{% if entry.blogvideo_set.all %}
{% for video in entry.blogvideo_set.all %}
<div class="video{% cycle '' ' second' ' third' %}" data-webcube-order="{{ video.order }}" data-webcube-video="{% if video.oembed_code %}{{ video.oembed_code }}{% else %}{{ video.video.url }}{% endif %}" data-thumbnail="{{ video.thumbnail.url }}" {% if video.video %}data-nonembed{% endif %}></div>
{% endfor %}
{% endif %}

{% if entry.blogimage_set.all %}
{% for img in entry.blogimage_set.all %}
<div class="image{% cycle '' ' second' ' third' %}" data-webcube-order="{{ img.order }}">
<img src="{{ img.original.display.url }}" alt="{{ img.title }}" />
{% if img.description %}
{{ img.description|safe }}
{% endif %}
</div>
{% endfor %}
{% endif %}

</div>{# eo .media #}
{% endif %}{# eo if entry.blogvideo_set.all or entry.blogimage_set.all #}

<footer>
<div class="footer">
{% if entry.enable_comments %}
{% get_comment_count for entry as comment_count %}
<p class="comment_count"><a href="{{ entry.get_absolute_url }}#comments">Comments <span>({{ comment_count }})</span></a></p>
{% endif %}

{% include 'social/blogentry.html' %}

</div>{# eo .footer #}
</footer>
</article>

 

Now let's explore some of the template tags and filters used on this template.

The {{ entry.title | title }} template tag is used for the blog title. The title filter converts a string into a titlecase. To remove the titlecase conversion all is needed is removing the title filter from the title template tag.

The {{ entry.body | markdown }} template tag is used to display the body of the blog. The markdown template filter is used to parse the markdown markup language. 

The social bookmarking is part of another template located at social/blogentry.html. To customize the social bookmarking section add the social/blogentry.html to the DB templates and edit the template.

Screen_Shot_2013-02-21_at_9.39.08_AM.png

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk