I have a static folder in it i have css folder inside of that i have .css file which link to my base page which is extended to all pages,when i select an element and try to affect its property i am unable to do so like putting the table in the home page in center.EArlier also i tied to increase cell's width and height in table but it did not affect it immediatley then suddenly after a day by itsel the height and width of cells got set.What do i need to do to affect my template through external css.
Template the base.html page
<!DOCTYPE html>
{% load static %}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Base</title>
<link rel="stylesheet" href="{% static "css/mystyle.css"%}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
{%block Body_Block%}
<table>
HTML...code
</table>
{%endblock%}
settings.py
STATIC_DIR=os.path.join(BASE_DIR,"static")
STATIC_URL = '/static/'
STATICFILES_DIRS=[
STATIC_DIR,
'/var/www/static/',
]
css:
table{
margin: 0 auto;
}
It could be that you may be making the changes while the server is running, in which case the changes may not directly take place sometimes, unless you restart the server.
You can apply static file changes without restarting the server by doing the command
python manage.py collectstatic
You can read more on that here
Related
css located in my_blog/my_blog/blog/static/blog/style.css
manage.py in my_blog/my_blog
head of html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="{% static 'blog/style.css' %}">
<title>{% block title%} My blog {% endblock %}</title>
</head>
I'm using pycharm pro. Browser successfully load css file, but it's empty. Why this is happenning?
I don't see css loading in django console log, when pages load. I changed name of css file. And it's loaded, but once.
When I add new rule to it and reload server, browser still get old version of css.
Now it's works fine. Css loaded properly. I didn't change anything, so I don't know what did happen.
Add this to your settings.py:
os.path.join(BASE_DIR, 'static')
Then move your static folder to project's folder - /my_blog/static/blog/style.css instead of the current one.
I don't believe your href is formatted properly
I already have an index file in a template folder that hold the html code,Also i have css and javascript file in the static folder so when i load the browser i only see the index content without css and javascript
in setting.py file i set clearly the path to the static files that hold css and javascript also in index file we put special tags that specify our static files
The following is the setting.py contents:
STATIC_URL = '/static/'
STARTICFILES_DIRS=[
os.path.join(BASE_DIR,'static'),
]
STATIC_ROOT= os.path.join(BASE_DIR,'assets')
The following is the index file contents:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Travello</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="
{%static'styles/bootstrap4/bootstrap.min.css' %}">
I expect the output of css style and javascipt functionality
STARTICFILES_DIRS is a typo. It is supposed to be STATICFILES_DIR.
STATICFILES_DIRS is the list of folders where Django will search for additional static files aside from the static folder of each app installed.
python manage.py collectstatic collects all the files defined inside static/ folder in your applications and puts it all to the static root.
The website I see when I run the server has not CSS in it, but just the HTML. So far I read that you keep CSS files in a static folder under the project directory. I have an Html template that is in the templates folder and it works perfectly when I load it from the views.home . In the HTML file, I have {% load staticfiles %} at the top of the document, and yes I have checked my installed apps for 'django.contrib.staticfiles' in the settings. Also, in the HTML document, in the href attribute I've added {% static 'style/style.css' %} which is the name of the folder under the static folder.
<!DOCTYPE HTML>
{% load staticfiles %}
<html>
<head>
<title>night_sky_2</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=windows-1252"
/>
<link rel="stylesheet" type="text/css" href="{% static 'style/style.css'
%}" />
</head>
I finally found a solution. All I had to do was add this:
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
'DjangoProjects\Sample\website\static'
)
In the settings and also moved:
{% load staticfiles %}
To the very top of the HTML document, instead of under. I put it under at first because it wasn't giving a red line which to me seems like there isn't an error.
it seems that you have done right in your html template do load the static file. Have you done this configuration in your settings.py ?
STATIC_URL = '/static/'
STATIC_ROOT = 'static'
I've read in this doc that the { % loadstatic %} has been done as {% load static %} just.
See: django docs about sttic files
Its easier than you think, but almost everyone gets it wrong the first time. There was a lightning talk about it at the DjangoCon Europe a couple of days ago: https://youtu.be/eEZYDDaDeCs?t=29m50s
I´m new in python and django.
My code is below and the problem is that the images do not appear.
I include in the teste.html this tag but it didn´t work src="./assets/images/3ed274bc061c771ef0b153111a6fe932_logocartorio.png"
My path is:
BCcartorio
bccartorio
settings
urls
iddigital
views
urls
templates
iddigital
teste.html
assets
css
images
js
My iddigital.views.py:
from django.shortcuts import render, HttpResponse
def home(request):
return (render(request, "iddigital/teste.html"))
My teste.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>teste</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<h1>Welcome</h1>
<button class="btn btn-danger" type="button" name="button">login</button>
<div class="bd-vertical-align-wrapper">
<img class="bd-imagelink-1 bd-own-margins bd-imagestyles " src="./assets/images/3ed274bc061c771ef0b153111a6fe932_logocartorio.png">
</div>
</body>
</html>
It is not a good practice to hard-code the URL of an image as this can cause many unexpected problems(e.g. paths mixup). In order to avoid this Django provides a hassle-free way to manage and serve your static files easily.
First you have to include the django.contrib.staticfiles app in your INSTALLED_APPS and then define in your settings file the STATIC_URL which will serve as the base path that'll be used by Django to find your static files in a template. It is a good practice to have a separate static folder that will contain the assets folder which -in turn- will contain your css, js, images etc sub-folders.
So I'd take the assets folder from that path and put move it in a static folder that would be in the same level as the iddigital and templates ones. In that case your STATIC_URL variable would be equal to '/static/.
Now in the teste.html template you can load your static folder by adding {% load static %} at the top of your file. Your images can now be called as simple as this: <img src="{% static "assets/images/logocartorio.png" %}" class="bd-imagelink-1 bd-own-margins bd-imagestyles"/>
More info on the above can be found at the excellent Djangodocumentation.
I'm new to Django, and facing issues rendering bootstrap on a django page.
This is my base html,
{% load staticfiles %}
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Dropbox Web App Prototype</title>
<!-- Bootstrap -->
<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.</p>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>
The static file is at the same level as the project directory and has the following structure,
I've also added the following line, to my settings.py file
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)
The CSS is not rendering on the home page. Any help appreciated.
You are using an older syntax that's probably doesn't match your version of Django.
In your html file change:
{% load staticfiles %}
to
{% load static %}
Also, replace the single quote with a double quote :
"{% static 'bootstrap/css/bootstrap.min.css' %}"
to:
"{% static "bootstrap/css/bootstrap.min.css" %}"
you can see the exact syntax of dealing with static files here
BASE_DIR is defined by default to:
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
Here __file__ is actually settings.py, so BASE_DIR is on the parent directory, the one that contains manage.py.
It seems your static folder is on another level, so just move it to the same level as manage.py and it should work.
CDN:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
Static
In urls for django runserver:
if settings.DEBUG:
urlpatterns += [url(r'^static/(?P<path>.*)$', views.serve),]
When running from the webserver, you need to config an alias. Nginx example:
location /static {
alias /home/username/mysite/static;}
settings.py:
STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)
In the html
replace this
<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
with this
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
and check this is in the settings.
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
just define additioaly static url in your settings as follow somewhere on the bottom:
STATIC_URL = '/static/'
and check again if your bootstrap is served
can you paste your BASE_DIR ? Can you set it to: BASE_DIR to BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))