Как добавить пользовательские свойства CSS, такие как размер шрифта, на все страницы администрирования Django? - PullRequest
0 голосов
/ 25 апреля 2020

Я работаю над Django. И я хочу добавить пользовательские CSS свойства, такие как размер шрифта, ко всем Django страницам администрирования, таким как страница изменения пользователя, страница добавления пользователя и т. Д. c в одном go чтобы мне не приходилось ставить разные CSS свойства для каждой страницы отдельно

Так есть ли способ сделать это?

Заранее спасибо! !

Ответы [ 2 ]

1 голос
/ 27 апреля 2020

Вы также можете использовать класс Media для добавления настроек css и javascript для Django страниц администратора.

1 голос
/ 25 апреля 2020

Да, вы можете сделать это.

И для этого сначала откройте ваш файл settings.py и найдите список TEMPLATES. После этого добавьте значение для ключа DIRS как:

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

Чтобы весь список TEMPLATES выглядел следующим образом:

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',
            ],
        },
    },
]

После этого в главном каталоге, где хранятся все папки приложений, создайте папка с именем templates (если она не создана) и под ней создайте еще одну папку с именем admin. Так шаблоны> admin.

Теперь в папке администратора создайте файл html по имени: base.html

Теперь в файле base.html добавьте следующий код:



{% 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>

После этого go в папку stati c и создайте файл по имени: MyCSS.css

Теперь в MyCSS.css файле вы можете добавить любые css свойства, как вы sh для любого элемента.

Если вы не знаете, какой селектор CSS использовать затем вы можете нажать Ctrl + Shift + c (на windows) и навести курсор на элемент, который вы хотите найти селектор css, например:

enter image description here

Это все, что вам нужно сделать.

Примечание. Если вы хотите изменить имя файла css, не забудьте изменить файл css имя в блоке {% block extrastyle %} в файле base.html.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...