Skip to content

Commit f2cd5a5

Browse files
app-generatorapp-generator
committed
Django Template Argon - UPD
1 parent 6fcc6c5 commit f2cd5a5

File tree

1 file changed

+86
-40
lines changed

1 file changed

+86
-40
lines changed

‎docs/boilerplate-code/django-templates/argon-dashboard.mdx‎

Lines changed: 86 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,33 @@ title: Django Admin Argon - Open-Source UI LIbrary
33
sidebar_label: Django Admin Argon
44
---
55

6-
# [Django Admin Argon](https://appseed.us/product/argon-dashboard/django/)
6+
# [Django Admin Argon](https://appseed.us/product/argon-dashboard/django/)
77

8-
<SubHeading> Open-source template for Django admin section styled with Argon Dashboard Design (free version)</SubHeading>
8+
<SubHeading> Open-source Library for Django admin section styled with Argon Dashboard Design (free version)</SubHeading>
99

10-
Modern template for **Django Admin Interface** coded on top of **Argon Dashboard**, an open-source `Boostrap 5` design from `Creative-Tim`.
10+
Modern template for **Django** that covers `Admin Section`, all authentication pages (registration included) crafted on top of **[Argon Dashboard](https://appseed.us/product/argon-dashboard/django/)**,
11+
an open-source `Bootstrap 5` design from `Creative-Tim`.
1112

12-
- [Django Argon Dashboard](https://django-argon-dashboard.appseed-srv1.com/) - LIVE Demo
13-
- [Django Argon Dashboard](https://github.com/app-generator/django-argon-theme-playground) - `playground project`
13+
**Links & Resources**
1414

15-
## Why `Django Argon Design`
15+
- [Django Argon Dashboard](/products/django-dashboards/argon-dashboard/) - `Product` that uses the library
16+
- `Features`: Fully-configured, `CI/CD` via Render
17+
- UI Kit: [Argon Dashboard BS5](https://www.creative-tim.com/product/argon-dashboard?AFFILIATE=128200) by Creative-Tim
18+
- **Sections Covered**:
19+
- `Admin Section`, reserved for `superusers`
20+
- `All pages` managed by `Django.contrib.AUTH`
21+
- `Registration` page
22+
- `Misc pages`: colors, icons, typography, blank-page
23+
1624

17-
- Modern `Bootstrap 5` Design
18-
- `Responsive Interface`
19-
- `Minimal Template` overriding
20-
- `Easy integration`
25+
![Argon Dashboard 2 - Free Starter.](https://user-images.githubusercontent.com/51070104/215804889-94eba681-8262-41a3-8e57-7d5b12dcc209.png)
2126

22-
![Argon Dashboard - Django Template generated by AppSeed.](https://user-images.githubusercontent.com/51070104/183684596-4b29a886-f13d-4da5-98d3-12b5b90df47f.png)
2327

24-
## Installation
28+
## How to use it
2529

26-
```
30+
> **Install the package** via `PIP`
31+
32+
```bash
2733
$ pip install django-admin-argon-dashboard
2834
// OR
2935
$ pip install git+https://github.com/app-generator/django-admin-argon-dashboard.git
@@ -39,13 +45,35 @@ $ pip install git+https://github.com/app-generator/django-admin-argon-dashboard.
3945
)
4046
```
4147

42-
> Collect static if you are in production environment:
48+
49+
> Add `LOGIN_REDIRECT_URL` and `EMAIL_BACKEND` of your Django project `settings.py` file:
50+
51+
```python
52+
LOGIN_REDIRECT_URL = '/'
53+
# EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
54+
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
55+
```
56+
57+
58+
> Add `admin_argon` urls in your Django Project `urls.py` file.
59+
60+
```python
61+
from django.urls import path, include
62+
63+
urlpatterns = [
64+
...
65+
path('', include('admin_argon.urls')),
66+
]
67+
```
68+
69+
70+
> **Collect static** if you are in `production environment`:
4371
4472
```bash
4573
$ python manage.py collectstatic
4674
```
4775

48-
> Start the app
76+
> **Start the app**
4977
5078
```bash
5179
$ # Set up the database
@@ -61,40 +89,58 @@ $ python manage.py runserver # default port 8000
6189

6290
Access the `admin` section in the browser: `http://127.0.0.1:8000/`
6391

64-
## How to use it for common users
6592

66-
> `Create view functions` for a particular pages and render the html template.
93+
## How to Customize
6794

68-
```python
69-
def dashboard(request):
70-
return render(request, 'pages/dashboard.html')
71-
```
95+
When a template file is loaded in the controller, `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.
96+
The theme used to style this starter provides the following files:
7297

73-
> Create `urls.py` file and map the function to the `urls.py` file.
74-
75-
```python
76-
path('dashboard/', views.dashboard, name="dashboard")
98+
```bash
99+
# This exists in ENV: LIB/admin_argon
100+
< UI_LIBRARY_ROOT >
101+
|
102+
|-- templates/ # Root Templates Folder
103+
| |
104+
| |-- accounts/
105+
| | |-- sign-in.html # Sign IN Page
106+
| | |-- sign-up.html # Sign UP Page
107+
| |
108+
| |-- includes/
109+
| | |-- footer.html # Footer component
110+
| | |-- sidebar.html # Sidebar component
111+
| | |-- navigation.html # Navigation Bar
112+
| | |-- scripts.html # Scripts Component
113+
| |
114+
| |-- layouts/
115+
| | |-- base.html # Masterpage
116+
| | |-- base-fullscreen.html # Masterpage for Auth Pages
117+
| |
118+
| |-- pages/
119+
| |-- dashboard.html # Dashboard page
120+
| |-- profile.html # Settings Page
121+
| |-- *.html # All other pages
122+
|
123+
|-- ************************************************************************
77124
```
78125

79-
> Available pages
126+
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.
80127

81-
- `dashboard.html`
82-
- `billing.html`
83-
- `profile.html`
84-
- `rtl.html`
85-
- `tables.html`
86-
- `virtual-reality.html`
128+
For instance, if we want to customize the `footer.html` these are the steps:
87129

88-
## Screenshots
130+
- `Step 1`: create the `templates` DIRECTORY inside your app
131+
- `Step 2`: configure the project to use this new template directory
132+
- Edit `settings.py` TEMPLATES section
133+
- `Step 3`: copy the `footer.html` from the original location (inside your ENV) and save it to the `YOUR_APP/templates` DIR
134+
- Source PATH: `<YOUR_ENV>/LIB/admin_argon/includes/footer.html`
135+
- Destination PATH: `YOUR_APP/templates/includes/footer.html`
136+
- Edit the footer (Destination PATH)
89137

90-
> **Django Admin Theme**: `Edit users`
138+
At this point, the default version of the `footer.html` shipped in the library is ignored by Django.
91139

92-
![Argon Dashboard, Users Page - Django Template generated by AppSeed.](https://user-images.githubusercontent.com/51070104/201162283-90fb0637-687e-4926-ab12-bf409491dac6.jpg)
140+
In a similar way, all other files and components can be customized easily.
93141

94-
> **Django Admin Theme**: `Dashboard` page
95142

96-
![Argon Dashboard, Charts & Widgets - Django Template generated by AppSeed.](https://user-images.githubusercontent.com/51070104/201162509-80df6786-e595-4fca-a570-45f6a4438c24.jpg)
97-
98-
---
143+
## Resources
99144

100-
[**Django Admin Argon**](https://github.com/app-generator/django-admin-argon-dashboard) - Modern Admin Interface provided by [**AppSeed**](https://appseed.us/)
145+
- 👉 [Django Admin Argon](https://appseed.us/product/argon-dashboard/django/) - `Product` that uses the library (fully configured)
146+
- 👉 Free [Support](https://appseed.us/support/) via Email & Discord

0 commit comments

Comments
 (0)