Skip to content

Commit ce2740e

Browse files
committed
UPD - Django Tabler (Product & UI Theme)
1 parent e17cabd commit ce2740e

File tree

2 files changed

+382
-28
lines changed

2 files changed

+382
-28
lines changed
Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
---
2+
title: Django Tabler - Open-Source UI LIbrary
3+
sidebar_label: Django Tabler
4+
---
5+
6+
# [Django Tabler Theme](https://appseed.us/product/tabler/django/)
7+
8+
<SubHeading> Open-source Library for Django admin section styled with Tabler Design</SubHeading>
9+
10+
Modern template for **Django** that covers `Admin Section`, all authentication pages (registration included) crafted on top of [Tabler](https://appseed.us/product/tabler/django/),
11+
an iconic `Bootstrap` design from `Codecalm` (Pawel Kuna).
12+
13+
14+
**Links & Resources**
15+
16+
- [Django Tabler](/products/django-dashboards/tabler/) - `Product` that uses the library
17+
- `Features`: Fully-configured, `CI/CD` via Render
18+
- UI Kit: `Tabler` by `ColorLib`
19+
- **Sections Covered**:
20+
- `Admin Section`, reserved for `superusers`
21+
- `All pages` managed by `Django.contrib.AUTH`
22+
- `Registration` page
23+
- `Misc pages`: colors, icons, typography, blank-page
24+
25+
26+
![Tabler - Open-Source Dashboard Template](https://github.com/app-generator/dummy/assets/51070104/3adba43d-e588-48d2-93be-be0a6da82d5a)
27+
28+
<br />
29+
30+
## How to use it
31+
32+
> **Install the package** via `PIP`
33+
34+
```bash
35+
$ pip install django-admin-tabler
36+
// OR
37+
$ pip install git+https://github.com/app-generator/django-admin-tabler.git
38+
```
39+
40+
> Add `admin_tabler` application to the `INSTALLED_APPS` setting of your Django project `settings.py` file (note it should be before `django.contrib.admin`):
41+
42+
```python
43+
INSTALLED_APPS = (
44+
...
45+
'admin_tabler.apps.AdminAdminlteConfig',
46+
'django.contrib.admin',
47+
)
48+
```
49+
50+
51+
> Add `LOGIN_REDIRECT_URL` and `EMAIL_BACKEND` of your Django project `settings.py` file:
52+
53+
```python
54+
LOGIN_REDIRECT_URL = '/'
55+
# EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
56+
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
57+
```
58+
59+
60+
> Add `admin_tabler` urls in your Django Project `urls.py` file
61+
62+
```python
63+
from django.urls import path, include
64+
65+
urlpatterns = [
66+
...
67+
path('', include('admin_tabler.urls')),
68+
]
69+
```
70+
71+
72+
> **Collect static** if you are in `production environment`:
73+
74+
```bash
75+
$ python manage.py collectstatic
76+
```
77+
78+
> **Start the app**
79+
80+
```bash
81+
$ # Set up the database
82+
$ python manage.py makemigrations
83+
$ python manage.py migrate
84+
$
85+
$ # Create the superuser
86+
$ python manage.py createsuperuser
87+
$
88+
$ # Start the application (development mode)
89+
$ python manage.py runserver # default port 8000
90+
```
91+
92+
Access the `admin` section in the browser: `http://127.0.0.1:8000/`
93+
94+
<br />
95+
96+
## How to Customize
97+
98+
When a template file is loaded, `Django` scans all template directories starting from the ones defined by the user, and returns the first match or an error in case the template is not found.
99+
The theme used to style this starter provides the following files:
100+
101+
```bash
102+
# This exists in ENV: LIB/admin_tabler
103+
< UI_LIBRARY_ROOT >
104+
|
105+
|-- templates/ # Root Templates Folder
106+
| |
107+
| |-- accounts/
108+
| | |-- login.html # Sign IN Page
109+
| | |-- register.html # Sign UP Page
110+
| |
111+
| |-- includes/
112+
| | |-- footer.html # Footer component
113+
| | |-- sidebar.html # Sidebar component
114+
| | |-- navigation.html # Navigation Bar
115+
| | |-- scripts.html # Scripts Component
116+
| |
117+
| |-- layouts/
118+
| | |-- base.html # Masterpage
119+
| | |-- base-auth.html # Masterpage for Auth Pages
120+
| |
121+
| |-- pages/
122+
| |-- index.html # Dashboard Page
123+
| |-- calendar.html # Profile Page
124+
| |-- *.html # All other pages
125+
|
126+
|-- ************************************************************************
127+
```
128+
129+
When the project requires customization, we need to copy the original file that needs an update (from the virtual environment) and place it in the template folder using the same path.
130+
131+
For instance, if we want to customize the `footer.html` these are the steps:
132+
133+
- `Step 1`: create the `templates` DIRECTORY inside your app
134+
- `Step 2`: configure the project to use this new template directory
135+
- Edit `settings.py` TEMPLATES section
136+
- `Step 3`: copy the `footer.html` from the original location (inside your ENV) and save it to the `YOUR_APP/templates` DIR
137+
- Source PATH: `<YOUR_ENV>/LIB/admin_tabler/templates/includes/footer.html`
138+
- Destination PATH: `YOUR_APP/templates/includes/footer.html`
139+
- Edit the `footer.html` (Destination PATH)
140+
141+
At this point, the default version of the `footer.html` shipped in the library is ignored by Django.
142+
143+
In a similar way, all other files and components can be customized easily.
144+
145+
<br />
146+
147+
## Resources
148+
149+
- 👉 [Django Tabler](https://appseed.us/product/tabler/django/) - `Product` that uses the library (fully configured)
150+
- 👉 Free [Support](https://appseed.us/support/) via Email & Discord

0 commit comments

Comments
 (0)