T.Pool
T.Pool

Reputation: 155

How to Change django admin css style and font?

I'm Developing an app with django .

I want to customize django admin interface , but i cant add a custom font to it .

I Want to use a custom font for Persian Language .

Here is What i did but not get a correct result :

Step 1 :

I create a css file named admin-extra.css in this directory :

/templates/css/admin-extra.css 

After That i Changed the postition of myappname before django.contrib.admin in Installed Apps Like This :

INSTALLED_APPS = [
    'django.contrib.auth',
    'pool',
    'django.contrib.admin',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'fcm_django'
]

And the admin-extra.css is like this :

body {
    margin: 0;
    padding: 0;
    font-size: 40px;
    color: #333;
    background: #fff;
}

And Finally I put admin-extra in a file named base_site.css in \templates\base_site.html and it's content is like this :

{% extends "admin/base.html" %}
{% load static from staticfiles %}
{% 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 %}

But i cant see the result ,

what i've been missed or wrong ?

any suggestions will be helpfull .

Note : This is not a duplicate post .

And This is Admin.py file :

from django.contrib import admin

# Register your models here.
from .models import *




@admin.register(Ticket)
class TicketAdmin(admin.ModelAdmin):
    list_display = ('id','title','body','answer')




@admin.register(Activation)
class ActivationAdmin(admin.ModelAdmin):
    list_display = ('activecode','user_phone','createtime')
    list_filter =  ('activecode','user_phone','createtime')
    search_fields =  ('activecode','user_phone','createtime')


@admin.register(App)
class AppAdmin(admin.ModelAdmin):
    list_display = ('version','versionurl','bonprice','rahnama')
    list_filter = ('version','versionurl','bonprice','rahnama')
    search_fields = ('version','versionurl','bonprice','rahnama')

@admin.register(Bid)
class BidAdmin(admin.ModelAdmin):
    list_display = ('user','bidtime','competition','maxbon','bonnumber')
    list_filter = ('user','bidtime','competition','maxbon','bonnumber')
    search_fields = ('user','bidtime','competition','maxbon','bonnumber')

Upvotes: 3

Views: 12507

Answers (3)

Ritesh Bisht
Ritesh Bisht

Reputation: 182

You need to add base_site.html as follows:

  • templates
    • admin
      • base_site.html

with:

{% extends "admin/base.html" %}

{% load static from staticfiles %}

{% load i18n grp_tags %}

{% block title %}{{ title }} | {% get_site_title %}
{% endblock %}

{% block extrastyle %}

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

{% endblock %}

{% block branding %}

{# Use the div#grp-branding for branding elements, e.g. a logo #}

{# <div id="grp-branding"></div> #}

{% endblock %}

{% block nav-global %}

{% endblock %}

Upvotes: 2

Jin.J
Jin.J

Reputation: 383

I am not sure if you still have this problem or if the versions make things different, but here is what I thought could solve the problem.

https://docs.djangoproject.com/en/3.0/howto/static-files/

According to the documentation above, .css as a static file is placed in different directory as .htmls. If you have the same configuration as official example, you can create a directory called "static" under your app folder, and put your css files there. {% static %} points to that folder. So if you write {% static "css/admin-extra.css" %} in your html, your css should be in APP_FOLDER/static/css/admin-extra.css.

Hope it works.

Upvotes: 1

jackquin
jackquin

Reputation: 574

You should override the admin.py file.

from django.contrib import admin
class MyModelAdmin(admin.ModelAdmin):
    class Media:   
        css = {
             'all': ('/templates/css/admin-extra.css ',)
        }


admin.site.register(MyModel,MyModelAdmin)

Upvotes: 8

Related Questions