I have defined in my Django Template file
#font-face {
font-family: "EmojiSymbols";
src: url('EmojiSymbols-Regular.woff') format('woff');
text-decoration: none;
font-style: normal;
font-size: 200%;
}
When I implement Internalisation, all things are working find except I keep getting (example of one of the language selected)
Not Found: /en/EmojiSymbols-Regular.woff
[17/Mar/2016 12:16:31] "GET /en/EmojiSymbols-Regular.woff HTTP/1.1" 301 0
Not Found: /en/EmojiSymbols-Regular.woff/
[17/Mar/2016 12:16:31] "GET /en/EmojiSymbols-Regular.woff/ HTTP/1.1" 404 1730
How do I make Django ignore internationalise CSS font source? Or do I have to manually tells it as seen in Manually Switch languages? Though there were no translation (aka {% trans...) in the CSS block of code. Any help please.
Here is the template:
<!doctype html>
<html lang="{{ LANGUAGE_CODE }}"{% if LANGUAGE_BIDI %} dir="rtl"{% endif %}>
{% load pages_tags mezzanine_tags i18n future staticfiles %}
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="{% block meta_keywords %}{% endblock %}">
<meta name="description" content="{% block meta_description %}{% endblock %}">
<title>{% block meta_title %}{% endblock %}{% if settings.SITE_TITLE %} | {{ settings.SITE_TITLE }}{% endif %}</title>
<link rel="shortcut icon" href="{% static "img/favicon.ico" %}">
{% compress css %}
<link rel="stylesheet" href="{% static "css/bootstrap.css" %}">
{% if LANGUAGE_BIDI %}
<link rel="stylesheet" href="{% static "css/bootstrap-rtl.css" %}">
{% endif %}
{% endcompress %}
{% compress js %}
<script src="{% static "js/bootstrap.js" %}"></script>
<script src="{% static "js/bootstrap-extras.js" %}">
</script>
{% endcompress %}
{% block local_style %}
<style>
#font-face {
font-family: "EmojiSymbols";
src: url('EmojiSymbols-Regular.woff') format('woff');
text-decoration: none;
font-style: normal;
font-size: 200%;
}
.emj {
font-family: "EmojiSymbols";
line-height:1;
}
</style>
{% endblock local_style %}
{% block extra_head %}{% endblock %}
</head>
Please note. All webpages are working in all the supported language fine with no problems. The Not Found error was only shown on console when for the font file.
Related
I am using Django 3.2
This is my base template (snippet):
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content={% block page_description %}""{% endblock page_description %}>
<meta name="keywords" content={% block page_keywords %}""{% endblock page_keywords %}>
<link rel='icon' href='{% static "img/favicon.ico" %}' type='image/x-icon'/ >
<title>{% block page_title %}Demo{% endblock page_title %}</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans%3A400%2C300%2C500%2C600%2C700%7CPlayfair+Display%7CRoboto%7CRaleway%7CSpectral%7CRubik">
<link rel="stylesheet" href="{% static 'css/footer.css' %}">
<link rel="stylesheet" href="{% static 'css/header.css' %}">
{% block head_styles %}
{% endblock head_styles %}
{% block head_js %}
{% endblock head_js %}
</head>
<body>
{% block header %}
{% include "partials/header.html" %}
{% endblock header %}
{% block messages %}
{% include 'partials/messages.html' %}
{% endblock messages %}
<!-- Page Content -->
<div class="d-flex flex-column sticky-footer-wrapper">
{% block content %}
{% endblock content %}
</div>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js" integrity="sha512-/DXTXr6nQodMUiq+IUJYCt2PPOUjrHJ9wFrqpJ3XkgPNOZVfMok7cRw6CSxyCQxXn6ozlESsSh1/sMCTF1rL/g==" crossorigin="anonymous"></script>
<!-- Bootstrap core JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!-- Site footer -->
{% block footer %}
{% include 'partials/footer.html' %}
{% endblock footer %}
{% block body_js %}
{% endblock body_js %}
<script>
$().ready(function() {
});
</script>
</body>
</html>
/path/to/header.html
{% load static %}
<!-- Header -->
<header id="js-header" class="u-header u-header--static">
<!-- ... # snipped -->
<form action="/action_page.php" method="GET">
<button id="btn-submit-item" type="submit" class="btn" style="margin-right: 10px;border: 1px solid #CACACA;">Submit</button>
</form>
{% if not user.is_authenticated %}
<a class="btn btn-success btn" href="#" role="button">Sign In</a>
{% else %}
<a class="nav-link text-dark" href="#">{{ user.username }}</a>
{% endif %}
</ul>
</div>
<!-- End Navigation -->
</div>
</nav>
</div>
</header>
<!-- End Header -->
{% block body_js %}
<script>
$().ready(function(){
$( "#btn-submit-item" ).click(function() {
alert( "Handler for .click() called." );
});
});
</script>
{% endblock body_js %}
In rendered page HTML, I get something like this:
# ...
<!-- End Header -->
<script>
$().ready(function(){
$( "#btn-submit-photo" ).click(function() {
alert( "Handler for .click() called." );
});
});
</script>
# ...
</div>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js" integrity="sha512-/DXTXr6nQodMUiq+IUJYCt2PPOUjrHJ9wFrqpJ3XkgPNOZVfMok7cRw6CSxyCQxXn6ozlESsSh1/sMCTF1rL/g==" crossorigin="anonymous"></script>
<!-- Bootstrap core JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!-- Site footer -->
The placement is in the wrong place - so the JQuery operator $ is attempting to be used - BEFORE the JQuery library is loaded - hence the error.
My question is - why is Django rendering the block in the wrong place - and how do I fix this error?
You're rendering header.html in {% block header %} which is added before the jquery script. Therefore, $ is undefined.
Solution 1:
Move the jquery include to the <head></head> of your html, like you did with the bootstrap.min.css file.
Solution 2:
If you want to have your jquery loaded just before the body closing tag (</body>), you should move your inline jquery to a .js file and include that after including jQuery. For example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"
integrity="sha512-/DXTXr6nQodMUiq+IUJYCt2PPOUjrHJ9wFrqpJ3XkgPNOZVfMok7cRw6CSxyCQxXn6ozlESsSh1/sMCTF1rL/g=="
crossorigin="anonymous"></script>
<script src="your_script.js"></script>
</body>
Read more about django and static files here: https://docs.djangoproject.com/en/3.2/howto/static-files/
I'm having some problem with my multiples stylesheet references. Basically the classes defined on style.css are not acting on my index.html. Might be that as there are multiple stylesheet someone of these are overwriting the file style.css?
Last time I was having a similar problem and I asked a question here but after a couple of hours the file was working fine... Now I have restarted and all but still style.css still do nothing...
myapp/static/style.css
h1 {
color: blue;
text-align: center;
}
.box {
width:30%;
height:30%;
background-color: blue;
}
On my layout.html have been defined multiples stylesheet references on the following way
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-
scalable=no">
<!-- Estilos de la master -->
<link rel="stylesheet" href="{% static 'myapp/style.css' %}" type="text/css" >
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}"
type="text/css">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'js/sss/sss.css' %}" type="text/css" media="all">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!-- Estilos de los recursos adicionales -->
<link rel="stylesheet" href="{% static 'fontawesome/web-fonts-with-css/css/fontawesome-
all.min.css' %}">
<!-- LibrerÃas adicionales -->
<script src="{% static 'js/jquery.min.js'%}"></script>
<script src="{% static 'js/sss/sss.min.js' %}"></script>
<!-- LibrerÃas de plugins -->
<!-- Archivo personalizado de Javascript -->
<script src=" {% static 'js/codejs.js' %}"></script>
<title>{% block title %}{% endblock %}</title>
</head>
and finally my index.html:
{% extends "myapp/layout.html" %}
{% load static %}
{% block body %}
<h1> Hola Mundo</h1>
<div class="box">Hello world1</div>
<div style="width:30%; height:30%; background-color: red;">Hello world2</div>
{% endblock %}
I am following a youtube tutorial but my CSS won't load.
I've tried changing the path and resetting the cache in chrome.
I'm at a loss as to what I can change to get it to work. Everything else is working
I've seen some other posts like this but I couldn't find an answer at any of those that worked for me.
Using VS 2019, Python 3.8
app.py
from flask import Flask, render_template, url_for
app= Flask(__name__)
#app.route('/')
def index():
return render_template('index.html')
if __name__ == "__main__":
app.run(debug=True)
index.html
{% extends 'base.html' %}
{% block head %}
<h1>Templated</h1>
{% endblock %}
{% block body %}
<body>Templates</body>
{% endblock %}
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" type="text/css" herf="{{ url_for('static', filename='/css/main.css') }}" >
{% block head %}{% endblock %}
</head>
<body>
{% block body %}
<link rel="stylesheet" type="text/css" herf="{{ url_for('static', filename='/css/main.css') }}">
{% endblock %}
</body>
</html
main.css
body {
color: blue;
margin: 0;
font-family: sans-serif;
}
h1 {
color: red;
margin: 0;
font-family: sans-serif;
}
path: C:\Users\username\OneDrive\Programming\Visual Studio 2019\Flask Introduction\static\css\main.css
In your base.html and in the link tag remove the first / in path /css/main.css ( => css/main.css ) and change to this and check if it works:
<link rel="stylesheet" type="text/css" herf="{{ url_for('static', filename='css/main.css') }}">
You should use relative path not the absolute one.
i have connected django to vue using webpack loader
before running the command npm build everythig was fine by running both terminals everything's working fine but just after running that command and connecting the static file and when i tried to check localhost:8000(defaul django server) i dont see anything not even in console no error and there is nothing
here is my
base.html file
<
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Question Time</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
{% block style %}
{% endblock %}
</head>
<body>
{% block content %}
{% endblock %}
</body>
{% block js %}
{% endblock %}
</html>
and here is my index.html
{% extends "base.html" %}
{% load static %}
{% block style %}
<link rel="stylesheet" href="{% static 'bundle.css' %}">
{% endblock %}
{% block content %}
<noscript>
<strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
{% endblock %}
{% block js %}
<link rel="stylesheet" href="{% static 'bundle.js' %}">
{% endblock %}
i have tried removing dist folder from vue
i have tried removing all the static links which casused this issue but its of no use
https://stackoverflow.com/questions/47034452/how-to-run-production-site-after-build-vue-cli tried this solution as well
but still its of no use
You need to add {% load render_bundle from webpack_loader %}
!DOCTYPE html>
{% load render_bundle from webpack_loader %}
<html lang="en">
...
I have a website i'm putting together with python and django.
I have a template html page, Speakers.html, that extends Base.html. Base.html has the stylesheet base.css.
Speakers.html is displaying with base.css styling as it should be, my problem is that I want Speakers.html to have additional styling from another stylesheet, speakers.css.
I've been trying to figure it out but speaker.css doesn't seem to be applied, infact i've just noticed in the cmd output that the file speaker.css isn't being loaded at all.
I tried putting it in a block, which is the code you now see below.. I had to repeat {% load static %} to get rid of an error about it expecting the endblock but it doesn't seem to have made a difference.
Base.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Base.Html</title>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static "CSS/base.css" %}" />
{% block additionalcss %}{% endblock %}
</head>
<body>
...ect
Speakers.html
<!-- extending works -->
{% extends "Base.html" %}
<!-- Now i'm trying to load an additional stylesheet -->
{% block additionalcss %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static "CSS/speakers.css" %}" />
{% endblock %}
{% block currentpage_content %}
<h2>Guest speakers at the event</h2>
<p> This text would be red if speakers.css was applying properly </p>
...ect
For testing purposes i've put the following rule in speakers.css:
*
{
color: red;
}
So I reason the text on Speakers.html should all be red if it were working.
Try using blocks in the templates.
Something like:
Base.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Base.Html</title>
{% load static %}
{% block css %}{% endblock %}
<link rel="stylesheet" type="text/css" href="{% static "CSS/base.css" %}" />
</head>
<body>
...ect
Speakers.html
<!-- extending works -->
{% extends "Base.html" %}
{% block css %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static "CSS/speakers.css" %}" />
{% endblock %}
{% block currentpage_content %}
<h2>Guest speakers at the event</h2>
<p> This text would be red if speakers.css was applying properly </p>
...ect
By defining blocks in the parents and then specifying them in the children the css files will be inserted into your template.