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"),
]
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>
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') }}
This is my urls.py
import os.path
site_media = os.path.join(
os.path.dirname(__file__), 'site_media'
)
urlpatterns = patterns('',
url(r'^site_media/(?P<path>.*)$', 'django.views.static.serve',
{ 'document_root': site_media }),
)
My site_media folder and style.css file is in
myProjectFolder/myApp/static/site_media/css/style.css
and in my base.html template (all my other templates extend off of this base.html template) this is what I have:
<head>
<title>{% block title %}{% endblock %}</title>
<link rel='stylesheet' type='text/css' href='/site_media/css/style.css' />
</head>
<body>
{% block header %}{% endblock %}
{% block content %}
<div id='header'></div>
{% endblock %}
</body>
and in my style.css, all I have is this:
#header {
display: inline;
background-color: black;
color: black;
border: 1px solid green;
}
and the CSS is not being applied to the
#header
div. Any idea why?
The problem comes from 2 areas.
wrong document_root variable passed
not using template tags in html
1.
Defining site_media variable in urls.py file is discouraged as it does not adhere to DRY principle. It should be held as a variable in your settings.py file so other modules may import if needed.
In your settings.py file, add the following line:
import os.path
SITE_MEDIA_ROOT = os.path.join(
os.path.dirname(__file__), 'myApp/', 'static/', 'site_media' #this should be the correct path instead
)
Replace your urls.py file with this:
from myApp import settings
urlpatterns = patterns('',
url(r'^site_media/(?P<path>.*)$', 'django.views.static.serve',
{ 'document_root': settings.SITE_MEDIA_ROOT }),
)
2.You should use django template tags to get the css file. In your base template, add this line above the head tag:
{% load static %}
Then replace:
<link rel='stylesheet' type='text/css' href='/site_media/css/style.css' />
with:
<link rel='stylesheet' type='text/css' href="{% static 'site_media/css/style.css' %}" />
After which it should work.
Two options:
You can modify a little bit your code in urls.py
in urls.py
site_media = os.path.join(
os.path.dirname(__file__), 'site_media'
)
to
site_media = os.path.join(
os.path.dirname(__file__), "../", "myApp", "static", 'site_media'
)
2. Remove
site_media = os.path.join(
os.path.dirname(__file__), 'site_media'
)
and add
{% load static %} at the beginning of base.html
and change
<link rel='stylesheet' type='text/css' href='/site_media/css/style.css' />
to
<link rel='stylesheet' type='text/css' href="{% static 'site_media/css/style.css' %}" />
The second method is preferable.
Here is working code: https://github.com/lukaszszajkowski/s21083672
Here are links to documentation and reading:
https://docs.djangoproject.com/en/dev/howto/static-files/#configuring-static-files
Media files are served, static files aren't