I want to place my gallery.html and gallery.css inside my base.html. I've ran collectstatic and runserver but the gallery.css and html cannot be located when I inspect it with chrome dev tools. Only the base.html and css are to be found and displayed.
Here is a brief structure of my project:
/proj
/gallery
/static
/css
gallery.css
/templates
gallery.html
/proj
/templates
base.html
/static
/css
base.css
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">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Base css -->
<link rel="stylesheet" type="text/css" href="{% static "css/base.css" %}">
</head>
<body class="background">
<div class="wrapper">
{% block content %}
<!-- content here-->
{% endblock %}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
gallery.html:
{% extends "base.html" %}
{% block content %}
<!-- container for photos-->
<script type="text/javascript" src="{% static "js/masonry.pkgd.minjs" %}"></script>
<link rel="stylesheet" type="text/css" href="{% static "css/gallery.css" %}">
<div class="gallery-container">
dsfsdfdsfdsf
</div>
{% endblock %}
gallery.css:
.gallery-container {
background-color: red;
width: 50%;
height: 50%;
margin: 0px;
padding: 0px;
}
base.css
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.background {
background-color:#b0a0e6;
}
.wrapper {
background-color: grey;
height: 100%;
width: 75%;
margin-left: auto;
margin-right: auto;
overflow:auto;
}
settings.py
STATIC_URL = '/static/'
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
STATICFILES_STORAGE = (
'django.contrib.staticfiles.storage.StaticFilesStorage'
)
STATIC_ROOT = os.path.realpath(os.path.join(BASE_DIR, '..', 'websiteAssets'))
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
TEMPLATE_DIRS = (
os.path.join(BASE_DIR,'templates'),
os.path.join(BASE_DIR,'home/templates'),
os.path.join(BASE_DIR,'gallery/templates'),
os.path.join(BASE_DIR,'contact/templates'),
os.path.join(BASE_DIR,'aboutme/templates'),
)
With the line {% static 'css/gallery.css' %} you are trying to get the static file gallery.css located in the directory 'css' but this directory doesn't exist as gallery is put in just the directory 'static' and not 'static/css'. Try doing it by {% static 'gallery.css' %} or creating a directory 'css' in static and putting gallery.css in it.
Old question and I'm sure you've either figured out a solution or moved on, but you need to add:
{% load static %}
in your gallery.html beneath the {% extends 'base.html' %}. Django templates require you to load static files on any template that you are using them in regardless if they are included in a template that you are extending from. See here for a better reference.
Related
I am trying to upgrade the Bootstrap version to 4.1.3 and jQuery to 3.6 . But the page is not showing in full screen, it shows in the middle of the screen or we can say the page is broken. Here the code uses some Django formatting.
Html code:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
{% block meta %}
<link rel="icon" href="{% static '/images/logo.jpg' %}">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% endblock meta %}
<title>Portal {% block title %}{% endblock title %}</title>
{% block stylesheets %}
<link rel="stylesheet" href='{% static "/login-assets/bower_components/bootstrap/dist/css/bootstrap.min.css" %}'>
<!--Bootstrap-->
<link rel="stylesheet" href='{% static "/vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" %}'>
<!-- Theme style -->
<link rel="stylesheet" href='{% static "/login-assets/dist/css/AdminLTE.css" %}'>
<!-- Custom Login style -->
<link rel="stylesheet" href='{% static "/login-assets/dist/css/custom-login.css" %}'>
<!-- Font Awesome -->
<link rel="stylesheet" href='{% static "/vendors/font-awesome/css/font-awesome.min.css" %}'>
<link rel="stylesheet" href='{% static "/vendors/font-awesome/css/font-awesome-animation.css" %}'>
<link href='{% static "/vendors/sweetalert/css/sweetalert2.min.css" %}' rel="stylesheet">
<style>
body {
width: 100%;
min-height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 15px;
background-image: url("/static/images/login_background.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#particles-js{
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
position: fixed;
top: 0px;
}
.login-page{
margin-top: 10%;
width: 43%;
padding-top: 0%
}
</style>
{% endblock stylesheets %}
{% endblock head %}
</head>
<body>
{% block body %}
{% block content %}
<!-- {{ content }} -->
{% endblock content %}
{% block js %}
<!-- jQuery -->
<script src='{% static "/vendors/jquery/dist/jquery.min.js" %}'></script>
<!-- jQuery-migrate -->
<script src='{% static "/vendors/jquery/dist/jquery-migrate.min.js" %}'></script>
<!-- Bootstrap -->
<script src='{% static "/vendors/bootstrap/dist/js/bootstrap.js" %}'></script>
<script src='{% static "/vendors/bootstrap/dist/js/bootstrap.min.js" %}'></script>
<script src='{% static "/vendors/bootstrap/dist/js/bootstrap.bundle.js" %}'></script>
<script src='{% static "/vendors/bootstrap/dist/js/bootstrap.bundle.min.js" %}'></script>
<!-- Sweet Alert2 -->
<script src='{% static "/vendors/sweetalert/js/sweetalert2.min.js" %}'></script>
<script src='{% static "/src/js/ajax-core.js" %}'></script>
<!-- jQuery -->
<script src='{% static "/build/js/particles-custom.js" %}'></script>
<script src="/static/vendors/jsencrypt/jsencrypt.min.js"></script>
{% endblock js %}
{% endblock body %}
</body>
Is there any missing JavaScript library or any other issues?Can anyone suggest a solution to solve this problem?
file structure:
app/template/base.html
app/static/css/base.css
I have created the base.html to contain the header, which I am importing to the other HTML pages to keep it the same throughout the website. And I want to style this header as well, so I am trying to link a base.css to my base.html, but no luck.
Things which i have tried are : adding inline css, adding external css,adding internal css, clearing the cache, adding a block.
code in base.html:
{%load static%}<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{% static 'static/css/base.css' %}">
</head>
<body>
<nav>
<button id="myButton" >Home</button>
<button id="aboutButton" >About</button>
<button id="contactButton" >Contact</button>
</nav>
{% block content %}
{% endblock content %}
<footer>
<p>this is footer</p>
</footer>
<script type="text/javascript">
document.getElementById("myButton").onclick = function () {
location.href = "{% url 'home' %}";
};
document.getElementById("aboutButton").onclick = function () {
location.href = "{% url 'about' %}";
};
document.getElementById("contactButton").onclick = function () {
location.href = "{% url 'contact' %}";
};
</script>
</body>
</html>
that's my base.html code, which i want to link with base.css:
.header {
padding: 60px;
text-align: center;
background: #1abc9c;
color: white;
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
how i am extending the base.html to other pages is as follows,
home.html which is extending the base.html same navigation bar with other:
{% extends 'base.html' %}
{% load static %}
{% block content %}
<html>
<head>
<title>Smooth</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
<!--sample how my other html pages look like-->
I hope i have given a good idea how my file system is, how the code is in my project.
now how can i link base.css with the base.html, so that i can style the buttons in header using an external css file.
It depends on your settings, for e.g. this is how my settings for static files looks like:
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
and my base.css is located at:
/project_name/static/base.css
So you should check your setting for static files.
You can also try to change your link tag to
<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}">
because if your settings are configured to /app/static/ when u link static like
<link rel="stylesheet" type="text/css" href="{% static 'static/css/base.css' %}">
It's looking for /app/static/static/css/base.css instead /app/static/css/base.css
I want to ignore the children CSS(index.html for example) on the nevbar.html
I have a navbar in 'nevbar.html' and I am using {% extends 'nevbar.html' %} in the index.html there is also a CSS file in the index.html but it also affects the elements in nevbar.html I want so the effect will only happen in index.html and not the 'nevbar.html' .
code example:
a {
background:
linear-gradient(
to bottom, var(--mainColor) 0%,
var(--mainColor) 100%
);
background-position: 0 100%;
background-repeat: repeat-x;
background-size: 4px 4px;
color: #000;
text-decoration: none;
transition: background-size .2s;
}
this is apart of index.css nevbar.html also uses the a tag
Home
but index.css also have an effect on the nevbar.html elements. This is just an example I could create an ID for index.html so the CSS will only work on the tags in the file but I have over 5 files to put nevbar.html in it and I can't create everything an ID.
maybe I can do that if something is in a certain tag than the CSS won't work on this tag or make everything bootstrap default if he is in the nevbar.html file
Frontend framework: bootstrap
Backend framework: Flask
code sample
backend if you go to /
#app.route('/')
#login_required
def index():
return render_template('index.html', user=current_user.username, level = int(current_user.level))
index.html part
{% extends 'navbar.html' %}
{% block head%}
<title> Main Page </title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/index.css') }}"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
{% endblock %}
{% block body%}........
navbar.html
start of the code
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">..... end of the code
</nav>
</div>
{% block body%}{% endblock %}
</body>
</html>
<style>
.bs-example{
margin: 20px;
}
</style>
I am developing the website on python(Django). I am getting some difficulties to change the background color of the top menu on every page.
What I am doing is, I have an index.html page and templates which are aboutus, contactus and service. When I am on the home page then I am getting the gray background of the menu which is correct. Now I am on aboutus and I have to change the menu color from gray to black but I am getting the only gray.
So I want to know how do I change the class or override the CSS? Should I need to add the class to the body and then override the menu BG? How do I added the class to the body on each page dynamically?
index.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title%}Home{% endblock %}</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/style.css'%}" type="text/css">
</head>
<body>
<div class="Wrpper">
<header class="bg_gray"><!--top menu code--></header>
{% block content %}
<!-- template code -->
{% endblock %}
<footer><!--footer code--></footer>
</div>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
</body>
</html>
style.css
.bg_gray{background-color: #ccc;}
.bg_black{background-color: #000;}
aboutus.html (All template are same)
{% extends 'demo1/index.html' %}
{% load static %}
<title>{% block title %}About us{% endblock %}</title>
{% block content %}
<!--some code here-->
{% endblock %}
you can override the header's class using javascript
first give your header an id :
then include the javascript file:
in app.js
$(document).ready(function() {
$('#top-header').removeClass('bg_gray');
$('#top-header').addClass('bg_blak');
});
<link rel="stylesheet" href="{% static 'js/app.js' %}">
<header class="bg_gray" id="top-header"><!--top menu code--></header>
Give important to bg_black class it will override the css of bg_gray class property...
like this,
.bg_black{
background-color: #000!important;
}
html:
<header class="bg_gray bg_black"><!--top menu code--></header>
Need some help with django. Seems that somehow i can't change the css of my home page.
These are my static settings:
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.9/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
#'/var/www/static/',
]
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_cdn")
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "media_cdn")
In my index_home.html page i want to put a background image e.g. marea.jpg which is in static/img/marea.jpg.
<!--DOCTYPE html -->
<html>
<head>
{% load static %}
<title>Romanii din Italia</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel='stylesheet' href="static/css/custom.css" />
<link href="{% static 'css/custom.css' %}" rel="stylesheet">
<link rel='stylesheet' href="/static/css/custom.css" />
</head>
<body>
<div class='container'>
<ol class='breadcrumb'>
<li><a href='{% url "posts:home" %}'>Acasa</a></li>
<li><a href='{% url "posts:list" %}'>Stiri</a></li>
{% if not request.user.is_authenticated %}
<li class='pull-right'><a href='{% url "register" %}'>Register</a></li>
<li class='pull-right'><a href='{% url "login" %}'>Login</a></li>
{% else %}
<li class='pull-right'><a href='{% url "logout" %}'>Logout</a></li>
{% endif %}
</ol>
</div>
<div class="container" >
<h2>Bine ati venit pe site-ul romanilor din Italia!</h2>
<div class="row" id="primapoza" style="background-image: url('/static/img/roma.jpg');background-repeat: no-repeat;background-size: cover;height: calc(100vh - 71px);">
<div class="col-xs-12 offset-xs-0 col-sm-4 offset-sm-4 section-title" >
<br><br>
<p id="banner-text"> Romani in Italia! </p>
<!-- <p id="banner-text" style="text-align: center;font-size:40px;!important;font-color:white;!important;margin-left: 100px;"> Romani in Italia! </p> -->
</div>
</div>
</div>
</body>
</html>
And this is my custom.css which doesn't change my css code. Can someone pls advise? Thank you in advance!
h1 {
color: #777777;
}
.wmd-panel{
margin-right: 0px !important;
margin-left: 0px !important;
}
.comment-reply{
display:none;
}
#banner-text{
font-color:white;!important;
font-size:40px;
}
I can customize the CSS only with inline code e.g <p id="banner-text" style="margin-left: 400;font-color: black;font-size:30">Romani in Italia!</p
Use {% load static %} and {% load staticfiles %} under head tag in html
Based on my understand of how {% load static %} is used and what the Django documentation is saying, I don't think you're using {% load static %} correctly. I've always used it right above whatever my static link were to be.
For example, in your html doc head, it should be
{% load static %}
<link rel='stylesheet' href='{% static "css/base.css" %}'>
Otherwise, I don't think your stylesheet is linked to your html doc. Try that and also correct that mistake anywhere else you may have it, and it should be working.
You can't have {% load static %} at the top of your file and expect it to apply for the whole page. It needs to be right above whatever your static file is, as many times as you use it.