Giving Style to Blog with Django

We already got progress on Django. I made a blog application in this tutorial. Of course, this project is unfinished. That's is a journey to completion of the project. In this post, I'm going to give style our blog. But this will be optional for you. You can give different styles compared to what I gave. I already used Bootstrap in the project. So, this will be very helpful. I'm going to use CSS file called styles.css that I already added our template as static file. You can see here:

{% load static %}

<!DOCTYPE html>
<html>
    <head>
        <title>My Blog</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="{% static 'styles.css' %}">
        <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
        <script src="{% static 'js/jquery.min.js' %}"></script>
        <script src="{% static 'js/bootstrap.min.js'%}"></script>
    </head>
    <body>
    ...

styles.css file is in static folder. Now, let's run the server and let's look at the page how does it look:

I will give some styles to the post card. We need to class name to do that in the related html files. Firstly, I opened index.html file and I added new class name to the div:

{% extends '_base_layout.html' %}

{% block content %}
<div class="row">
    <div class="col-sm-9">
        {% for post in posts %}
            <div class="card post-preview">
                <div class="card-body post-body">
                    <h5 class="card-title post-title">
                        <a href="{% url 'detail' pk=post.pk %}">{{ post.title }}</a> 
                     </h5>
                    <p class="card-text post-summary"> {{ post.content }} </p>
                    <a href="#" class="btn btn-primary post-readmore">Read more..</a>
                </div>
            </div>
        {% endfor %}
    </div>
    <div class="col-sm-3">Sidebar</div>
</div> 
{% endblock %}

I added new class names to make easier to manipulate them using CSS. The post cards looks like very attached to each other and so primitive. According to these class names, I will change this view of post cards in the index page. I opened styles.css file:


/* blog post card */
.post-preview{
    background-color: rgb(215, 244, 248);
    margin-bottom: 15px;
    border: 1px solid #999;

}

.post-body{ 

}

.post-title{
    padding: 10px 5px;
    border-bottom: 1px solid #ccc;
}

.post-title a{
    color: #000;
    text-decoration: none;
}

.post-summary{
    font-size: 14px;
    padding: 5px;
}

.post-readmore{
    background-color: #333;
    font-size: 14px;
    font-weight: 600;
    padding: 5px;
    float: right;
    border: none;
}

.post-readmore:hover{
    background-color: #000;
    font-size: 14px;
    font-weight: 600;
    padding: 5px;
    float: right;
    border: none;
}

And the result:

I know it's not good really. But the important thing is how do we do that. I will do it other sections myself. In the next post, I will give css code. Probably I will share it on GitHub.

gurbdev

Giving Style to Blog with Django

No comments:

Post a Comment