Skip to main content

How to customize django admin?

 How to customize django admin with our own style?

We all know django has it own default admin panel for a project  which look like this


But we don't want our admin panel of our project to be name as django administration we want to customize it with our own style like changing the color, background color, text everything we want to change it as per our project UI

So here you can do to change the django admin panel

Step1: Go to the template folder

Step2: Create a folder and name it as an admin so that it is easy for you to understand that this is the admin folder for our templates

Step3:Inside an admin folder create a file name as 'base_site.html' in order to make you understand that this file is a file which overwrite the base file.Django has it default base HTML file so in order to customize the admin panel we have to overwrite the base file.

Step4: run the server and go to to the admin panel and open developer tool by clicking inspect to see which one we want to  customize.


We see that the django administration is inside the div which has an id "branding" so we have to access that div and overwrite the h1 tag with our customize text

Step 5:

In line1 we have to extends the default base.HTML of the Django admin

In line2 we have to load static if we are using a css which is not an inline CSS but here i use an inline css

Inline3 we access the branding id an we change the h1 tag text with our custom text

Inline6 i want to change the color and style of the admin panel so we have to use block extrastyle inside this block we can link our static CSS or we can write an inline style like i have did in this project.

Here is the result

Before:



After:

That it you make it, Drop a suggestion for me or any feedback i always welcome any feedback

Social link:

Istagram: https://www.instagram.com/co_dtechr/

Labels:

Comments

Post a Comment

Popular posts from this blog

Python programe to find the factorial of a number

 Python program to find the factorial of a number Factorial number of a number is a product from 1 to the number which is from 1 to n where n is the number Example : factorial of 5 = 1*2*3*4*5 = 120 Code: #function to find factorial number def facto(n):     factorial = 1     for i in range(1,n+1):         factorial = factorial * i     return factorial #Take the input from the user and store in n n = int(input()) if n == 0: #factorial of 0 is always 1     print(1) else:     print(facto(n)) #other than 0 we have to find the factorial number by calling the function Input : 5 Output : 120 There is another method to find factorial number using recursion. Feel free to check the code in a code editor and try it out and also i am welcome to any suggestion. Here is the previous post : https://shotwithcode.blogspot.com/2020/12/python-automation-with-sele...
Post a Comment
Read more

Best office computer accesories

 Here are some of the best computer accesories for your office at an affordable price in India. 1. Oxyura Gaming Mouse Pad Click here to see the Mouse pad https://amzn.to/3pVY8KL 2. Zebronics Zeb-Alex Wired Usb optical mouse Click here to see and buy the Mouse https://amzn.to/3ILT2t6 3. Usb wired keyboard Click here to see and buy the keyboard https://amzn.to/3mmzjqv 4.Laptop stand Click here to see and buy the laptop stand https://amzn.to/3dTgkih All link are from amazon so go ahead and check it out it is at an afordable price.
1 comment
Read more

Python automation with selenium.

Automate with selenium In this blog we are going to see how to automate some task with selenium. Selenium is an opensource framework which is used for testing web application by scrapping into the web site. To apply selenium in python for testing an application we need to follow some step. So in these this blog we are going to explain how to use selenium to go to the google and search for shotwithcode blog and read the blog. Step1: using pip in python we have to install selenium "pip install selenium" Step2: We need a web driver in which it will run the browser and tell the browser what to do. So if we use chrome we need to download chrome driver else if we use other browser then we need to download the web driver for that browser You can download the Chrome web driver here https://chromedriver.chromium.org/downloads Remember to download the chrome driver related to the chrome version we have Step3:After download the driver extract the file and save into a location which is e...
Post a Comment
Read more