personalize - Anulando admin css en django

personalize django admin

Question

Quiero cambiar ciertos css en el administrador django como base.css. ¿Es mejor cambiar directamente en la biblioteca de django? ¿Cómo puedo anularlo de la mejor manera?

Answer 1

Depende mucho de lo que quieras hacer. Aunque, en primer lugar, no lo sobrescriba directamente en el administrador de Django. Tienes dos opciones que creo que son razonables:

1. Si desea cambiar la apariencia del administrador en general, debe anular las plantillas de administrador. Esto se trata en detalles aquí: Anulación de plantillas de administración . A veces, solo puede extender el archivo de administración original y luego sobrescribir un bloque como {% block extrastyle %}{% endblock %} en django/contrib/admin/templates/admin/base.html como ejemplo.
2. Si su estilo es específico del modelo, puede agregar estilos adicionales a través de la meta clase de Media en su admin.py . Vea un ejemplo aquí:

class MyModelAdmin(admin.ModelAdmin):
    class Media:
        js = (''js/admin/my_own_admin.js'',)    
        css = {
             ''all'': (''css/admin/my_own_admin.css'',)
        }

Answer 2

En su directorio estático, cree un archivo static/admin/css/base.css .

Pegue primero el Admin CSS predeterminado de Django , y ajústelo como mejor le parezca.

Answer 3

Esta solución funcionará para el sitio de administración, creo que es la forma más limpia porque anula base_site.html que no cambia al actualizar django.

Cree en su directorio de plantillas una carpeta llamada admin y cree un archivo llamado base_site.html .

Cree en su directorio estático bajo css un archivo llamado admin-extra.css .

Escriba en él todos los archivos CSS personalizados que desee para sus formularios, como: body{background: #000;} .

Pega esto en el base_site.html :

{% extends "admin/base.html" %}
{% load static from staticfiles %} # This might be just {% load static %} in your ENV

{% block title %}{{ title }} | {{ site_title|default:_(''Django site admin'') }}{% endblock %}

{% block extrastyle %}{{ block.super }}<link rel="stylesheet" type="text/css" href="{% static "css/admin-extra.css" %}" />{% endblock %}

{% block branding %}
<h1 id="site-name"><a href="{% url ''admin:index'' %}">{{ site_header|default:_(''Django administration'') }}</a></h1>
{% endblock %}

{% block nav-global %}{% endblock %}

¡Eso es! has terminado

Answer 4

Si desea un alcance global y no quiere pensar en reemplazar plantillas, una combinación funciona realmente bien para esto. Pon este código donde quieras:

class CSSAdminMixin(object):
    class Media:
        css = {
            ''all'': (''css/admin.css'',),
        }

Luego, haga un archivo CSS llamado admin.css con sus anulaciones, por ejemplo:

select[multiple] {
    resize: vertical;
}

Luego, en los modelos que quieras, haz:

class MyModelAdmin(admin.ModelAdmin, CSSAdminMixin):

Y estarás todo listo.

Answer 5

Simplemente extendí admin / base.html para incluir una referencia a mi propio archivo css, al final. La belleza de css es que no tiene que tocar las definiciones existentes, simplemente vuelva a definir.

Answer 6

Tal vez grappelli te ahorrará la molestia ...
http://grappelliproject.com/

Viejo y fuera de fecha ...
https://lincolnloop.com/blog/customizing-django-admin-eurodjangocon-2009/

Answer 7

Tenga admin/css/changelists.css dentro de una carpeta en STATICFILES_DIRS , y STATICFILES_DIRS archivo changelists.css en lugar del administrador predeterminado.

Answer 8

• En settings.py , asegúrese de que su aplicación aparezca antes de admin en INSTALLED_APPS .
• Cree (your-app)/templates/admin/base_site.html y coloque el bloque <style> en el {% block extrahead %}

Ejemplo:

{% extends "admin/base_site.html" %}
{% block extrahead %}
    <style>
        .field-__str__ {
            font-family: Consolas, monospace;
        }
    </style>
{% endblock %}