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.
Related
I'm making my first Django app and I'm trying to set up my signup.html page while extending my base.html. The URL I have configured works, however it only pulls through the base.html template. I've checked the view, url and the signup.html template and I'm not sure what I'm getting wrong.
signup.html:
{% extends './layout/base.html' %}
{% load static %}
{% block content %}
<h1>Signup</h1>
{% endblock content %}
base.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% load static %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300&family=Oswald&display=swap" rel="stylesheet">
<link rel="icon" href="{% static 'favicon.ico' %}">
<a target="_blank" href="https://icons8.com/icon/DpuVIej1M9Br/health">Health</a> icon by <a target="_blank"
href="https://icons8.com">Icons8</a>
<title>Your Health Now</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
urls.py:
from django.urls import path
from django.contrib.staticfiles.storage import staticfiles_storage
from django.views.generic.base import RedirectView
from . import views
app_name = 'HealthHub'
urlpatterns = [
path('signup/', views.signup, name='signup'),
path('favicon.ico', RedirectView.as_view(url=staticfiles_storage.url("favicon.ico")))
]
views.py:
from django.shortcuts import render
def signup(request):
return render(request, 'HealthHub/signup.html')
You should also define content block in base.html, so:
base.html:
...
<body>
{% block content %}
<h1> Hello World</h1>
{% endblock content %}
</body>
...
Then try it in signup.html, it will change content block to SignUp in h1 tag.
In base.html you should add an empty block where your other pages' HTML code will appear, it should be like this if you want the content ("Signup" h1) to appear under "Hello, world!":
base.html:
<body>
<h1>Hello, world!</h1>
{% block content %}
{% endblock content %}
</body>
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 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 had to change the background image of the jumbotron below based on the input taken from the database.
Here's the code:
housekeeping.html
<div class="jumbotron" style="background-image:url('{%block wallpaper%}{%endblock%}');padding-left:5%;width:100%;background-size: 100%; background-repeat: no-repeat;">
profile.html
{%extends 'housekeeping.html'%}
...
...
{%block wallpaper%}{{wallpaper}}{%endblock%}
app.py
#app.route('/name/<b64>')
def profile_for_song(b64):
...
... #retrives the value of `wallpaper` form a row in the database.
...
wallpaper = '/static/wallpaper.jpg' #dummy value.
return render_template('profile.html', wallpaper=wallpaper)
but it doesn't work, as the value of background-image:url('') remains null.
Is it not possible to alter css with jinja blocks?
PS: I tried with url_for but still nothing.
Watch the use of whitespace control in your wallpaper block in profile.html.
app.py
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/')
def hello_world():
wallpaper = '/static/wallpaper.jpg'
return render_template('profile.html', wallpaper=wallpaper)
if __name__ == '__main__':
app.run()
housekeeping.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
</head>
<body>
<div class="jumbotron" style="background-image:url('{% block wallpaper%}{% endblock %}');padding-left:5%;width:100%;background-size: 100%; background-repeat: no-repeat;">
</div>
</body>
</html>
profile.html
{%extends 'housekeeping.html'%}
{% block wallpaper -%}
{{ wallpaper }}
{%- endblock %}
Sample output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
</head>
<body>
<div class="jumbotron" style="background-image:url('/static/wallpaper.jpg');padding-left:5%;width:100%;background-size: 100%; background-repeat: no-repeat;">
</div>
</body>
</html>
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.