Tips for incorporating personalized CSS properties, such as font-size, into all Django admin pages

Question

Tips for incorporating personalized CSS properties, such as font-size, into all Django admin pages

Currently, I am in the process of developing a project using Django. My goal is to implement custom CSS properties, such as font-size, across all Django admin pages - including User change and User add pages - simultaneously. This would streamline the process and eliminate the need for applying unique CSS properties to each individual page separately.

Is there a method or approach available to achieve this efficiently?

Appreciate any assistance in advance!

css django

Answer 1

Answer №1

Absolutely, that is achievable.

To begin, access your settings.py file and locate the TEMPLATES list. Then, insert a value for the DIRS key as:

os.path.join(BASE_DIR, 'templates/')

This will result in your complete TEMPLATES list appearing as follows:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates/')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Subsequently, within your main directory where all app folders are stored, create a folder named templates if it doesn't already exist. Within this folder, create another subfolder named admin. Therefore, the structure should be templates > admin.

In the admin folder, generate an HTML file titled: base.html

In the base.html file, include the following code snippet:




{% load i18n static %}<!DOCTYPE html>
{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
<head>
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}">


{% block extrastyle %}




    <link rel="stylesheet" type="text/css" href="{% static 'MyCSS.css' %}" />




{% endblock %}


{% if LANGUAGE_BIDI %}


    <link rel="stylesheet" type="text/css" href="{% block stylesheet_rtl %}{% static "admin/css/rtl.css" %}{% endblock %}">{% endif %}
{% block extrahead %}{% endblock %}
{% block responsive %}
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="{% static "admin/css/responsive.css" %}">
    {% if LANGUAGE_BIDI %}<link rel="stylesheet" type="text/css" href="{% static "admin/css/responsive_rtl.css" %}">{% endif %}
{% endblock %}
{% block blockbots %}<meta name="robots" content="NONE,NOARCHIVE">{% endblock %}
</head>
{% load i18n %}

<body class="{% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}"
  data-admin-utc-offset="{% now "Z" %}">

<!-- Container -->
<div id="container">

    {% if not is_popup %}
    <!-- Header -->
    <div id="header">
        <div id="branding">
        {% block branding %}{% endblock %}
        </div>
        {% block usertools %}
        {% if has_permission %}
        <div id="user-tools">
            {% block welcome-msg %}
                {% trans 'Welcome,' %}
                <strong>{% firstof user.get_short_name user.get_username %}</strong>.
            {% endblock %}
            {% block userlinks %}
                {% if site_url %}
                    <a href="{{ site_url }}">{% trans 'View site' %}</a> /
                {% endif %}
                {% if user.is_active and user.is_staff %}
                    {% url 'django-admindocs-docroot' as docsroot %}
                    {% if docsroot %}
                        <a href="{{ docsroot }}">{% trans 'Documentation' %}</a> /
                    {% endif %}
                {% endif %}
                {% if user.has_usable_password %}
                <a href="{% url 'admin:password_change' %}">{% trans 'Change password' %}</a> /
                {% endif %}
                <a href="{% url 'admin:logout' %}">{% trans 'Log out' %}</a>
            {% endblock %}
        </div>
        {% endif %}
        {% endblock %}
        {% block nav-global %}{% endblock %}
    </div>
    <!-- END Header -->
    {% block breadcrumbs %}
    <div class="breadcrumbs">
    <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
    {% if title %} &rsaquo; {{ title }}{% endif %}
    </div>
    {% endblock %}
    {% endif %}

    {% block messages %}
        {% if messages %}
        <ul class="messagelist">{% for message in messages %}
          <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message|capfirst }}</li>
        {% endfor %}</ul>
        {% endif %}
    {% endblock messages %}

    <!-- Content -->
    <div id="content" class="{% block coltype %}colM{% endblock %}">
        {% block pretitle %}{% endblock %}
        {% block content_title %}{% if title %}<h1>{{ title }}</h1>{% endif %}{% endblock %}
        {% block content %}
        {% block object-tools %}{% endblock %}
        {{ content }}
        {% endblock %}
        {% block sidebar %}{% endblock %}
        <br class="clear">
    </div>
    <!-- END Content -->

    {% block footer %}<div id="footer"></div>{% endblock %}
</div>
<!-- END Container -->

</body>
</html>

Following that, navigate to the static folder and fashion a file entitled: MyCSS.css

In the MyCSS.css document, you can specify CSS attributes for any desired element.

If unsure about which CSS selector to use, press ctrl+shift+c (on Windows) and hover over the element you wish to find the CSS selector for, like this:

https://i.sstatic.net/llNyJ.png

This concludes the required steps.

Note: If renaming the CSS file, remember to update the filename in the {% block extrastyle %} section of the base.html file.

Answer 2

Absolutely, that is achievable.

To begin, access your settings.py file and locate the TEMPLATES list. Then, insert a value for the DIRS key as:

os.path.join(BASE_DIR, 'templates/')

This will result in your complete TEMPLATES list appearing as follows:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates/')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Subsequently, within your main directory where all app folders are stored, create a folder named templates if it doesn't already exist. Within this folder, create another subfolder named admin. Therefore, the structure should be templates > admin.

In the admin folder, generate an HTML file titled: base.html

In the base.html file, include the following code snippet:




{% load i18n static %}<!DOCTYPE html>
{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
<head>
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}">


{% block extrastyle %}




    <link rel="stylesheet" type="text/css" href="{% static 'MyCSS.css' %}" />




{% endblock %}


{% if LANGUAGE_BIDI %}


    <link rel="stylesheet" type="text/css" href="{% block stylesheet_rtl %}{% static "admin/css/rtl.css" %}{% endblock %}">{% endif %}
{% block extrahead %}{% endblock %}
{% block responsive %}
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="{% static "admin/css/responsive.css" %}">
    {% if LANGUAGE_BIDI %}<link rel="stylesheet" type="text/css" href="{% static "admin/css/responsive_rtl.css" %}">{% endif %}
{% endblock %}
{% block blockbots %}<meta name="robots" content="NONE,NOARCHIVE">{% endblock %}
</head>
{% load i18n %}

<body class="{% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}"
  data-admin-utc-offset="{% now "Z" %}">

<!-- Container -->
<div id="container">

    {% if not is_popup %}
    <!-- Header -->
    <div id="header">
        <div id="branding">
        {% block branding %}{% endblock %}
        </div>
        {% block usertools %}
        {% if has_permission %}
        <div id="user-tools">
            {% block welcome-msg %}
                {% trans 'Welcome,' %}
                <strong>{% firstof user.get_short_name user.get_username %}</strong>.
            {% endblock %}
            {% block userlinks %}
                {% if site_url %}
                    <a href="{{ site_url }}">{% trans 'View site' %}</a> /
                {% endif %}
                {% if user.is_active and user.is_staff %}
                    {% url 'django-admindocs-docroot' as docsroot %}
                    {% if docsroot %}
                        <a href="{{ docsroot }}">{% trans 'Documentation' %}</a> /
                    {% endif %}
                {% endif %}
                {% if user.has_usable_password %}
                <a href="{% url 'admin:password_change' %}">{% trans 'Change password' %}</a> /
                {% endif %}
                <a href="{% url 'admin:logout' %}">{% trans 'Log out' %}</a>
            {% endblock %}
        </div>
        {% endif %}
        {% endblock %}
        {% block nav-global %}{% endblock %}
    </div>
    <!-- END Header -->
    {% block breadcrumbs %}
    <div class="breadcrumbs">
    <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
    {% if title %} &rsaquo; {{ title }}{% endif %}
    </div>
    {% endblock %}
    {% endif %}

    {% block messages %}
        {% if messages %}
        <ul class="messagelist">{% for message in messages %}
          <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message|capfirst }}</li>
        {% endfor %}</ul>
        {% endif %}
    {% endblock messages %}

    <!-- Content -->
    <div id="content" class="{% block coltype %}colM{% endblock %}">
        {% block pretitle %}{% endblock %}
        {% block content_title %}{% if title %}<h1>{{ title }}</h1>{% endif %}{% endblock %}
        {% block content %}
        {% block object-tools %}{% endblock %}
        {{ content }}
        {% endblock %}
        {% block sidebar %}{% endblock %}
        <br class="clear">
    </div>
    <!-- END Content -->

    {% block footer %}<div id="footer"></div>{% endblock %}
</div>
<!-- END Container -->

</body>
</html>

Following that, navigate to the static folder and fashion a file entitled: MyCSS.css

In the MyCSS.css document, you can specify CSS attributes for any desired element.

If unsure about which CSS selector to use, press ctrl+shift+c (on Windows) and hover over the element you wish to find the CSS selector for, like this:

https://i.sstatic.net/llNyJ.png

This concludes the required steps.

Note: If renaming the CSS file, remember to update the filename in the {% block extrastyle %} section of the base.html file.

Answer 3

Answer №2

Enhance your Django admin pages with unique CSS and Javascript by utilizing the Media class.

Answer 4

Enhance your Django admin pages with unique CSS and Javascript by utilizing the Media class.

Tips for incorporating personalized CSS properties, such as font-size, into all Django admin pages

Answer №1

Answer №2

Similar questions

Encircling the icon with a circle

The exact problem with aligning the table

Align content to the bottom using Bootstrap 4

Trouble with CSS submenus: Are your lists not appearing as they should? Potential style override

Update the icon using CSS style properties

How can I ensure that the height of my dropdown menu covers the entire screen without being limited by the page height

Filling a Python class with data from a Django form

Transforming nested JSON files into nested jQuery divs

What is the best way to display the tabcontent when clicking on a menu tab in this code, as neither method seems to work?

Is it possible to move the login button to the right side of the screen?

What is the best way to display lengthy content using a pair of HTML tags?

Setting the maximum height for a tr or td element that is compatible with Chrome

Bootstrap resource failed to load

Repair the masthead background during overscroll

Adjust the panel size accordingly for smaller screens

What is the best way to horizontally center an image with a transparent background using CSS?

Font on the internet that does not have the specific Germanic di

The value within the style.setProperty function does not get applied

Guide on how to retrieve a clicked element

Learn how to dynamically change a class name with JavaScript to alter the color of a navbar icon