Django Admin Styling Django.How

Setting the Admin Area Site’s Name, Title, Header

Add these at bottom of url.py of your main application, make sure that admin is imported

admin.site.site_header= "Lewhdk Admin"
admin.site.site_title= "Lewhdk Admin Area"
admin.site.index_title= "Welcome to Lewhdk admin area"

To extend the admin base file create admin folder in the template folder and create base_site.html

templates/admin/base_site.html
<br /> {% extends 'admin/base.html' %} class="w<br /> {% load static %}</p> <p>{% block branding %}</p> <h1> <a href="{% url 'admin:index' %}"><img decoding="async" src="{% static 'img/lewhdk-logo-new.png' %}"></a></h1> <p>{% endblock%}</p> <p>{% block extrastyle %} <link rel="stylesheet" href="{% static 'css/admin.css' %}"> {% endblock %}<br />

Admin.css

<br /> :root {<br /> --color-1: #10284e;<br /> --color-2: #333;<br /> --color-3: #666;<br /> --dark: #222225;<br /> --grey: #ddd;<br /> --danger: #bf3939;<br /> --info: #0abfa4;<br /> --success: #0ac977;<br /> --body-bg: #000;<br /> --body-color: #111;<br /> --light-grey: #f6f6f6;<br /> --fontweight: 300;<br /> --fontweight-heading: 300;<br /> --font-size-mobile:12px;<br /> --font-size-desktop:16px;<br /> }</p> <p>#header{<br /> color:var(--color-1);<br /> background-color: var(--light-grey,#ddd);<br /> height: 70px;<br /> }</p> <p>.module h2, .module caption, .inline-group{<br /> background-color: var(--grey,#ddd);<br /> color: var(--color-1, black)<br /> }<br /> .module caption{<br /> background-color: var(--light-grey,#ddd);<br /> }<br /> a{<br /> color: var(--color-1) !important;<br /> }<br /> .module caption , #header a{<br /> color: var(--color-2,yellow) !important;<br /> font-size: 12px;<br /> }</p> <p>div.breadcrumbs{<br /> background-color: var(--grey,blue);<br /> color:black;<br /> }</p> <p>h1{<br /> font-size: 26px;<br /> }</p> <p>.button.default, input[type="submit"].default, .submit-row input.default{<br /> background-color: var(--color-2, #333);<br /> }</p> <p>.button, input[type="submit"], input[type="button"], .submit-row input, a.button {<br /> background-color: var(--color-3, #555);<br /> }</p> <p>.deletelink-box a{<br /> color:white !important;<br /> }<br />