> For the complete documentation index, see [llms.txt](https://www.dicas-de-django.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.dicas-de-django.com.br/032-django-admin-sobreescrevendo-os-templates-do-admin.md).

# Dica 32 - Django Admin: Sobreescrevendo os templates do Admin

[![](/files/-MfuAOwUjEsk4qZiRsOx)](https://youtu.be/0d9VcL8ssTg)

**Importante:** remova a `\` no meio das tags.

![](/files/5yQAAuqmpHdOp0r1qaxa)

![img/botao\_admin.png](/files/-MfuAQiT5Wp4yC0e0V6L)

Se você olhar em

<https://github.com/django/django/tree/main/django/contrib/admin/templates/admin>

verá todos os templates usados no Admin.

Na pasta da virtualenv do seu projeto também.

```
ls -l .venv/lib/python3.8/site-packages/django/contrib/admin/templates/admin/
cat .venv/lib/python3.8/site-packages/django/contrib/admin/templates/admin/change_list.html
```

Olhando na doc do Django em [Set up your projects admin template directories](https://docs.djangoproject.com/en/3.1/ref/contrib/admin/#set-up-your-projects-admin-template-directories) nós vemos que devemos ter a seguinte estrutura de pastas:

```
myproject
├── core
│   ├── templates
│   │   ├── admin
│   │   │   ├── base_site.html
│   │   │   ├── login.html
│   │   │   ├── core
│   │   │   │   ├── article
│   │   │   │   │   └── change_list.html
│   │   │   │   └── change_list.html
```

Então vamos criar nossas pastas

```
mkdir -p myproject/core/templates/admin/core/article
```

Agora vamos criar o primeiro `change_list.html`

```
touch myproject/core/templates/admin/core/change_list.html
```

E seu conteúdo será:

```html
{\% extends "admin/change_list.html" %}

{\% block object-tools-items %}
  {{ block.super }}
  <li>
    <a href="botao-da-app/">
      Novo botão
    </a>
  </li>
{\% endblock %}
```

Depois

```
touch myproject/core/templates/admin/core/article/change_list.html
```

Com o conteúdo:

```html
{\% extends "admin/change_list.html" %}

{\% block object-tools-items %}
  {{ block.super }}
  <li>
    <a href="botao-artigo/">
      Botão do Artigo
    </a>
  </li>
{\% endblock %}
```

Para que o Django Admin reconheça esses templates precisamos configurar o `settings.py`

```python
# settings.py
TEMPLATES = [
    {
        ...
        'DIRS': [
            BASE_DIR,
            os.path.join(BASE_DIR, 'templates')
        ],
        ...
    },
]
```

Agora edite `admin.py`

```python
from django.contrib import admin, messages
# admin.py
from django.shortcuts import redirect
from django.urls import path


@admin.register(Article)
class ArticleAdmin(admin.ModelAdmin):
    ...

    def get_urls(self):
        urls = super().get_urls()
        my_urls = [
            path(
                'botao-artigo/',
                self.admin_site.admin_view(self.minha_funcao, cacheable=True)
            ),
        ]
        return my_urls + urls

    def minha_funcao(self, request):
        print('Ao clicar no botão, faz alguma coisa...')
        messages.add_message(
            request,
            messages.INFO,
            'Ação realizada com sucesso.'
        )
        return redirect('admin:core_article_changelist')


@admin.register(Category)
class CategoryAdmin(admin.ModelAdmin):
    ...

    def get_urls(self):
        urls = super().get_urls()
        my_urls = [
            path(
                'botao-da-app/',
                self.admin_site.admin_view(self.minha_funcao_category, cacheable=True)
            ),
        ]
        return my_urls + urls

    def minha_funcao_category(self, request):
        print('Ao clicar no botão, faz alguma coisa em category...')
        messages.add_message(
            request,
            messages.INFO,
            'Ação realizada com sucesso.'
        )
        return redirect('admin:core_category_changelist')
```

## Sobreescrevendo a tela de login do Admin

[![](/files/-MfuAOwUjEsk4qZiRsOx)](https://youtu.be/ci4LtLxDCRM)

![img/login.png](/files/-MfuAQi_CKnXhIbQOkN3)

Em [AdminSite attributes](https://docs.djangoproject.com/en/2.2/ref/contrib/admin/#adminsite-attributes) nós temos o atributo [AdminSite.login\_template](https://docs.djangoproject.com/en/2.2/ref/contrib/admin/#django.contrib.admin.AdminSite.login_template).

A partir daí podemos fazer

```python
# admin.py
admin.site.login_template = 'myproject/core/templates/admin/login.html'
```

Vendo

```
cat .venv/lib/python3.8/site-packages/django/contrib/admin/templates/admin/login.html
cat .venv/lib/python3.8/site-packages/django/contrib/admin/templates/admin/base_site.html
```

E nos templates

```
touch myproject/core/templates/admin/login.html
```

```html
<!-- myproject/core/templates/admin/login.html -->
{\% extends "admin/login.html" %}
{\% load static %}

{\% block branding %}
  <h1 id="site-name">
    <a href="{\% url 'admin:index' %}">
      <img src="{\% static 'img/django-logo-negative.png' %}" alt="django-logo-negative.png" width="100px">
    </a>
  </h1>
{\% endblock %}

{\% block extrastyle %}
  {{ block.super }}
  <link rel="stylesheet" type="text/css" href="{\% static "css/login.css" %}" />
  {{ form.media }}
{\% endblock %}
```

E pra caprichar no CSS

```css
/* myproject/core/static/css/login.css */
body.login {
    background: url("../img/headset.jpg") no-repeat center center;
    background-size: 100% auto;
}

html {
    min-height: 100%;
}
```

<https://www.djangoadmintutorials.com/how-to-customize-django-admin-login-page/>

## Inserindo um logo no header do Admin

[![](/files/-MfuAOwUjEsk4qZiRsOx)](https://youtu.be/7NcghC_eySs)

![img/header\_admin.png](/files/-MfuAQibq-Vo3H_OlKnB)

Basta criar `base_site.html`

```
touch myproject/core/templates/admin/base_site.html
```

```html
{\% extends "admin/base_site.html" %}
{\% load static %}

{\% block branding %}
  <h1 id="site-name">
    <a href="{\% url 'admin:index' %}">
      <img src="{\% static 'img/django-logo-negative.png' %}" alt="django-logo-negative.png" width="70px">
    </a>
  </h1>
{\% endblock %}
```

**Importante:** mude a ordem das `apps` em `settings.py`

```python
# settings.py
INSTALLED_APPS = [
    'myproject.core',
    'django.contrib.admin',
    ...
]
```

<https://books.agiliq.com/projects/django-admin-cookbook/en/latest/logo.html>