How to create a simple blog using Django 3 - part 8

/ #Django

The blog needs some styling. In this part of the series, I'll show you how to include CSS files into our project.

Creating the CSS file

There are a few different ways you can serve static files like CSS. In the development phase we can just use Django for this, but in production I suggest something like Nginx.

In the root of the blog folder, create a new folder called "media" and add an empty file inside called "style.css". Inside the CSS-file, add the following content:

html{min-height:100%;background:#f3f3f3}body{font-family:Verdana,Arial}h1,h2,h3,h4,h5,h6{font-family:Lora}.navbar h1{font-size:18px;line-height:18px;text-transform:uppercase;color:#fff}.main-content{width:calc(100% - 270px)}@media all and (max-width:767px){.main-content{width:100%}}.newsletter{padding:40px;background:#555;text-align:center}.newsletter h2,.newsletter label{color:#fff}.splitter{display:flex;justify-content:space-between}@media all and (max-width:767px){.splitter{display:block}}.splitter-aside{width:250px}.splitter-aside .search{padding:20px;background:#fff}.splitter-aside .categories{margin-top:20px;padding:20px;background:#fff}.splitter-aside .categories h4{margin-bottom:20px;font-size:18px}.splitter-aside .categories ul li{margin-bottom:10px}.splitter-aside .categories ul li a{color:#333}@media all and (max-width:767px){.splitter-aside{width:100%}}.blog-list{width:calc(100% - 270px)}.blog-list article{margin-bottom:60px;padding:20px;position:relative;background:#fff}.blog-list article a{color:#333}.blog-list article .readmore{margin-top:10px;display:block;text-decoration:underline;color:#777}.blog-list article h2.subtitle{margin-bottom:10px;font-size:28px}.blog-list article .info{font-size:13px;color:#bbb}.blog-list article .description{margin-top:25px}@media all and (max-width:767px){.blog-list{width:100%}}.blog-detail{width:calc(100% - 270px);padding:20px;background:#fff}.blog-detail .description{font-weight:bold}.blog-detail .comment{margin-bottom:30px;padding:20px;background:#f4f4f4}.blog-detail .comment .time{color:#ccc}@media all and (max-width:767px){.blog-detail{width:100%}}#footer{padding:30px;font-size:13px;background:#333}#footer p{color:#eee}#footer .right{text-align:right}#footer .right a{color:#fff}

This is the minified version of the CSS for Since this tutorial series is for learning Django, I just copied the CSS for my blog here. You can create your own, modify this or do whatever you want.

Changing the application settings

Open up "myblog/" and scroll down to the bottom of the file where you can add this:

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')

The first line you added is just a variable with the URL we want to use for our media files. The second line is a path to where the files is going to be store. BASE_DIR is the root of our application. I just want to point out again that media files should be served in a proper way when you've published your blog online.

Changing the urls

We also need to do a few small changes to the url patterns. First import two new functions at the top:

from django.conf import settings
from django.conf.urls.static import static

Then add this code below the urlpatterns:

] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Notice that "]" is the end of the urlpatterns list, so you only need the code from "+" to the end.

Fantastic, now we should be able to include the CSS file in our template. Open up "templates/base.html" and add this line somewhere in the <head></head>

<link rel="stylesheet" type="text/css" href="/media/style.css">


Nice! You should now see a blog more similar to mine. Eventhough my blog isn't the prettiest one, you still learned how to include media files in your project. And that's the important thing.

In the next part of this series, we'll implement comments to our blog posts.

How to create a simple blog using Django 3 series

Part 1 - Installation
Part 2 - File structure
Part 3 - Database models
Part 4 - Admin interface
Part 5 - Creating some templates
Part 6 - Views and URLs
Part 7 - Category views
Part 8 - Media files
Part 9 - Comments
Part 10 - Search


No comments yet...

Add comment

Subscribe to my newsletter