index.html
I have changed {% static "/main/css/index.css" %} to {% static "main/css/index.css" %}
{% extends 'main/base.html' %}
{% load static %}
<link rel = 'stylesheet' type="text/css" href="{% static "/main/css/index.css" %}"/>
{% block title %}
{{title}}
{% endblock %}
{% block content %}
<body>
<div class="grid-wrapper">
<header class="grid-header">
<img class="circles" src="{% static "main/img/main8.jpg" %}" alt="main pic">
<p>hello</p>
</header>
</div>
</body>
{% endblock %}
index.css
.grid-wrapper {
display: grid;
grid-template-columns: 1 fr;
grid-template-rows: 1 fr;
grid-template-areas: 'header header';
}
.circles {
display: block;
margin-left: auto;
margin-right: auto;
}
header {
position: relative;
width: 100%;
}
p {
color: red;
text-align: center;
position: absolute;
width: 100%;
text-align: center;
top: 0;
}
settings.py
STATIC_URL = 'static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "main/static"),
]
I tried changing file names, changing locations, connecting in a different way, but all this does not work. I also changed the settings.
This is an example of my configurations:
settings.py
STATIC_DIR = os.path.join(BASE_DIR,"static")
STATIC_URL = '/static/'
STATICFILES_DIRS = [
STATIC_DIR,
]
base.html
<!DOCTYPE html>
{%load static%}
<html lang="en">
<head>
My file structure is:
/Project
/App
/Project
/settings.py
/static
/styles.css
/templates
/base.html
You may need to share you directory structure to get further clarifications.
Related
I got this error while using this command.
The joined path (/static/logo/my_project_logo.jpg) is located outside of the base path component (/home/softsuave/project/my_project_api/static)
Traceback (most recent call last):
File "", line 1, in
File "/home/softsuave/project/my_project_api/venv/lib/python3.10/site-packages/django/contrib/staticfiles/finders.py", line 276, in find
result = finder.find(path, all=all)
File "/home/softsuave/project/my_project_api/venv/lib/python3.10/site-packages/django/contrib/staticfiles/finders.py", line 110, in find
matched_path = self.find_location(root, path, prefix)
File "/home/softsuave/project/my_project_api/venv/lib/python3.10/site-packages/django/contrib/staticfiles/finders.py", line 127, in find_location
path = safe_join(root, path)
File "/home/softsuave/project/my_project_api/venv/lib/python3.10/site-packages/django/utils/_os.py", line 29, in safe_join
raise SuspiciousFileOperation(
django.core.exceptions.SuspiciousFileOperation: The joined path (/static/logo/my_project_logo.jpg) is located outside of the base path component (/home/softsuave/project/my_project_api/static)
result = finders.find(uri)
from django.contrib.staticfiles import finders
settings.py
BASE_DIR = Path(__file__).resolve().parent.parent
STATIC_URL = 'static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'site/assets/')
STATICFILES_DIRS = [
BASE_DIR / "static/",
BASE_DIR,
]
MEDIA_URL = 'media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/qr_code')
file structure:
my_project
my_app
static
logo
my_project_logo.jpg
template
my_app
my_template.html
my_tempate.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>
QR Code
</title>
<style>
#goable{
width: 300px;
height: auto;
margin: 40%;
border: 1px solid black;
}
#img1{
height:100px ;
margin:10px 100px 0px 100px;
}#img2{
height: 200px;
margin:10px 50px 0px 50px;
}
h1,p{
text-align: center;
}
</style>
</head>
<body>
<div id="goable">
<img id='img1' src="{% static 'logo/my_project_logo.jpg' %}" alt="My image">
<h1>SCAN ME!!!</h1>
<p> TO Notify Drivers that their car is about to get a parking ticket</p>
<img id="img2" src="{% static 'qr/demo_qr_code.png' %}" alt="no image found">
<h1>BECOME A PRAKING HERO</h1>
</div>
</body>
</html>
I am developing locally Django page and have some issues with highlighted menus.
when hover over "moje projekty" I see below link
127.0.0.1:8080/portfolio/, I click and page opens
when now I hover hover 2nd time, it is showing:
127.0.0.1:8080/portfolio/portfolio/, I click and page opens
when now I hover hover 3rd time,it is showing:
127.0.0.1:8080/portfolio/portfolio/portfolio/, I click and error is:
Page not found (404)
Request Method: GET
Request URL: http://127.0.0.1:8080/portfolio/portfolio/portfolio/
Using the URLconf defined in my_site.urls, Django tried these URL patterns, in this order:
admin/
[name='home']
about_me/ [name='aboutme']
portfolio/ [name='portfolio']
posts/<slug:the_slug>/ [name='post_detail']
summernote/
^media/(?P<path>.*)$
portfolio/ [name='home']
portfolio/ about_me/ [name='aboutme']
portfolio/ portfolio/ [name='portfolio']
portfolio/ posts/<slug:the_slug>/ [name='post_detail']
portfolio/ summernote/
portfolio/ ^media/(?P<path>.*)$
about_me/
The current path, portfolio/portfolio/portfolio/, didn’t match any of these.
base.html:
<!DOCTYPE html>
<html>
<head>
<title>Moja strona</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous" />
</head>
<body>
<style>
body {
font-family: "Roboto", sans-serif;
font-size: 17px;
background-color: #fdfdfd;
}
.shadow {
box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1);
}
.btn-danger {
color: #fff;
background-color: #f00000;
border-color: #dc281e;
}
.masthead {
background: #3398E1;
height: auto;
padding-bottom: 15px;
box-shadow: 0 16px 48px #E3E7EB;
padding-top: 10px;
}
img {
width: 00%;
height: auto;
object-fit: contain;
</style>
{% load static %}
<center> <img src="{% static 'blog/moj.png' %}" alt="My image"> </center>
<!-- Navigation -->
<nav class="navbar navbar-expand-sm navbar-light bg-light shadow" id="mainNav">
<div class="container-fluid">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item text-black">
<a class="nav-link text-black font-weight-bold" href="/">Blog</a>
</li>
<li class="nav-item text-black">
<a class="nav-link text-black font-weight-bold" href="portfolio/">Moje projekty</a>
</li>
<li class="nav-item text-black">
<a class="nav-link text-black font-weight-bold" href="about_me">Kontakt</a>
</li>
</ul>
</div>
</div>
</nav>
{% block content %}
<!-- Content Goes here -->
{% endblock content %}
<!-- Footer -->
</body>
</html>
urls.py project:
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('blog.urls')),
path('portfolio/', include('blog.urls')),
path('about_me/', include('blog.urls')),
]
urls.py app:
from . import views
from django.urls import path
from django.conf.urls import include
urlpatterns = [
path('', views.PostList.as_view(), name='home'),
path('about_me/', views.Aboutme.as_view(), name='aboutme'),
path('portfolio/', views.Portfolio.as_view(), name='portfolio'),
path('posts/<slug:the_slug>/', views.PostDetail.as_view(), name='post_detail'),
path('summernote/', include('django_summernote.urls')),
]
# to jest dla wysiwyg
# add condition in django urls file
from django.conf import settings
from django.conf.urls.static import static
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)
Questions:
why link is changing 2nd time when I click?
why I am getting this error after 3rd click?
Hey :) the paths /portfolio/ and /portfolio/portfolio/ are correct, but when you use htm href='portfolio/' without forward slash they are not absolute. html just add it to existing one. So if u in example.com/portfolio/ and click this href you adds another 'portfolio/'.
just use in href :
<a class="nav-link text-black font-weight-bold" href="{% url 'blog:portfolio' %}">
PS. in urls.py for project you don't need two paths to the same app
Very new to Django I am trying to follow along a tutorial by sentdex over on youtube.
Django version 1.9
Chose this version as that is being used in the tutorial.
I can't seem to figure out how to get the css file to load.
The location of the css file
/media/xxx/django tutorial/mysite/personal/static/personal/css
I assume the BASE_URL is referencing till:
/media/xxx/djangotutroial/mysite
This is the location of the manage.py. Or am I wrong?
The css file is reference in header.html:
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type = "text/css"/>
I read through a lot of the answers and if I understand correctly I have to change settings.py in mysite folder.
This is what I have at the moment:
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR,'personal'),
]
I have tried a lot of combinations in the os.path.join I still can't get the file to load.
Thank for your help.
Project Structure:
django tutorial
--mysite
--mysite
---------__pycache_
---------__init__.py
---------settings.py
---------urls.py
---------wsgi.py
--personal
---------migrations
---------__pycache_
---------static
------personal
------css # has the bootstrap.min.css
------js
---------templates
---------admin.py
---------apps.py
---------init.py
---------models.py
---------tests.py
---------urls.py
---------views.py
If someone can tell me the right command to get the directory structure in ubuntu I would be happy to show that here.
Template:
In home.html:
{% extends "personal/header.html" %}
{% block content %}
<p>Hey, welcome to my webpage. We are testing.<p>
{% include "personal/includes/htmlsnippets.html" %}
{% endblock %}
Error message in view page source
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Page not found at /static/personal/css/bootstrap.min.css</title>
<meta name="robots" content="NONE,NOARCHIVE">
<style type="text/css">
html * { padding:0; margin:0; }
body * { padding:10px 20px; }
body * * { padding:0; }
body { font:small sans-serif; background:#eee; }
body>div { border-bottom:1px solid #ddd; }
h1 { font-weight:normal; margin-bottom:.4em; }
h1 span { font-size:60%; color:#666; font-weight:normal; }
table { border:none; border-collapse: collapse; width:100%; }
td, th { vertical-align:top; padding:2px 3px; }
th { width:12em; text-align:right; color:#666; padding-right:.5em; }
#info { background:#f6f6f6; }
#info ol { margin: 0.5em 4em; }
#info ol li { font-family: monospace; }
#summary { background: #ffc; }
#explanation { background:#eee; border-bottom: 0px none; }
</style>
</head>
<body>
<div id="summary">
<h1>Page not found <span>(404)</span></h1>
<table class="meta">
<tr>
<th>Request Method:</th>
<td>GET</td>
</tr>
<tr>
<th>Request URL:</th>
<td>http://127.0.0.1:8000/static/personal/css/bootstrap.min.css</td>
</tr>
</table>
</div>
<div id="info">
<p>'personal/css/bootstrap.min.css' could not be found</p>
</div>
<div id="explanation">
<p>
You're seeing this error because you have <code>DEBUG = True</code> in
your Django settings file. Change that to <code>False</code>, and Django
will display a standard 404 page.
</p>
</div>
</body>
</html>
In the terminal where runserver:
[24/Feb/2019 06:19:32] "GET /static/personal/css/bootstrap.min.css HTTP/1.1" 404 1703
Error when running using #bkawan code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Page not found at /static/personal/css/bootstrap.min.css</title>
<meta name="robots" content="NONE,NOARCHIVE">
<style type="text/css">
html * { padding:0; margin:0; }
body * { padding:10px 20px; }
body * * { padding:0; }
body { font:small sans-serif; background:#eee; }
body>div { border-bottom:1px solid #ddd; }
h1 { font-weight:normal; margin-bottom:.4em; }
h1 span { font-size:60%; color:#666; font-weight:normal; }
table { border:none; border-collapse: collapse; width:100%; }
td, th { vertical-align:top; padding:2px 3px; }
th { width:12em; text-align:right; color:#666; padding- right:.5em; }
#info { background:#f6f6f6; }
#info ol { margin: 0.5em 4em; }
#info ol li { font-family: monospace; }
#summary { background: #ffc; }
#explanation { background:#eee; border-bottom: 0px none; }
</style>
</head>
<body>
<div id="summary">
<h1>Page not found <span>(404)</span></h1>
<table class="meta">
<tr>
<th>Request Method:</th>
<td>GET</td>
</tr>
<tr>
<th>Request URL:</th>
<td>http://127.0.0.1:8000/static/personal/css/bootstrap.min.css</td>
</tr>
</table>
</div>
<div id="info">
<p>'personal/css/bootstrap.min.css' could not be found</p>
</div>
<div id="explanation">
<p>
You're seeing this error because you have <code>DEBUG = True</code> in
your Django settings file. Change that to <code>False</code>, and Django
will display a standard 404 page.
</p>
</div>
</body>
</html>
Please check if you have done first step as below
Official Documentation link for Django 1.9 link
This document is for an insecure version of Django that is no longer
supported. Please upgrade to a newer release!
Try to move on new release since documentation 1.9 is no longer supported.
Configuring static files
Make sure that django.contrib.staticfiles is included in your INSTALLED_APPS.
Check If your folder structure is similar as below
Project Structure image Link
You do not need to add code below unless if personal folder is same level as BASE_DIR
os.path.join(BASE_DIR,'personal')
Your code below is fine if you have personal app and then static folder inside personal app and then personal folder inside static folder ie personal/static/personal
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type = "text/css"/>
In Case if Page not found error.
Check if bootstrap.min.css exists in path personal/css/bootstrap.min.css
Check spelling as well.
Check your app ie personal in this case is included in INSTALLED_APPS
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'personal'
]
You should serve them during development. Check this part.
Edit your main urls.py(you'll find it in same folder as settings.py).
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
# ... the rest of your URLconf goes here ...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
Make sure that your app is listed in INSTALLED_APPS in django settings.
Remove /personal from your style sheet import. Instead, just have:
{%load static%}
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type = "text/css"/>
I am not sure if you copied and pasted exactly the same code but the p closing tag is out of syntax in home.html.
I am trying to override the class generated by page-down app and the django-crispy-forms . But the indentation that is expected through overrideing class is not working.
base.html(initially)
...
<link rel='stylesheet' href='{% static "css/base.css" %}'>
<style>
{% block style %}{% endblock style %}
</style>
{% block head_extra %}{% endblock head_extra %}
...
base.css
h1 {
color: #777777;
}
post_forms.html
{%extends "base.html" %}
{% load crispy_forms_tags %}
{% block head_extra %}
{{form.media}}
{% endblock head_extra %}
...
By using the inspect feature in chrome I can spot the class that causes the indentation
<div class="wmd-panel">
</div>
The code CSS given below is automatically generated one
.wmd-panel {
margin-left: 25%;
margin-right: 25%;
width: 50%;
min-width: 500px;
}
But after making changes to css/base.css , there is no class named wmd-panel from the file base.css in the styles tab of the chrome. And the changes made are not reflected in the webpage.
base.css
h1 {
color: #777777;
}
.wmd-panel{
margin-right: 0px !important;
margin-left: 0px !important;
}
This is what expected in chrome inspect styles tab
.wmd-panel {
margin-left: 0%;
margin-right: 0%;
}
This above class is from basic.css
You should clean the chrome cache and check again. Sometimes it just does not update the code and you are just viewing the old CSS even you have made changes to it.
Settings>Advanced>ClearBrowsingData>
and delete all Cached images and files
Do you have {% load static %}? Sometimes you just forget that. And often you miss STATIC_URL = '/static/' in your settings.
I want to try and overide the default bootstrap css files that I got with pinax, for example change the topnav background color and change the style of <p class="a12" >gggggggg</p> I created.
I saw that link in stakoverflow
How to change the pinax(0.9a2) template?
I added my custom css in mysite\static\css\my_custom_stuff.css
the css:
.a12{
background-color: red;
color: green;
}
.topbar-inner, .topbar .fill {
background-color: red;
background-image: -webkit-linear-gradient(top, #333, #FF4242);
background-image: -o-linear-gradient(top, #333, #FF4242);
background-image: linear-gradient(top, #333, #FF4242);
}
and added the folowing to the homepage.html
{% block extra_head %}
<link rel="stylesheet" href="{{ STATIC_URL }}css/my_custom_stuff.css">
<p class="a12" >gggggggg</p>
{% endblock %}
Can someone please help me understand what am I doing wrong?
And how should I do it correct
Thanks in advance
it works fine when I addded
os.path.join(PROJECT_ROOT, "static"),
to the STATICFILES_DIRS