Skip to content

Commit bf37491

Browse files
app-generatorapp-generator
committed
Django Templates - Admin Customization
1 parent 29bb362 commit bf37491

File tree

1 file changed

+218
-0
lines changed

1 file changed

+218
-0
lines changed

‎docs/technologies/django/templates.mdx‎

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
---
2+
title : Django Templates - Admin Customization
3+
sidebar_label : Admin Templates
4+
---
5+
6+
# Django Templates - Admin Customization
7+
8+
<SubHeading>Learn how to customize the admin section for a Django Project</SubHeading>
9+
10+
This article explains how to customize the default Django admin interface using a free and modern UI Kit - **Black Dashboard** crafted by `Creative-Tim`.
11+
The final package is available for download directly from Github (MIT License) and can be used in any Django Project (new or legacy).
12+
13+
- 👉 [Django Black Dashboard](https://appseed.us/product/black-dashboard/django/) - `Product Page`
14+
- 👉 [Django Admin Black](https://github.com/app-generator/django-admin-black) - sources published on Github
15+
16+
![Django Admin Black - Modern template for Django admin interface, animated presentation.](https://github-production-user-asset-6210df.s3.amazonaws.com/51070104/270555350-2bbfd6aa-ae21-4aff-b175-74b9cfe06477.jpg)
17+
18+
## ✅ Django Default Admin
19+
20+
Being a "batteries-included" framework, Django provides by default a rich set of pages commonly used in all modern web applications: Login, Registration, change password, error pages (404, 500 pages), widgets to paginate and manage tables plus other resources used in the Admin section.
21+
22+
We can visualize all default pages by accessing the installation directory for Django. Below is a snapshot with just a few default pages and components shipped by Django:
23+
24+
```bash
25+
.../site-packages/django/contrib/admin/templates/
26+
│
27+
├── admin/
28+
│ │
29+
│ ├── auth/
30+
│ │ └── user/
31+
│ │ ├── add_form.html
32+
│ │ └── change_password.html
33+
│ │
34+
│ ├── 404.html
35+
│ ├── 500.html
36+
│ ├── actions.html
37+
│ ├── app_index.html
38+
│ ├── base.html
39+
│ ├── base_site.html
40+
│ ├── index.html
41+
│ ├── invalid_setup.html
42+
│ ├── login.html
43+
│ ├── pagination.html
44+
│ ├── popup_response.html
45+
│ └── submit_line.html
46+
│
47+
└── registration/
48+
├── logged_out.html
49+
├── password_change_done.html
50+
├── password_change_form.html
51+
├── password_reset_complete.html
52+
├── password_reset_confirm.html
53+
├── password_reset_done.html
54+
├── password_reset_email.html
55+
└── password_reset_form.html
56+
```
57+
58+
To customize any default page we need to create our own template directory, create the file using the same name and position in the parent directory, and inform Django to use it.
59+
60+
To go deeper, we will customize the 404 error page and configure Django to use it. `Let's go!`
61+
62+
## ✅ Customize 404 Page
63+
64+
As mentioned above, the first step is to create a template directory:
65+
66+
```bash
67+
# Django Root Project <-- you are here
68+
$ mkdir -p templates/
69+
```
70+
71+
> **Update Django Settings**
72+
73+
To use the new templates the project settings file should be updated as below:
74+
75+
```python
76+
# core/settings.py
77+
# ...
78+
79+
TEMPLATES = [
80+
{
81+
"BACKEND": "django.template.backends.django.DjangoTemplates",
82+
83+
# Add the templates directory to the DIR option:
84+
"DIRS": [os.path.join(BASE_DIR, "templates"), ], # <- New Line
85+
"APP_DIRS": True,
86+
"OPTIONS": {
87+
"context_processors": [
88+
"django.template.context_processors.debug",
89+
"django.template.context_processors.request",
90+
"django.contrib.auth.context_processors.auth",
91+
"django.contrib.messages.context_processors.messages",
92+
],
93+
},
94+
},
95+
]
96+
```
97+
98+
When the application requests a template file, Django will try to resolve a template file by scanning first the directories defined by the user in the settings file.
99+
If nothing is found, the default version will be used from `site-packages/django/contrib/admin/templates/` directory (the default location).
100+
101+
> **Customize 404 page**
102+
103+
The custom version of our 404 page can be easily done by copying the default version from admin/templates/ directory and save it in the directory created above.
104+
105+
```bash
106+
# Django Root Project <-- you are here
107+
$ vi templates/404.html
108+
```
109+
110+
```html
111+
<!-- templates/404.html -->
112+
113+
{% extends "admin/base_site.html" %}
114+
{% load i18n %}
115+
116+
{% block title %}{% trans 'Page not found' %}{% endblock %}
117+
118+
{% block content %}
119+
120+
<!-- The updated line -->
121+
<h2>{% trans 'Page not found' %} - SOMETHING Custom</h2>
122+
123+
<p>{% trans "We're sorry, but the requested page could not be found." %}</p>
124+
125+
{% endblock %}
126+
```
127+
128+
Once we save the file, Django will use it when a 404 error case occurs when users interact with our application.
129+
130+
## ✅ [Django Admin Black](https://appseed.us/product/black-dashboard/django/)
131+
132+
This free sample can be used in any Django project by typing a few commands in the terminal and later, update the settings file to use the new interface. Here are the installation steps:
133+
134+
> **Install the package** via `PIP`
135+
136+
```bash
137+
$ pip install django-admin-black
138+
// OR
139+
$ pip install git+https://github.com/app-generator/django-admin-black.git
140+
```
141+
142+
> Add `admin_black` application to the `INSTALLED_APPS` setting of your Django project `settings.py` file (note it should be before `django.contrib.admin`):
143+
144+
```python
145+
INSTALLED_APPS = (
146+
...
147+
'admin_black.apps.AdminBlackConfig',
148+
'django.contrib.admin',
149+
)
150+
```
151+
152+
> Add `admin_black` urls in your Django Project `urls.py` file.
153+
154+
```python
155+
from django.urls import path, include
156+
157+
urlpatterns = [
158+
...
159+
path('', include('admin_black.urls')),
160+
]
161+
```
162+
163+
> **Collect static** if you are in `production environment`:
164+
165+
```bash
166+
$ python manage.py collectstatic
167+
```
168+
169+
> **Start the app**
170+
171+
```bash
172+
$ # Set up the database
173+
$ python manage.py makemigrations
174+
$ python manage.py migrate
175+
$
176+
$ # Create the superuser
177+
$ python manage.py createsuperuser
178+
$
179+
$ # Start the application (development mode)
180+
$ python manage.py runserver # default port 8000
181+
```
182+
183+
Access the `app` in the browser: `http://127.0.0.1:8000/` (default Django PORT)
184+
185+
![Django Admin Customization for Black Dashboard - Tutorial provided by AppSeed.](https://github-production-user-asset-6210df.s3.amazonaws.com/51070104/270555350-2bbfd6aa-ae21-4aff-b175-74b9cfe06477.jpg)
186+
187+
## ✅ More Django Templates (`all free`)
188+
189+
### 👉 [Datta Able Django](https://appseed.us/product/datta-able/django/)
190+
191+
Datta Able Bootstrap Lite is the most stylized Bootstrap 4 Template, among all other Lite/Free admin templates in the market.
192+
193+
It comes with high feature-rich pages and components with fully developer-centric code - design from `CodedThemes`.
194+
195+
![Datta Able Django - Django Admin fully customized by AppSeed.](https://github-production-user-asset-6210df.s3.amazonaws.com/51070104/270557006-0f7903b5-4f6f-4eaa-b481-7ea2774d61df.jpg)
196+
197+
### 👉 [Django Argon Dashboard](https://appseed.us/product/argon-dashboard/django/)
198+
199+
Open-source **Django** project crafted on top of **[Argon Dashboard](https://appseed.us/product/argon-dashboard/django/)**, an open-source `Bootstrap 5` design from [Creative-Tim](https://www.creative-tim.com/?AFFILIATE=128200).
200+
201+
The product is designed to deliver the best possible user experience with highly customizable feature-rich pages. `Material Material` has easy and intuitive responsive design whether it is viewed on retina screens or laptops.
202+
203+
![Django Argon Dashboard - Django Admin fully customized by AppSeed.](https://github-production-user-asset-6210df.s3.amazonaws.com/51070104/270557009-1cbdcf70-f927-4ddf-86c6-6bd6267c8fe3.jpg)
204+
205+
### 👉 [Django Material Dashboard](https://appseed.us/product/material-dashboard/django/)
206+
207+
Open-source **Django** project crafted on top of **[Material Dashboard](https://appseed.us/product/material-dashboard/django/)**, an open-source `Boostrap 5` design from [Creative-Tim](https://www.creative-tim.com/?AFFILIATE=128200)
208+
209+
The product is designed to deliver the best possible user experience with highly customizable feature-rich pages. `Material Material` has easy and intuitive responsive design whether it is viewed on retina screens or laptops.
210+
211+
![Django Material Dashboard - Django Admin fully customized by AppSeed.](https://github-production-user-asset-6210df.s3.amazonaws.com/51070104/270557013-f0c12538-56c7-4b3d-b565-9194a211c2ae.jpg)
212+
213+
## ✅ Resources
214+
215+
- 👉 Access [AppSeed](https://appseed.us/) and start your next project
216+
- 👉 [Deploy Projects on Aws, Azure and Digital Ocean](https://www.docs.deploypro.dev/) via **DeployPRO**
217+
- 👉 Create an amazing landing page with [Simpllo, an open-source site builder](https://www.simpllo.com/)
218+
- 👉 [Django App Generator](https://app-generator.dev/django/) - A 2nd generation App Builder

0 commit comments

Comments
 (0)