I am currently trying to do some customization to the skin of the django admin panel, to make it more in line with our brand. Currently we use django-jet to spruce up the admin panel. Are custom css/html possible with django-jet? All of the comments say that I should change some html files, but I think those files are hidden from my project because django-jet takes care of them? If anyone could point me in the right direction it would be appreciated.
Thank you
This topic already discussed in django-jet github page
I will simply try to rephrase provided solution with my own words
Create your_app/templates/admin/ folder if doesn't exist
Under this folder create base_site.html file
Copy one of the following code to this file and customize based on your needs
Simple code
{# Template: your_app/templates/admin/base_site.html #}
{% extends "admin/base_site.html" %}
{% load static i18n %}
{# Setup favicon #}
{% block extrahead %}<link rel="shortcut icon" type="image/png" href="{{MEDIA_URL}}your_logo.png"/>{% endblock %}
{# Setup browser tab label #}
{% block title %}{{ title }} | {% trans "Your title" %}{% endblock %}
{# Setup branding #}
{% block branding %}
<h1 id="site-name">
<a href="{% url 'admin:index' %}">
{# Your logo here #}
<img style="background-color: white" src="{{MEDIA_URL}}your_logo.png" alt="Your Company Name" height="50%" width="50%">
<br><br>
</span> {% trans "Your Branding" %}
</a>
</h1>
{% endblock %}
More complex
{% extends "admin/base.html" %}
{% load static i18n %}
{% block title %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}
{% block branding %}
<h1 id="site-name">
<span class="icon-jet"></span> {% trans "JET DEMO" %}
</h1>
{% endblock %}
{% block extrastyle %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static "core/css/branding.css" %}" />
<link rel="stylesheet" type="text/css" href="{% static "core/css/icons/style.css" %}" />
{% endblock %}
{% block nav-global %}
<a href="https://github.com/geex-arts/django-jet" class="sidebar-link icon">
<span class="sidebar-link-label">
<span class="sidebar-link-icon jet-demo-icon-github"></span>
{% trans 'Visit GitHub page' %}
</span>
</a>
<a href="https://github.com/geex-arts/django-jet-demo" class="sidebar-link icon">
<span class="sidebar-link-label">
<span class="sidebar-link-icon jet-demo-icon-github"></span>
{% trans 'Demo site source code' %}
</span>
</a>
{% endblock %}
{% block userlinks %}
{% trans 'Log out' %}
{% endblock %}
{% block footer %}
{{ block.super }}
<!-- Yandex.Metrika counter --><script type="text/javascript"> (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter32240214 = new Ya.Metrika({ id:32240214, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks");</script><noscript><div><img src="https://mc.yandex.ru/watch/32240214" style="position:absolute; left:-9999px;" alt="" /></div></noscript><!-- /Yandex.Metrika counter -->
<!-- Google Analytics counter -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-67280038-1', 'auto');
ga('send', 'pageview');
</script>
<!-- /Google Analytics counter -->
{% endblock %}
#in admin.py file
from django.utils.html import format_html
logo_url= "https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"
admin.site.site_header = format_html("`<img src={url} height=50 width=50`>", url=logo_url)
Create a admin directory at templates Folder then Create Html File and name it base_site.html . Add Following Content to it .
{% extends "admin/base.html" %}
{% load staticfiles %}
{% block branding %}
<h1 id="site-name">
<a href="{% url 'admin:index' %}">
<img src="{% static 'img/my-logo.png' %}" alt="My Company"/>
</a>
</h1>
{% endblock %}
That's All you are done with custom logo.
Related
Console:
django.template.exceptions.TemplateSyntaxError: Invalid block tag on line 6: 'blосk'. Did you forget to register or load this tag?
Basic.html
[<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>{% blосk title %}Главная{% endblock %} - Доска объявлений</title>
</head>
<body>
<header>
<hl>Объявления</hl>
</header>
<nav>
<а href="{% url 'index' %}">Главная</а>
<а href="{% url 'add' %}">Добавить</а>
{% for rubric in rubrics %}
<а href="{% url 'by_rubric' rubric.pk %}">{{ rubric.name }}</а>
{% endfor %}
</nav>
<section>
{% blосk content %}
{ % endblock % }
</section>
</body>
</html>][2]
index.html
{% extends "layout/basic.html" %}
{% block content %}
{% for bb in bbs %}
<div class="b">
<h2>{{ bb.title }}</h2>
<p>{{ bb.content }}</p>
<p><a href='{% url "by_rubric" bb.rubric.pk %}'>{{bb.rubric.name}}</a></p>
<p>{{ bb.published|date:"d.m.Y H:i:s" }}</p>
</div>
{% endfor %}
{% endblock %}
I looked at the code, tags and syntax, too - I didn’t find anything. Help, please
I think you must correct { % endblock % } to {% endblock %} that might be the error. That is in line 21 of your basic.html.
I mean you have put a space between { and %. and I tried this mistake and got the same error. so if you delete the space between { and % you will be okay.
I am trying to extend my templates .
base_layout.html:
{% load static from staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Articles</title>
<link rel = "stylesheet" href = "{% static 'styles.css' %}">
</head>
<body>
<div class="wrapper">
{% block content %}
{% endblock %}
</div>
</body>
</html>
article_list.html:
{% extends 'base_layout.html' %}
{% block content %}
<h1>Article List</h1>
<div class = "articles">
{% for article in articles %}
<div class = "article">
<h2>{{ article.title}}</h2>
<p>{{ article.body }}</p>
<p>{{ article.date }}</p>
</div>
{% endfor %}
</div>
{% endblock %}
When i run this i am getting the error like this:
django.template.exceptions.TemplateSyntaxError: Invalid block tag on line 11: 'blockcontent'. Did you forget to register or load this tag?
What mistake am i doing?
I am running the example https://panel.pyviz.org/user_guide/Templates.html and would like to change the title from "Bokeh Application" to "My App".
import panel as pn
import holoviews as hv
from jinja2 import Environment, FileSystemLoader
pn.extension()
env = Environment(loader=FileSystemLoader('.'))
jinja_template = env.get_template('z_base.html')
tmpl = pn.Template(jinja_template)
tmpl.add_panel('A', hv.Curve([1, 2, 3]))
tmpl.add_panel('B', hv.Curve([1, 2, 3]))
tmpl.show();
with html z_base.html extending base:
{% extends base %}
<title>{% block title %}My App{% endblock %}</title> <!-- THIS DOES NOT WORK !!!! -->
{% block postamble %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
{% endblock postamble %}
{% block contents %}
<h1>Custom Template App 3</h1>
<p>This is a Panel app with a custom template allowing us to compose multiple Panel objects into a single HTML document.</p>
<br>
<div class="container">
<div class="row">
<div class="col-sm">
{{ embed(roots.A) }}
</div>
<div class="col-sm">
{{ embed(roots.B) }}
</div>
</div>
</div>
{% endblock %}
base template refer to the
title <title>{% block title %}{{ title | e if title else "Panel App" }}{% endblock %}</title>
<!DOCTYPE html>
<html lang="en">
{% block head %}
<head>
{% block inner_head %}
<meta charset="utf-8">
<title>{% block title %}{{ title | e if title else "Panel App" }}{% endblock %}</title>
{% block preamble %}{% endblock %}
{% block resources %}
{% block css_resources %}
{{ bokeh_css | indent(8) if bokeh_css }}
{% endblock %}
{% block js_resources %}
{{ bokeh_js | indent(8) if bokeh_js }}
{% endblock %}
{% endblock %}
{% block postamble %}{% endblock %}
{% endblock %}
</head>
How can I pass the title variable to the base template?
I had the same need and couldn't find an answer anywhere on the documentation. Your question here helped guide me, so I wanted to report the simple solution I've found.
I ended up going through the panel.template module code and API doc to look for hints. It turns out you can pass your custom title to the servable or show methods. In your code, it would look like this:
tmpl.show(title="My App");
I've tested it with both servable and show methods.
#EMayorga answer didn't work, but I think what is intended is to extend and implement that block. I got it to work from doing this in my template:
{% extends base %}
{% block title %}
{{ html_title }}
{% endblock %}
<!-- goes in body -->
{% block postamble %}
<link rel="stylesheet" href="https://stackpath.bootstrapcd ...
...
And then in python: tmpl.add_variable('html_title', 'Demo 23')
I am making a child template in jinja which extends the parent template.In child template I am passing a variable to run a for loop in jinja template,but that part of for loop is not accessible inside the html page in chrome.
parent template-In parent template there is only navbar.
<html>
<head>
<link rel="stylesheet" href="static\navbar.css?v=1.1">
{% block head %}{% endblock %}
</head>
<body>
<nav class="menu">
<ul>
<li>Website</li>
<form action="{{ url_for('search') }}" class="search-form" target="_blank" method="POST">
<input type="text" name="text" placeholder="Search here..">
<button>Search</button>
</form>
{% if name %}
<li>{{name}}</li>
<li>Logout</li>
{% else %}
<li>Login & SignUp</li>
{% endif %}
<li><i class="fas fa-cart-plus"></i></li>
</ul>
</nav>
{% block content %}
{% endblock %}
</body>
</html>
Child template -In child template i am passing a variable for the for loop,but it is not working.
{% extends 'navbar.html' %}
{% block head %}
<title>Flipkart</title>
<!--new version 2nd way to update css-->
<link rel="stylesheet" href="static\gallary.css">
<script src="https://kit.fontawesome.com/04c28a3c9a.js"></script>
{% endblock %}
{% block content %}
<div class="description">
Shopping Website
</div>
<hr>
<h2>Deals Of The Day</h2>
<hr>
{% for i in ids %} -----this part is not coming in browser.----
<h1>sasadLink {{i}}</h1>
{% endfor %}
{% endblock %}
Flask file -- products function
#app.route('/products')
def products():
cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
cursor.execute('SELECT id FROM shoes')
shoes_ids=cursor.fetchall()
print(shoes_ids)
ids = []
for shoes_id in shoes_ids:
ids.append(shoes_id['id'])
return render_template('navbar.html',ids=ids) ---here i am passing the
variable to the child
template-----
I want the for loop content to be displayed on the browser.
I'm trying to load a static css file but to no avail:
home.html:
{% extends 'base.html' %}
{% block body%}
{% load static %}
<link rel="stylesheet" href="{% static 'home/style.css' %}" type="text/css">
<div class="container">
<br/>
<form method="post">
{% csrf_token %}
{{ form.post }}
<br />
<button type="submit">Submit</button>
</form>
<h2>{{ text }}</h2>
{% for post in posts %}
<h1>{{ post.post }}</h1>
<p>Posted </b> on {{ post.created }}</p>
{% endfor %}
</div>
{% endblock %}
style.css:
.HomeForm {
size:20;
}
forms.py:
class HomeForm(forms.ModelForm):
post = forms.CharField(widget=forms.TextInput(
attrs={
'class': 'form-control',
'placeholder': 'How are you feeling?',
'size': '20',
}
))
I have a feeling I'm loading the static file in the wrong place, whats the solution? Thanks in advance.
You are loading the css file correctly. But that is not how you apply css classes to django forms.
Firstly, You are already giving bootstrap attributes to your field in your forms.py.
Now to apply the css classes change the following.
style.css
doesnt matter what you name your classes. No need to name them same as your Form name.
.home-post {
size:30; // Increase this to see difference
}
Now in your home.html add the class to your form. (Look for the comment). So now all the elements inside this container have size attribute too.
{% extends 'base.html' %} {% block body%} {% load static %}
<link rel="stylesheet" href="{% static 'home/style.css' %}" type="text/css">
<div class="container home-post"> <!--This is how you need to apply-->
<br/>
<form method="post">
{% csrf_token %} {{ form.post }}
<br />
<button type="submit">Submit</button>
</form>
<h2>{{ text }}</h2> {% for post in posts %}
<h1>{{ post.post }}</h1>
<p>Posted on {{ post.created }}</p>
{% endfor %}
</div>
{% endblock %}
EDIT:
Looks like you're using bootstrap but don't seem to load it. Add bootstrap if you didn't already add it in your base.html