CSS isn't loading in Django - python

I have a problem with my Django project which does not want to load static files. I tried a lot of solutions proposed here in the forum like:
settings.py -> setting the STATICFILES_DIRS (I had it from the beginning but was trying different things)
changing my URL paths in the HTML links tag
moving everything into one template instead of extending
adding app name in URLs
adding CSS to mime
moving load static to head
and many more out of which all failed.
Could anyone see what the problem in the code is? Thank you
My project has a structure like this:
my_site
blog
-- static/blog
-- templates/blog
-- standard Django files
my_site
-- standard Django files
templates
static
-- images
whole folder organization
BLOG:
urls.py:
from django.urls import path
from . import views
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
app_name = "blog"
urlpatterns = [
path("index", views.index, name="index"),
path("posts", views.posts_list, name="posts_list"),
path("posts/<slug:slug>", views.post, name="post")
]
urlpatterns += staticfiles_urlpatterns()
views.py:
from django.http.response import HttpResponse
from django.shortcuts import render
# Create your views here.
def index(request):
return render(request, 'blog/index.html')
def posts_list(request):
return render(request, "blog/posts_list.html")
def post(request):
return render(request, "blog/post.html")
templates/blog/index.html:
{% extends "base.html" %}
{% load static %}
{% block title %}
Yogiri
{% endblock %}
{% block css_files %}
<link ref="stylesheet" type="text/css" href="{% static 'blog/index.css' %}" />
{% endblock %}
{% block content %}
{% endblock %}
static/blog/index.css
header {
background-color: teal;
}
my_site
settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'blog.apps.BlogConfig',
]
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
os.path.join(BASE_DIR, 'templates'),
],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / "static"]
templates
base.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
{% block title %}
{% endblock %}
</title>
{% load static %}
<link ref="stylesheet" type="text/css" href="{% static "base_style.css" %}">
{% block css_files %}
{% endblock %}
</head>
<body>
<header>
<img src="{% static "images/logo.png" %}" alt="Yogiri" width="200" height ="100">
Yogiri - Hatha Yoga
</header>
{% block content %}
{% endblock %}
</body>
</html>
static:
base_style.css
body {
background-color: teal;
}

This will not work: <link ref="stylesheet" type="text/css" href="{% static 'blog/index.css' %}" />
You have set the static path to [BASE_DIR / "static"]. This tells Django to look for static files in the static directory which is located in the root directory.
Place your blog/index.css in the root static directory(where you have put the images folder).
EDIT
Another option will be to include the directory in STATICFILES_DIRS.
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
os.path.join(BASE_DIR, 'blog/static')
]

Related

Django Will Not Open Up Static File Image, Django 3

So I have been trying to figure out why the image will not show and I have watched and read numerous things, but i still can't find anything. This is my first question on here. Thanks for helping out
HTML
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Nikhil's Portfolio</title>
</head>
<body>
test
<img scr="{% static 'static/homepage/wpap.jpg' %}" alt="why is it not working">
<img scr="{% static 'static/homepage/download.jpg' %}" alt="why is it not working">
</body>
</html>
url.py of my website (not app url)
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('homepage.urls'))
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
How my files are arranged
img of file organization
Try this
{% static 'homepage/wpap.jpg' %}
Instead of
{% static 'static/homepage/wpap.jpg' %}
It would need to change from this:
<img scr="{% static 'static/homepage/wpap.jpg' %}" alt="why is it not working">
To this:
<img src="{% static 'static/homepage/wpap.jpg' %}" alt="why is it not working">
The "scr" would change to "src"

Django template extends doens`t open a file

I`m trying to extend one html file from other, but it simply shows me only base.html result.
Here is my project folders:
-diploma
-catalogue
-migrations
-templates
-catalogue
base.html
header.html
_init__.py
admin.py
apps.py
models.py
tests.py
urls.py
views.py
-diploma
__init__.py
settings.py
urls.py
wsgi.py
settings.py
...
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
INSTALLED_APPS = [
'catalogue',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
...
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')]
,
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
urls.py
from django.conf.urls import url
from catalogue import views
urlpatterns = [
url(r'^$', views.index, name='index'),
]
views.py
from django.shortcuts import render
def index(request):
return render(request, 'catalogue/base.html')
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
header.html
{% extends 'catalogue/base.html' %}
{% block content %}
<h1>Hello</h1>
{% endblock %}
Really, trying to find the issue, but can`t figure out. Only effect cghanges made in base.html
Try putting:
{% extends 'base.html' %}
instead of the whole path

TemplateDoesNotExist. loading static files and templates Django project structure

I am a bit confused on how to yield templates from other apps
Here is a picture of my project structure:
I am getting this error:
TemplateDoesNotExist at /
home.html
home/views.py:
class HomeView(generic.TemplateView):
template_name = "home.html"
Settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
os.path.join(BASE_DIR, "home/static/home/js"),
os.path.join(BASE_DIR, "home/static/home/images"),
os.path.join(BASE_DIR, "home/static/home/css"),
)
TEMPLATE_DIRS = (
os.path.join(BASE_DIR, 'templates'),
)
project/home/urls.py:
from django.conf.urls import patterns, url
from home.views import HomeView
urlpatterns = patterns('',
url(r'^$', HomeView.as_view(), name="home"),
)
project/urls.py
from django.conf.urls import patterns, include, url
from django.contrib import admin
urlpatterns = patterns('',
url(r'^admin/', include(admin.site.urls)),
url(r'', include("home.urls", namespace="home")),
)
project/templates/home/index.html
<!DOCTYPE html>
<html>
<head lang="en">
...
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<!-- Custom CSS -->
<link href="{{ STATIC_URL }}boothie.css" rel="stylesheet">
<!-- Custom JS-->
<script src="{{ STATIC_URL }}boothie.js"></script>
<title>Boothie</title>
</head>
<body>
<div class="container">
...
</div>
</head>
{% block content %}{% endblock %}
</body>
</html>
project/home/templates/home/home.html:
{% extends index.html %}
{% block content %}
...
<script src="{{ STATIC_URL }}js/jquery.easing.1.3.js"></script>
<script src="{{ STATIC_URL }}js/boothie.js"></script>
{% endblock %}
Django stops at the first template that it finds matching the requested filename, and it will start at the templates directory in the app folder.
If it doesn't find it here, it will then go up the chain till it has searched all locations in the TEMPLATE_DIRS setting, and only then will it print an error that it cannot find a template. The way it searches for templates is defined by the TEMPLATE_LOADERS setting.
In your project layout, the template you want is located in the template directory of the home app, and inside this directory, under the home directory. Thus the template path should be home/home.html in your view:
class HomeView(generic.TemplateView):
template_name = "home/home.html"
If your templates directory is in your project's root you have to add it to setitngs.py
If it's the subdirectory of an app (that is in INSTALLED_APPS in settings.py) then the app template loader (enabled by default) will load it.
If your app is called home then you would have the templates dir inside the home dir, not home under templates which would make it accessible as home/home.html since it's under the home subfolder of the templates dir in settings.py

static url path setting in django

I am new to django, presently I am learning and trying to build a basic site with django-cms. Below are my project folder structure and code files
project_folder
manage.py
main_folder
static
css
new-styles.css
js
new-styles.js
templates
base.html
home.html
media
pic_1.gif
.....
settings.py
urls.py
.......
settings.py
import os
PROJECT_DIR = os.path.abspath(os.path.dirname(__file__))
DEBUG = True
MEDIA_ROOT = os.path.join(PROJECT_DIR,'media')
MEDIA_URL = '/media/'
STATIC_ROOT = os.path.join(PROJECT_DIR,'static')
STATIC_URL = '/static/'
TEMPLATE_DIRS = (os.path.join(PROJECT_DIR,'templates'))
TEMPLATE_CONTEXT_PROCESSORS = (
'django.contrib.auth.context_processors.auth',
'django.core.context_processors.i18n',
'django.core.context_processors.request',
'django.core.context_processors.media',
'django.core.context_processors.static',
'django.core.context_processors.debug',
'django.contrib.messages.context_processors.messages',
'cms.context_processors.media',
'sekizai.context_processors.sekizai',
)
......
.......
urls.py
from django.conf.urls import patterns, include, url
from django.conf import settings
urlpatterns = patterns('',
url(r'^admin/', include(admin.site.urls)),
url(r'^$', ...........),
)
if settings.DEBUG:
urlpatterns = patterns('',
url(r'^media/(?P<path>.*)$', 'django.views.static.serve',{'document_root': settings.MEDIA_ROOT, 'show_indexes': True}),
url(r'', include('django.contrib.staticfiles.urls')),
) + urlpatterns
base.html
{% load cms_tags sekizai_tags menu_tags %}
<html>
<head>
<title>{%block "title" %}{% endblock %}</title>
<link rel="stylesheet" href="{{ STATIC_URL }}css/new-styles.css">
{% render_block "css" %}
</head>
<body>
{% cms_toolbar %}
{% block "base_content" %}
{% endblock %}
{% render_block "js" %}
</body>
</html>
home.html
{% extends "base.html" %}
{% load cms_tags %}
{% block "title" %}Welcome to Services{% endblock %}
{% block "base_content" %}
<p>Hi this is paragraph</p>
<img src="{{ MEDIA_URL }}images/promo3.jpg" />
{% placeholder "number_one" %}
{% endblock %}
new-styles.css
body {
padding:0px; margin:0px; margin-top:40px;
background-color:#b0c4de;
}
p {
background-color:#e0ffff;
}
So above are my complete project structure and code files, but my actual problem is new-styles.css file is not working, even though I had written some css code in the file it is not linking to the template, so can anyone please let me know whats wrong and why base.html template file is unable to access the new-styles.css file, whether the path given in link tag is wrong or the path setting in the settings.py is wrong?
urls.py
from django.conf.urls import patterns, include, url
from django.conf.urls.static import static
from django.contrib import admin
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from project_name import settings
admin.autodiscover()
urlpatterns = patterns('',
.....................
) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
urlpatterns += staticfiles_urlpatterns()

placeholder not working in django-cms

I am using django cms to develop a site, configured everything and working fine,and below are my code files
settings.py
........
........
TEMPLATE_CONTEXT_PROCESSORS = (
'django.contrib.auth.context_processors.auth',
'django.core.context_processors.i18n',
'django.core.context_processors.request',
'django.core.context_processors.media',
'django.core.context_processors.static',
'cms.context_processors.media',
'sekizai.context_processors.sekizai',
)
CMS_PLACEHOLDER_CONF = {
'terms_and_conditions': {
'name': gettext('Terms & Conditions'),
'plugins': ['TextPlugin'],
},
}
CMS_TEMPLATES = (
('home.html', 'Home Page'),
)
........
.......
urls.py
from django.conf.urls import patterns, include, url
from django.conf.urls.defaults import *
from django.conf.urls.i18n import i18n_patterns
from django.conf import settings
from django.contrib import admin
admin.autodiscover()
urlpatterns = patterns('',
url(r'^admin/', include(admin.site.urls)),
url(r'^', include('cms.urls')),
)
base.html
{% load cms_tags sekizai_tags menu_tags %}
<html>
<head>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to Services</title>
{% render_block "css" %}
</head>
<body>
{% cms_toolbar %}
<div class="promoinner">
{% block base_content %}{% endblock %}
</div>
{% render_block "js" %}
</body>
</html>
home.html
{% extends "base.html" %}
{% load cms_tags %}
{% block base_content %}
{% placeholder "terms_and_conditions" or %}
<p>This data should be present in the editor in editing mode before entering anything in to plugins, because this data is giving through html</p>
<p>But when i tried to edit the placeholder i cant see the data(that we mentioned in tags of html file), i can able to see the placeholder and i can able to add some data in to text plugin </p>
{% endplaceholder %}
{% endblock %}
Here all the problem is, we are giving some data through p tags in html file, so when i opened the url http://localhost:8000/?edit, i can able to see the placeholder named as
Terms & Conditions as we mentioned in the settings.py file, but the data we given in html file through tags is not editable and cant be seen, at the same time i can able to add some text in to placeholder using text plugin.
Can anyone please let me know why the data that mentioned through html tags in home.html is not editable and even cant be seen ?
try to load the placeholder tags in "base.html" or "home.html" like(looks like your missing "placeholder_tags")...
{% load cms_tags sekizai_tags menu_tags placeholder_tags %}

Categories

Resources