Integrating a pre-designed HTML-CSS template into my Django blog project: Dori's Python Life in Words is a practical way to enhance the look and feel of your web application. This guide explains how to seamlessly integrate a free HTML-CSS template into a Django blog project, with steps to update the forms and ensure proper functionality.
Download the Template
Choose a free HTML-CSS template that fits your project's design requirements. Extract the contents.
Organize Template Files
Place the HTML, CSS, JavaScript, and image files in the appropriate directories:
app/templates/core/static/css/core/static/js/core/static/images/core/static/fonts/Update Paths in the Template Files
Django uses {% static %} to locate static files. Update the template files to use Django’s static file system. For example:
<!-- core/templates/base.html -->
<!-- Favicon -->
<link rel="shortcut icon" href="{% static 'images/favicon/favicon.ico' %}">
<link rel="apple-touch-icon" sizes="144x144" type="image/x-icon" href="{% static 'images/favicon/apple-touch-icon.png' %}">
<!-- All CSS Plugins -->
<link rel="stylesheet" type="text/css" href="{% static 'css/plugin.css' %}">
<!-- Main CSS Stylesheet -->
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">base.htmlThe base.html file serves as the foundation for other templates:
<!-- core/templates/base.html -->
<div id="main">
<div class="container">
<div class="row">
<!-- Blog Content - Start -->
{% block content %}
{% endblock %}
<!-- Blog Content - End -->
<!-- Sidebar - Start -->
<div class="col-md-3">
<div class="about-fixed">
<div class="my-detail">
<ul class="menu-link">
<li><a href="{% url 'blog:post_list' %}">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
<div class="white-spacing">
<h1>Dorothea Reher</h1>
<span>Django Developer</span>
</div>
<div class="white-spacing">
<h2>Dori's Python Life in Words</h2>
<p>This is my blog. I've written {% total_posts %} posts so far.</p>
<p>
<a href="{% url 'blog:post_feed' %}">Subscribe to my RSS feed</a>
</p>
</div>
<ul class="social-icon">
<li><a href="https://fr.linkedin.com/in/dorothea-reher" target="_blank" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="https://github.com/DoriDoro" target="_blank" class="github"><i class="fa fa-github"></i></a></li>
<li><a href="https://dorothea-reher.com" title="Check out my portfolio" target="_blank" class="github"><i class="fa fa-link"></i></a></li>
</ul>
</div>
</div>
</div>
<!-- Left Sidebar - End -->
</div>
<!-- Legend Start -->
<div class="col-md-9 page-body margin-top-50 legend">
<h3>Latest posts</h3>
{% show_latest_posts 3 %}
<h3>Most commented posts</h3>
{% get_most_commented_posts 3 as most_commented_posts %}
<ul class="legend-link">
{% for post in most_commented_posts %}
<li>
<a href="{{ post.get_absolute_url }}">{{ post.title }}</a>
</li>
{% endfor %}
</ul>
</div>
<!-- Legend End -->
<!-- Footer Start -->
<div class="col-md-9 page-body margin-top-50 footer">
<footer>
<ul class="menu-link">
<li><a href="{% url 'blog:post_list' %}">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
<p>© Copyright 2024 Dorothea Reher. All rights reserved</p>
<!-- UiPasta Credit Start -->
<div class="uipasta-credit">Design By <a href="http://www.uipasta.com" target="_blank">UiPasta</a> and modified by Dorothea Reher.
</div>
<!-- UiPasta Credit End -->
</footer>
</div>
<!-- Footer End -->
</div>
</div>This template includes placeholders for title and content.
Extend base.html in other templates using Django’s inheritance mechanism, as an example:
<!-- blog/templates/post/search.html -->
{% extends "base.html" %}
{% load blog_tags %}
{% block title %} - Search {% endblock %}
{% block content %}
<div class="col-md-9">
<div class="col-md-12 page-body">
<div class="row">
<!-- Detailed Post - Start -->
<div class="sub-title">
<a href="{% url 'blog:post_list' %}" title="Go to Home Page"><h2>Back Home</h2></a>
</div>
<div class="col-md-12 content-page">
<div class="col-md-12 blog-post">
<!-- Post Headline - Start -->
{% if query %}
<h1>Posts containing "{{ query }}"</h1>
<h3>
{% with results.count as total_results %}
Found {{ totoal_results }} result{{ total_results|pluralize }}:
{% endwith %}
</h3>
<div class="search-body">
{% for post in results %}
<h4>
<a href="{{ post.get_aboslute_url }}">
{{ post.title }}
</a>
</h4>
{{ post.body|markdown|truncatewords_html:12 }}
{% if not forloop.last %} <hr> {% endif %}
{% empty %}
<p>There are no results for your search.</p>
{% endfor %}
<hr>
</div>
<p><a href="{% url 'blog:post_search' %}">Search again</a></p>
{% else %}
<div class="post-title">
<h1>Search for posts</h1>
<form method="get">
{{ form.as_p }}
<input class="btn btn-secondary" type="submit" value="Search">
</form>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endblock %}
Django forms render HTML by default, but they might not align perfectly with the new template's styles. Here's how to customize them:
forms.pyAdd widgets to customize form fields:
# blog/forms.py
class EmailPostForm(forms.Form):
name = forms.CharField(
max_length=25,
widget=forms.TextInput(
attrs={"class": "form-control", "placeholder": "Your name"}
),
)
email = forms.EmailField(
widget=forms.EmailInput(
attrs={"class": "form-control", "placeholder": "Your Email address"}
)
)
to = forms.EmailField(
widget=forms.EmailInput(
attrs={"class": "form-control", "placeholder": "Email address of receiver"}
)
)
comments = forms.CharField(
required=False,
widget=forms.Textarea(
attrs={"class": "form-control", "rows": 6, "placeholder": "Your message"}
),
)Use Django's {% csrf_token %} and manually structure the form to match the template:
<!-- blog/templates/post/share.htnl
{% extends "base.html" %}
{% block title %} - Share a Django Blog post {% endblock %}
{% block content %}
<div class="col-md-9">
<div class="col-md-12 page-body">
<div class="row">
<div class="sub-title">
<a href="{% url 'blog:post_list' %}" title="Go to Home Page"><h2>Back Home</h2></a>
</div>
<div class="col-md-12 content-page">
<div class="col-md-12 blog-post">
<!-- Shared Post - Start -->
{% if sent %}
<h1>E-mail successfully sent</h1>
<p>
The article <span class="share-content">"{{ post.title }}"</span> was successfully
sent to <span class="share-content">{{ form.cleaned_data.to }}</span>.
</p>
{% else %}
<h1>Share <span class="share-content">"{{ post.title }}"</span> by e-mail</h1>
<form method="post">
{{ form.as_p }}
{% csrf_token %}
<input class="btn btn-secondary" type="submit" value="Send e-mail">
</form>
{% endif %}
<!-- Shared Post - End -->
</div>
</div>
</div>
</div>
</div>
{% endblock %}Run the Development Server
Start the server and navigate to your site
Check Static Files
Ensure the styles, scripts, and images load correctly. If not, verify the paths in the templates and ensure DEBUG=True in settings.py during development.
Test Form Styling
Create or update a post to verify the forms render with the new styles.
Integrating an HTML-CSS template into a Django project enhances the design while maintaining the app's dynamic capabilities. By carefully organizing static files, modifying forms, and using Django's templating engine, you can create a professional-looking application efficiently.