I stuck on REALLY simple thing. But I can't spot what I am doing wrong - I just want to write some CSS for my template. Here's my "gallery" app tree (both of css files contain body{background-color: #000;} to just test if it work):
gallery
-blah blah
-static
-css
-wagtail_gallery.css
-wagtail_gallery0.css
-blah blah
template:
{% extends "base.html" %}
{% load static wagtailcore_tags wagtailimages_tags %}
<link href="{% static 'css/wagtail_galery.css' %}" rel="stylesheet">
{% block body_class %}template-blogindexpage{% endblock %}
{% block content %}
<h1>{{ page.title }}</h1>
<div class="intro">{{ page.intro|richtext }}</div>
{% for subpage in gallery_subpages %}
{% with subpage=subpage.specific %}
<a href="{% pageurl subpage %}">
{% with subpage.main_image as main_image %}
<!-- This line creates image that links to subpage -->
{% if main_image %}{% image main_image original %}{% endif %}
{% endwith %}
</a>
{% endwith %}
{% endfor %}
{% endblock %}
When I opened source, to see what is going on, i saw this link in head section: <link rel="stylesheet" type="text/css" href="/static/css/wagtail_gallery.css">. When I open it its blank (independly on existance of wagtail_gallery.css).
When I go to http://localhost:8000/static/css/wagtail_galery0.css in browser it shows me excepted content.
Now, my questions are - How can I use wagtail_gallery.css in template, and how can I import custom css (like wagtail_gallery0.css) file to wagtail template?
Sorry if I missed something obvious in this issue, but I am new in wagtail CMS. Also, sorry if I missed some "l" in "gallery" somewhere.
Since Wagtail is just Django it uses Django static files. It's hard to tell exactly what's going on but I suspect that your "static" directory is maybe one level too high. It should be like this...
ProjectFolder
-YourAppFolder
-static
-wagtail_gallery.css
Try moving the static folder into "blah blah" folder? Also make sure you have the correct imports from the linked docs above and that the App is actually being imported in you base settings.
Finally in your template you'll need to be linking to the correct file. Something like this:
<link rel="stylesheet" type="text/css" href="{% static 'css/wagtail_gallery.css' %}">
Related
I followed this answer.
Iterate through a static image folder in django
But I'm not sure why it's giving me the following error
django.template.exceptions.TemplateSyntaxError: Invalid filter: 'file'
I have
{% with 'images/'|file as image_static %}
<img src="{% static image_static %}" alt="">
<a class="gallery-one__link img-popup" href="{% static image_static %}"><i class="tripo-icon-plus-symbol"></i></a>
{% endwith %}
I did pass the context dict correctly in views, I think, because I saw this in my traceback:
context_dict = {}
files = os.listdir(os.path.join(settings.STATIC_ROOT, "blog/images/gallery"))
context_dict['files'] = files
I also tried {% load crispy_forms_filters %} at the start of the HTML but it's not making a difference. I'm quite new to this, so I'm probably doing something stupid, and I cannot find any docs referring to this specific instance
The problem is that the answer you based your code on is broken. That answer has a comment from someone who tried it and got the same error that you did.
Try this:
{% for file in files %}
<img src="{% static file %}" alt="">
<a class="gallery-one__link img-popup" href="{% static file %}"><i class="tripo-icon-plus-symbol"></i></a>
{% endfor %}
Can anyone help me on how to add a logo to the index bar in Django-admin site?
You should probably override (by extend) the app_index.html admin template.
https://docs.djangoproject.com/en/3.1/ref/contrib/admin/#templates-which-may-be-overridden-per-app-or-model
So you need to create a template/admin directory in your application and override the correct template by adding you own logo.
[Edit]
Oh sorry, you screenshot was too small and I just realized that you’re talking about the icon in the tabbar. That would be the favicon. For that, it’s simple, just add a favicon.ico into your static/ folder, and serve that directly from your http server (probably with a alias).
You can also serve the file directly using a simple view, but that doesn’t seems like a good idea except in development.
Your Question is answered here.
You have to override Django base.html template and put it under the admin directory.
https://stackoverflow.com/a/44428576/7122788
Override the Django base.html template and put it under the admin directory like my_app/templates/admin/base.html
Add {% block extrahead %} to the overriding template.
{% extends 'admin/base.html' %}
{% load staticfiles %}
{% block javascripts %}
{{ block.super }}
<script type="text/javascript" src="{% static 'app/js/action.js' %}"></script>
{% endblock %}
{% block extrahead %}
<link rel="shortcut icon" href="{% static 'favicon.ico' %}" />
{% endblock %}
{% block stylesheets %}
{{ block.super }}
{% endblock %}
I'm trying to use the bootswatch flatly theme. I followed the instructions given on the documentation regarding updating the settings.
I've added the following to my project's settings.py:
BOOTSTRAP3 = { 'theme_url': 'https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css', }
I've also added the following to my project's base.html template, between the head tags:
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
{% bootstrap_messages %}
index.html template:
{% extends "base.html" %}
{% load i18n %}
{% load bootstrap3 %}
{% bootstrap_css %}
{% block content %}
Hello World
{% endblock %}
However, the theme is not reflected when I reload my index page.
Is there something I'm doing wrong?
Edit: a temporary workaround I've found is to overwrite the css loaded by django-bootstrap3 by adding <link rel="stylesheet" href='https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css'> to the base.html template file, but I'd much prefer a solution using only django-bootstrap3.
Found out that this is a known issue, and has been fixed recently in the develop branch of the django-bootstrap repository. However, the pip package hasn't been updated yet.
Temporarily fixed this by editing my venv copy of django-bootstrap3.
I've created a custom tag that I want to use, but Django can't seem to find it. My templatetags directory is set up like this:
pygmentize.py
from pygments import highlight
from pygments.lexers import get_lexer_by_name
from django import template
from pygments.formatters.other import NullFormatter
register = template.Library()
#register.tag(name='code')
def do_code(parser,token):
code = token.split_contents()[-1]
nodelist = parser.parse(('endcode',))
parser.delete_first_token()
return CodeNode(code,nodelist)
class CodeNode(template.Node):
def __init__(self,lang,code):
self.lang = lang
self.nodelist = code
def render(self,context):
code = self.nodelist.render(context)
lexer = get_lexer_by_name('python')
return highlight(code,lexer,NullFormatter())
I am trying to use this tag to render code in gameprofile.html.
gameprofile.html
(% load pygmentize %}
{% block content %}
<title>{% block title %} | {{ game.title }}{% endblock %}</title>
<div id="gamecodecontainer">
{% code %}
{{game.code}}
{% endcode %}
</div>
{% endblock content %}
When I navigate to gameprofile.html, I get an error:
Invalid block tag on line 23: 'code', expected 'endblock'. Did you forget to register or load this tag?
For Django 2.2 up to 3, you have to load staticfiles in html template first before use static keyword
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
For other versions use static
{% load static %}
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
Also you have to check that you defined STATIC_URL in setting.py
At last, make sure the static files exist in the defined folder
The error is in this line: (% load pygmentize %}, an invalid tag.
Change it to {% load pygmentize %}
{% load static %}
<img src="{% static "my_app/example.jpg" %}" alt="My image">
in your templates, use the static template tag to build the URL for the given relative path using the configured STATICFILES_STORAGE.
did you try this
{% load games_tags %}
at the top instead of pygmentize?
{% load static %}
Please add this template tag on top of the HTML or base HTML file
Encountered this same issue but I just added {% load static %} from my extends template and it worked. So in your case if you're trying to load gameprofile.html from a base template you just need to add it like this:
{% extends 'some_base.html' %}
{% block content %}
{% load pygmentize %}
I had the same problem, here's how I solved it. Following the first section of this very excellent Django tutorial, I did the following:
Create a new Django app by executing: python manage.py startapp new_app
Edit the settings.py file, adding the following to the list of INSTALLED_APPS: 'new_app',
Add a new module to the new_app package named new_app_tags.
In a Django HTML template, add the following to the top of the file, but after {% extends 'base_template_name.html' %}: {% load new_app_tags %}
In the new_app_tags module file, create a custom template tag (see below).
In the same Django HTML template, from step 4 above, use your shiney new custom tag like so: {% multiply_by_two | "5.0" %}
Celebrate!
Example from step 5 above:
from django import template
register = template.Library()
#register.simple_tag
def multiply_by_two(value):
return float(value) * 2.0
The app that contains the custom tags must be in INSTALLED_APPS. So Are you sure that your directory is in INSTALLED_APPS ?
From the documentation:
The app that contains the custom tags must be in INSTALLED_APPS in order for the {% load %} tag to work. This is a security feature: It allows you to host Python code for many template libraries on a single host machine without enabling access to all of them for every Django installation.
In gameprofile.html please change the tag {% endblock content %} to {% endblock %} then it works otherwise django will not load the endblock and give error.
You need to change:
{% endblock content %}
to
{% endblock %}
I want to change certain css in admin django like base.css. Is it better to change directly in the django library? How can I override it in the best way?
It depends a lot of what you want to do. Though first of all: do not overwrite it in the Django admin directly. You got two options I think are reasonable:
If you want to change the appearance of the admin in general you should override admin templates. This is covered in details here: Overriding admin templates. Sometimes you can just extend the original admin file and then overwrite a block like {% block extrastyle %}{% endblock %} in django/contrib/admin/templates/admin/base.html as an example.
If your style is model specific you can add additional styles via the Media meta class in your admin.py. See an example here:
class MyModelAdmin(admin.ModelAdmin):
class Media:
js = ('js/admin/my_own_admin.js',)
css = {
'all': ('css/admin/my_own_admin.css',)
}
In settings.py, make sure your app is listed before admin in the INSTALLED_APPS.
Create (your-app)/templates/admin/base_site.html and put the <style> block into the {% block extrahead %}
Example:
{% extends "admin/base_site.html" %}
{% block extrahead %}
<style>
.field-__str__ {
font-family: Consolas, monospace;
}
</style>
{% endblock %}
This solution will work for the admin site, I think it's the cleanest way because it overrides base_site.html which doesn't change when upgrading django.
Create in your templates directory a folder called admin in it create a file named base_site.html.
Create in your static directory under css a file called admin-extra.css .
Write in it all the custom css you want for your forms like: body{background: #000;}.
Paste this in the base_site.html:
{% extends "admin/base.html" %}
{% load static from staticfiles %} # This might be just {% load static %} in your ENV
{% block title %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}
{% block extrastyle %}{{ block.super }}<link rel="stylesheet" type="text/css" href="{% static "css/admin-extra.css" %}" />{% endblock %}
{% block branding %}
<h1 id="site-name">{{ site_header|default:_('Django administration') }}</h1>
{% endblock %}
{% block nav-global %}{% endblock %}
As mentioned in the comments:
make sure your app is before the admin app in INSTALLED_APPS, otherwise your template doesn't override django's
That's It! you're done
I just extended admin/base.html to include a reference to my own css file - at the end. The beauty of css is that you don't have to touch existing definitions, just re-define.
In your static directory, create a static/admin/css/base.css file.
Paste in Django's default Admin CSS first, then add your customizations at the bottom.
If you want a global scope and you don't want to think about overriding templates a mixin works really well for this. Put this code wherever you want:
class CSSAdminMixin(object):
class Media:
css = {
'all': ('css/admin.css',),
}
Then, make a CSS file called admin.css with your overrides, for example:
select[multiple] {
resize: vertical;
}
Then, in whatever models you want, do:
class MyModelAdmin(admin.ModelAdmin, CSSAdminMixin):
And you'll be all set.
Have admin/css/changelists.css inside a folder in STATICFILES_DIRS, and it will user that changelists.css instead of the default admin one.
It just so happens that using <style> tag inside {% block extrastyle %}{% endblock %} did not work for me when I wanted to override css. Theming support provides the correct way. All I was missing is {{ block.super }} :-
{% extends 'admin/base.html' %}
{% block extrastyle %}{{ block.super }}
<style>
--- your style ---
--- properties here ---
</style>
{% endblock %}