Search code examples
pythonhtmlcssdjangoweb-development-server

Applying Additional Styles to Inherited Django Templates

In my Django project, I've set up a base HTML template (base.html) with a set of CSS styles. This base template is inherited by several other templates across my project.

The challenge I'm facing is that some of these inherited templates require additional styles that are specific to each template. While I attempted to include all styles in base.html, I found that it doesn't work seamlessly for templates with unique styling needs.

What is the recommended approach for applying additional styles to individual templates while still leveraging the common styles defined in base.html? Are there best practices or Django conventions for managing such scenarios effectively?

I appreciate any insights or suggestions on how to structure my templates and styles to achieve a cohesive design across the project.

I initially attempted to consolidate all styles within the base.html file, expecting them to seamlessly apply to all templates. However, this approach didn't work as intended. The additional styles for individual templates were not being applied correctly.

Solution

  • Assuming your elegant project structure below is like this, and your static folder which is obviously where you css files codes lives.

    .
├── .dockerignore
├── Dockerfile
├── entrypoint.sh
├── requirements.txt
├── src
|   ├── manage.py
|   └── myproj
|       ├── __init__.py
|       ├── asgi.py
|       ├── settings.py
|       ├── urls.py
|       └── wsgi.py
|── venv

├── templates
    |
    ├──base.html
        
    └── registration
           |
            ── login.html
           myproj
|          ├── __products.html
|      
        
├── static
    |
    ├──CSS 
         ├── mycss.css
    └── JS
         ├── product.js

    Steps:

    1. Then you have to configure your STATIC DIR files in your settings.py of myproj which lives in src of the project structure.

    This is how to do it:

    
STATIC_ROOT = BASE_DIR / 'static'

STATIC_URL = 'static/'

#Add this in your settings.py file:
STATICFILES_DIRS = [
    BASE_DIR / 'staticfiles'
]
    1. Create your base.html file in the templates folder which you had configured in your setting using BASE_DIR/templates lookup.

    Make sure that your template has similar end blocks as you can see below:

    {% load static %}
<!DOCTYPE html>
<html>
<head>
  <title>{% block title %}{% endblock %}</title>
  <link rel="stylesheet" href="{% static 'CSS/mycss.css' %}">  
</head>
<body>

{% block content %}
{% endblock %}

</body>
</html>

    3.Then you can now extend your css to whichever template you want without on any of your HTML Ike eg products.html like this:

    
{% extends "master.html" %}

{% block title %}
 List of all members
{% endblock %}


{% block content %}
  <div class="mycard">
    <h1 class="heading-color">I love Django</h1>
    <ul>

      {% comments %}Your other django code blocks from your view here {%comments %}
    </ul>
  </div>
{% endblock %}
    1. In your mycss.css fole of CSS folder you can now write whichever CSS code you want which will dynamically appear in any page you apply it to inherit such code from.

    Mycss input:

    heading-color {
  background-color: lightblue;
}

    For example, your login.html and products.html can inherit such background of code you wrote there when you render your page on the web.

    PS: If you are in the production, don't forget to constantly run the command python manage.py collectstatic for your newly created CSS styles to be dynamically rendered with your static library you want to use, say AWS, Nginx etc

    Goodluck!