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
Related
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.
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 have prepared and Django html template that uses template variables from a databse to overule the standard css of the page. This will allow me to use user specific font colors.
I have it working for the font color, but I get an error on loading a user specic image. See code below:
<!-- Logo -->
{% load static %}
<img class="LogoPos img-responsive"
src="{% static 'img/{{ClubSettingsApplied.0.logo_image}}' %}"
alt="Generic logo image"
title="Client logo">
</img>
<!-- Font color -->
<style>
th {
font-weight: bold;
color: #{{ClubSettingsApplied.0.font_color}};
padding-left: 0.2em;
}
</style>
The use of template variables does not seem to work togehter with the static path tag.
Off course I can build up the complete url including the path from my view... However perhaps there is a smarter work around.
Looking forward to get some ideas.
The static template tag only accept a string as argument and it can't render another variable inside that string.
The solution is to use get_static_prefix template tag. It will help you in this case by rendering the correct prefix that you need to resolve the static file.
I tested this on django 1.7 and django docs state it should work the same way as far back as 1.4 or even further.
<!-- Logo -->
{% load static %}
{% get_static_prefix as STATIC_PREFIX %}
<img class="LogoPos img-responsive"
src="{{ STATIC_PREFIX }}img/{{ClubSettingsApplied.0.logo_image}}"
alt="Generic logo image"
title="Client logo">
</img>
<!-- Font color -->
<style>
th {
font-weight: bold;
color: #{{ClubSettingsApplied.0.font_color}};
padding-left: 0.2em;
}
</style>
i am new to django, and i put the image in my admin header, but the name is blocking it, so i was wondering how to move the name a bit to the middle of the page. Simply adding the spaces in front of the name doesnt work, because for some reason it ignores all the extra spaces.
{% block extrastyle %}
<style type='text/css'>
#header {
background-color: #0c407a;
}
#branding {
height:94px;
background-color: #0c407a;
background: white url('/static/logo2.jpg') no-repeat ;
}
</style>
{% endblock %}
{% block branding %}
<h1 id="myid">{{ _(' MyName') }}</h1>
{% endblock %}
maybe you can try with adding some CSS code:
#myid{
margin-left: 30px;
}