i need some help, i am a begginer, i start learning Symfony few days ago but i found this problem, i dont know where should i put my css files, and i am asking for help ..
so here is my twig file : ( in folder src/../views/user)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
{% stylesheets 'bundles/app/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset('essai.css') }}" />
{% endstylesheets %}
</head>
</html>
<h1>
Hello
</h1>
and my file css "essai.css" is in web/bundles/framework/css
h1 {
color: red;
}
Thanks for any help.. :)
Your error is simple you define follow path:
{% stylesheets 'bundles/app/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset('essai.css') }}" />
{% endstylesheets %}
-
'bundles/app/css/*'
And your file on this path
web/bundles/framework/css
now you have to solutions:
you change the path in your template from 'bundles/app/css/' to 'web/bundles/framework/css/'
OR
you change put your css file in the folder 'bundles/app/css/'
The solution of #kunicmarko20 is right too.
Or read the documentation:
symfony.com/doc/current/best_practices/web-assets.html that link from #adam187
Your css and js should be in your web/ folder and that is where asset() is looking for them so you should change:
{{ asset('essai.css') }} => {{ asset('bundles/framework/css/essai.css') }}
Related
The {% load static %} tag at the top of my html file seems to work
But when I try to link my css file from static folder using this code :
{% load static %}
<link href="{% static 'static/style.css' %}" rel="stylesheet">
vscode tries to create a file called {% static 'static/style.css' %} inside my templates directory, meaning the static keyword isn't being recognized.
Any help in figuring out why would be highly appreciated (screenshot of path at bottom)
Here's my relevant settings.py to link static files
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
STATIC_URL = '/static/'
STATICFILES_DIRS = [
BASE_DIR / "static",
'/Google_Solutions/static/',
]
My static and templates are in the main directory
and here's my home.html file head where i'm trying to include files
{% extends 'layout.html' %}
{% load static %}
{% block head %}
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title> Homepage </title>
<!-- Template Main CSS File -->
{% load static %}
<link href="{% static 'css/style.css' %}" rel="stylesheet">
{% endblock %}
here's my layout.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/png" sizes="16x16" href="{% static '/favicon-16x16.png'%}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght#700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap" rel="stylesheet">
{% block head %}
{% endblock %}
</head>
<body>
{% block body %}
{% endblock %}
</body>
<script type="text/javascript" src="{% static 'js/app.js' %}"></script>
So I found out the error , it was only my local vscode
Even if the hover link shows the wrong address, as long as your syntax is correct, your static files will load just fine. Check it by starting your server
So basically I can't manage to connect .css file to my .html.
Previously it just wasn't finding the .css file but after I've referenced the full path it stopped giving me the 'not found' error on cmd local host so it does find it it just doesn't apply it to change styling.
The .html and .css files are in the same folder, I already tried putting the css in both /static and /media folders, neither worked
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href=C:\Users\Any1\Desktop\personal_portfolio-
project\blog\templates\blog\master.css">
</head>
<body>
<h1>Example heading</h1>
<p>Lori is home blog</p>
</body>
</html>
#just trying to change h1 color to red for testing
h1 { color: #FF0000;
}
#and my settings.py
STATIC_URL = '/static/'
MEDIA_ROOT = BASE_DIR / 'media'
MEDIA_URL = '/media/'
#Mark Rofail
thanks so much that fixed it.
I just did
{% load static %}
<link href="{% static 'css/master.css' %}" rel="stylesheet">
instead of
<link rel="stylesheet" href=C:\Users\Any1\Desktop\personal_portfolio-
write it like this
{% load static %}
.
.
.
{% block css %}
<link href="{% static 'css/master.css' %}" rel="stylesheet">
{% endblock %}
make sure your css is at '/static/css/master.css'
In main html document:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}sgbit/style.css" media="screen" >
<title>sgbit</title>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
in settings.py file:
STATIC_URL = '/static/'
STATIC
os.path.join(BASE_DIR , 'static'),
]
I'm trying basic background color change to confirm css is working on my document, but nothing i try seems to work. I have watched a lot of youtube videos and also read the documents several times. can you please tell me the issues in my code.
Use this:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="{% static 'sgbit/style.css'%} " media="screen" >
<title>sgbit</title>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
Silly question but i can't figure it out and it's too much. In a django project, in the same directory i have base_template.html and base_style.css. In a child folder i have search.html.
base_template.html
base_style.css
folder----
search.html
Search.html extends base_template.html like so
{% extends "base_template.html" %}
Inside base_template.html i import base_style.css
<!DOCTYPE html>
<html>
<head>
<title>{% block title %} Base template {% endblock %}</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="base_style.css">
<link rel="stylesheet" type="text/css" href="awesome_font.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<style>
{% block Additional_Styles %}
{% endblock %}
</style>
And there's no way it works.
**Already tried:
./base_style.css
/base_style.css
base_style.css"/**
If i replace
<link rel="stylesheet" type="text/css" href="base_style.css">
with:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
It works, the css loads. I must mention that i just downloaded the css from the link and made no modifications.
Why doesnt the import work?
EDIT
settings.py:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR,'templates')],
....
STATIC_URL = '/static/'
PROJECT_DIR = os.path.dirname(os.path.abspath(__file__))
STATIC_ROOT = os.path.join(PROJECT_DIR, 'static')
So the base_template is in MainDjangoApp\templates
You should pu your static files (.css, .js) in a static folder inside your app:
app
static
app
css
base_style.css
adn in your template you should use
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'app/css/base_style.css' %}">
You should definitely read Writing your first Django app, part 6 and Managing static files (e.g. images, JavaScript, CSS) on the djangoproject site.
A solution would have been to change the folder of base_style.css as in the docs, however i added this to settings.py and i got it working. My app is not that complex so i won't get tangled in files.
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "templates"),
]
I have a fairly simple setup. I created a flask app and call index.html on route '/'.
index.html contains this:
{% extends "template.html" %}
{% block content %}
<h4 class="centeredText">
HEADER TEXT
</h4>
{% for p in paragraph %}
<p class="centeredText">
{{ p }}
</p>
{% endfor %}
{% endblock %}
My template.html is also very simple:
<html>
<link rel="stylesheet" media="screen" href = "{{ url_for('static', filename='bootstrap.min.css') }}">
<link rel="stylesheet" media="screen" href = "{{ url_for('static', filename='custom.css') }}">
<link rel="stylesheet" media="screen" href = "{{ url_for('static', filename='custom_navbar.css') }}">
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300' rel='stylesheet' type='text/css'>
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<h1>{% if pageType = 'home' %} HOME {% endif %}</h1>
</head>
<body> <h1>TEMPLATE</h1>
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
</html>
While testing I get this error:
expected token 'end of statement block', got '='
Edit: I missed including the variable in the header in template.html. Which I now know, to be the source of the error. Is there anyway to pass a variable to template.html, or is that not good practice?
Help!
The pageType variable should appear in your template.html so long as you pass it to the render_template function. In your case, you have a syntax error here:
{% if pageType = 'home' %}
You need to use == instead, so it should look like this:
{% if pageType == 'home' %}