- Notebook: Django Project: Car Listing
- Speaker: Udemy Instructor Rathan Kumar
- Date Created: July 18, 2024, 8:43 p.m.
- Owner: Rosilie
1. We customize the admin dashboard, so its design is complementary.
2. We create a new folder in the TEMPLATES folder. Name this as ADMIN. Create a new file, BASE_SITE.HTML. The new HTML file extends to the ADMIN\BASE.HTML which is the default admin page.
TEMPLATES\ADMIN\BASE_SITE.HTML contains:
So when you log out and login again, you will see the logo too:
3. To change the background color of the admin panel, we create a new block in our BASE_SITE.HTML
4. We then create a NEW CSS FILE, ADMIN.CSS to customize the admin panel colors. Go to CARZONE\STATIC\CSS and create a new file ADMIN.CSS.
/*CSS file to customize the admin panel dashboard */
#header {
background-color: #fff !important;
color: #ff0000 !important;
box-shadow: 0px 0px 3px 0px #ff0000;
}
/* the navigation links*/
#header a:link,
#header a:visited {
color: #000 !important;
}
/* the menu bar*/
div.breadcrumbs {
background-color: #1c1f1f;
}
/* the filter section */
.module h2,
.module caption,
.inline-group h2 {
background-color: #1c1f1f;
}
/* form buttons */
.button,
input[type=submit],
input[type=button],
.submit row input,
a.button {
background-color: #4e5557;
}
/* the active buttons */
.button:active,
input[type=submit]:active,
input[type=button]:active,
.button:focus,
input[type=submit]:focus,
input[type=button]:focus,
.button:hover,
input[type=submit]:hover,
input[type=button]:hover {
background-color: #1f2121;
}
/* the current button*/
.button.default:active,
input[type=submit].default:active,
.button.default:focus,
input[type=submit].default:focus,
.button.default:hover,
input[type=submit].default:hover {
background-color: #1c1f1f;
}
/* the current button*/
.button.default,
input[type=submit].default,
.submit-row input.default {
background-color: #1c1f1f;
}
/* the text links*/
a:link,
a:visited {
color: #1c1f1f;
}
You can see the CSS selectors name if you use PAGE INSPECT. You need to hover / highlight the element you want to check out and select INSPECT
5. Run the server again to see the admin dashboard look.
Inside the record:
6. Check out the ADMIN.CSS file saved in your local computer's RESOURCE FOLDER.
7. Create a link to our ADMIN HOME using the logo.
No PDF file attached.
