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
Related
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>
Here is my views.py file:
from django.shortcuts import render
def page(request):
css = 'temp/css.css'
return render(request, 'temp/index.html', {'css': css})
and templates/temp/index.html file:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="{% static '{{ css|safe }}' %}">
</head>
<body>
Hello Page
</body>
</html>
and static/temp/css.css file:
* {
width: 100vw;
height: 100vh;
background: red;
}
After rendering source of the page is:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/%7B%7B%20css%7Csafe%20%7D%7D">
</head>
<body>
Hello Page
</body>
</html>
but I am expecting
...
<link rel="stylesheet" type="text/css" href="/static/temp/css.css">
...
Why it is not working? Is there any way to do this? How to link a static file if the path is provided by the context in html?
Assuming 'css' is your context variable, you should be able to just do the below. Basically drop the quotes around the 'css' variable.
<link rel="stylesheet" href="{% static css %}">
You should add <link rel="stylesheet" type="text/css" href="/static/temp/css.css"> to your index.html directly. That way it will take care of itself and you don't need to pass it as the context.
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>
I am trying to get a Google font to load from css to my html template for my application. Can't get the "Upload schtuff" to assume the Bangers font. Here's the base.html:
{% load static %}
<!doctype html>
<html>
<title>{% block title %}Upload Schtuff{% endblock %}</title>
<head>
<link href="//fonts.googleapis.com/css?family=Bangers&display=swap" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body>
<div>
<h1>Upload schtuff </h1>
</div>
</body>
</html>
Here's the static/uploader/style.css:
'''
h1 a, h2 a
{
color: #714D91;
font-family: 'Bangers', cursive;
}
'''
I've also tried importing the font to the style sheet with
#import url('https://fonts.googleapis.com/css?family=Bangers&display=swap');
Also tried importing it to the .html file
<style>
#import url('https://fonts.googleapis.com/css?family=Bangers&display=swap');
</style>
It's got to be my link href lines, right?
Thanks in advance!
Ok I got it to work! This was my first time adding multiple Css files... and I was missing this in my settings.py file
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]
LOL, thanks for being a good community and standing by me while I solve my own problems!
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.