장고에서 관리자 CSS 재정의


답변:


111

당신이 무엇을하고 싶은지에 따라 다릅니다. 무엇보다 먼저 Django 관리자에서 직접 덮어 쓰지 마십시오. 합리적이라고 생각하는 두 가지 옵션이 있습니다.

  1. 일반적으로 관리자의 모양을 변경하려면 관리자 템플릿을 재정의해야합니다. 자세한 내용은 관리 템플릿 재정의 에서 다룹니다 . 가끔은 그냥 원래 관리자 파일을 확장 할 수있는 다음과 같은 블록을 덮어 {% block extrastyle %}{% endblock %}에서 django/contrib/admin/templates/admin/base.html예를 들어.
  2. 스타일이 모델에 특정한 경우 Media.NET Framework 의 메타 클래스를 통해 스타일을 추가 할 수 있습니다 admin.py. 여기에서 예를 참조하십시오.
class MyModelAdmin(admin.ModelAdmin):
    class Media:
        js = ('js/admin/my_own_admin.js',)    
        css = {
             'all': ('css/admin/my_own_admin.css',)
        }

실제로는 모델 수준이 아니라 전체 사이트 자체입니다. base.css, ie.css 등의 특정 변경 사항입니다. 한 가지 옵션은 내 응용 프로그램 자체에 admin / base.html을 포함하고 admin / base.html 파일에서 내 사용자 정의 base.css를 사용하는 것입니다. 이렇게하면 django 관리자의 템플릿 파일을 내 사이트에 포함시켜야합니다. 이것보다 더 나은 해결책이 있습니까?
rajan sthapit 2011 년

내가 아는 바 없음. django 관리자는 결국 django 재사용 가능한 앱입니다. 다른 재사용 가능한 앱과 함께 사용할 수있는 방법입니다.
Torsten Engelbrecht 2011 년

여기 js 내에 나열된 .css 파일이 있습니다. 실제로 작동합니까? 나는 그것을 얻을 수 없습니다.
fastmultiplication jul.

그래 네가 맞아. 실수를 저질렀 고 django 문서의 예제로 내 대답을 편집했습니다.
Torsten Engelbrecht 2012

Eli Porter의 말에 따르면 "당신은 최고의 고양이를 구 웠습니다".
Rob Kwasowski

33
  • 에서 settings.py앱이 INSTALLED_APPS.
  • 블록을 생성 (your-app)/templates/admin/base_site.html하고<style>{% block extrahead %}

예:

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

6
최고의 답변입니다. 원하는 경우 기본 프로젝트에 "template"디렉토리를 넣고 settings.py에서 참조하여 INSTALLED_APPS에서 관리자보다 먼저 앱을 나열하는 것을 피할 수 있습니다. os.path.join (BASE_DIR, 'templates')],]
RedPelle

좋은 생각입니다! 매력처럼 부드럽게 작동합니다!
ozw1z5rd

29

마지막에 내 자신의 CSS 파일에 대한 참조를 포함하도록 admin / base.html을 확장했습니다. CSS의 장점은 기존 정의를 건드리지 않고 다시 정의 할 필요가 있다는 것입니다.


28

이 솔루션은 관리자 사이트에서 작동합니다 base_site.html. django를 업그레이드 할 때 변경되지 않는 것을 재정의하기 때문에 가장 깨끗한 방법이라고 생각합니다 .

템플릿 디렉토리에라는 폴더를 admin생성하여 base_site.html.

css라는 파일 아래 의 정적 디렉토리에 만듭니다 admin-extra.css.

다음과 같이 양식에 대해 원하는 모든 사용자 정의 CSS를 작성하십시오 body{background: #000;}.

다음을 붙여 넣으십시오 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 %}

댓글에서 언급했듯이 : 앱이 INSTALLED_APPS의 관리자 앱 앞에 있는지 확인하십시오. 그렇지 않으면 템플릿이 django를 재정의하지 않습니다.

그게 다야! 끝났어


4
감사합니다. 잘 작동합니다! 작동하지 않는 경우 앱이에서 관리자 앱 앞에 있는지 확인하십시오 INSTALLED_APPS. 그렇지 않으면 템플릿이 django를 재정의하지 않습니다.
Dirbaio 2016 년

1
최고의 답변과 의견. 관리자 페이지에서 색상을 변경하는 것은 의외로 어렵습니다. 이 답변과 의견을 통해 작동 방식이 확고 해졌습니다.
Daniel Butler 19 년

1
base_site.htmldjango를 업그레이드 할 때 절대 변하지 않을 것이라는 것을 어떻게 알 수 있습니까? (I 평균 네이 답변이 3 세이며 여전히 작동하지만 더 garantuee 없습니다)
마브

@marv 소스 코드의 내부를 살펴보면 관리자 아키텍처가 특히 URL과 템플릿 렌더링에서 이러한 특정 이름을 중심으로 구축되었음을 매우 쉽게 알 수 있습니다. 클래스를 상속하는 클래스를 상속하는 클래스는 Django 프레임 워크를 대대적으로 재 설계하지 않는 한 동일한 이름을 유지하는 데 의존합니다. 기본 템플릿을 재정의하는 것은 django 로드맵에 따라 최소한 향후 3 년 동안 동일하게 유지됩니다.
elad silver

1
그래서 이것은 장고에 대한 일반적인 지식이며 이것을 확인하는 구체적인 출처가 없습니까? 내가 당신을 의심하는 것이 아니라 이것이 사실이라는 것을 어떻게 알 수 있는지 궁금합니다.
Marv

17

정적 디렉터리에서 static/admin/css/base.css파일을 만듭니다 .

Django의 기본 Admin CSS를 먼저 붙여 넣은 다음 하단에 사용자 정의를 추가하십시오.


8
이렇게하면 앱 django.contrib.adminINSTALLED_APPS. 그렇지 않으면 collectstatic이 먼저 admin base.css를 찾고 사용자 정의 된 버전이이를 덮어 쓰지 않습니다.
Dave

3
이것은 좋은 장기적인 해결책이 아닙니다. 여러 코드를 복사 / 붙여 넣기하며 Django 업그레이드로 유지되지 않습니다.
mlissner

Django 관리자에 대한 모든 스타일은 기본적으로 코드의 포크입니다. Django에 대한 업데이트는 사실상 사용자 정의를 손상시킬 수 있습니다. 내 권장 사항은 사용자 정의를 최소한으로 유지하고 Django의 기본 스타일 하단에 추가하는 것입니다. 그런 다음 원하는 경우 기본 스타일을 수동으로 업데이트 할 수 있습니다.
Ryan Allen

위의 @ danny-w-adair의 답변이 더 좋습니다. "DRY"를 유지하지만 약간의 업그레이드 고통을 초래할 수있는 Django 코드의 포크입니다.
Ryan Allen

10

전역 범위를 원하고 템플릿 재정의에 대해 생각하고 싶지 않다면 mixin이이 작업에 정말 잘 작동합니다. 원하는 곳에이 코드를 넣으십시오.

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

그런 다음 admin.css재정의와 함께 호출되는 CSS 파일을 만듭니다. 예를 들면 다음과 같습니다.

select[multiple] {
    resize: vertical;
}

그런 다음 원하는 모델에서 다음을 수행하십시오.

class MyModelAdmin(admin.ModelAdmin, CSSAdminMixin):

그리고 당신은 모든 준비가 될 것입니다.


나는 당신의 대답을 좋아하지만, 왜 안 MyModelAdmin에 직접 추가 할
고란

1
하나의 모델이라면 할 수 있지만 여러 모델에하면 지저분해질 것입니다.
mlissner

4

가지고 admin/css/changelists.css있는 폴더 안에 STATICFILES_DIRS, 그것은 것입니다 사용자 대신 기본 관리 하나의 changelists.css 그.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.