I have a django project and i have been trying to link a css file to the base.html document to begin implimenting some css to my file. I have bootstrap linked already but i want to add more customization... Here is what i have so far..
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link href="{% static 'css/blog.css' %}" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid blue5">
{% block content %}
{% endblock %}
</div>
</body>
</html>
here is the css file
.blue5 {
background-color: lightblue,
}
You can link a CSS and HTML file like this:
In your HTML code:
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link href="{% static 'css/blog.css' %}" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="pathToYourCSSfile" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid blue5">
{% block content %}
{% endblock %}
</div>
</body>
</html>
Hope this helps.
if your css file only contains these two lines it will be better to include them in the head of the document
<head>
...
<script ...>
<style>
.blue5 {
background-color: lightblue,
}
</style>
</head>
otherwise just like the others css, add a new link tag:
<link href="{% static 'path to your file.css' %}" rel="stylesheet">
Related
main.html
with {% load static %} at top and {% static 'css/main.css' %} in link css href
{% load static %}
<!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.0">
<title>CM1</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" type="test/css" href="{% static 'css/main.css' %}">
</head>
<body>
{% include "accounts/navbar.html" %}
{% block content %}
{% endblock content %}
<hr>
<h5>Our footer</h5>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
</html>
setting.py
import os
INSTALLED_APPS = [
...
'django.contrib.staticfiles', #<-- already have
...
]
STATIC_URL = 'static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static/"),
)
also STATICFILES_DIRS bracket should be () or []?
You did wrong in link tag.
change this:
<link rel="stylesheet" type="test/css" href="{% static 'css/main.css' %}"> #You did wrong in type. and according to your structure your css filename is index.css
To this:
<link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}"> #changed main.css to index.css according to your structure
Your settings must be like below.
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
Here is my HTML file:
{% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock %}</title>
<!-- Link to Bookstrap and stylesheet -->
<link rel='stylesheet' href="{% static 'css/bootstrap.min.css' %}">
<link rel='stylesheet' href="{% static 'css/style.css' %}">
<script src="{% static 'js/bootstrap.min.js' %'}"></script>
</head>
<body class="bg-blue">
<div class="container">
<div class ="row">
<div class ="col-lg-4 col-lg-offset-4">
<br/>
<br/>
<br/>
<div class="panel panel-body">
<div class="panel-body">
<h3 class="text-center text-uppercase"><b> {% block heading %}{% endblock %}</b></h3>
<br/>
{% block content %}{% endblock %}
</div>
</div>
</div>
</body>
</html>
I want to use the "bg-blue" class defined in my style.css.
.bg-blue{
background-color: #3F3F63;
}
However it doesn't work. My boostrap and style.css are in the same folder. The Bootstrap loads, for example my text in centered and uppercase and the font is different.
I've also tried putting the class directly in the html file, and that works, but I want to be able to use style.css.
Edit: it works in Firefox but not Chrome, so it's not the code, any explain to this?
that is because you forgot to clear cache in chrome.press control + F5 to clear cache and load again.
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'm having trouble trying to get Flask (along with Flask-Bootstrap) to only produce one head element to my HTML document. The problem I'm having right now is that the head element is correct, but Flask is dropping it into the beginning of the body as well.
/personal_website/app/templates/index.html:
{% extends "bootstrap/base.html" %}
#! I have not changed bootstrap/base.html
{% block head %}
{{super()}}
{% block title %}My_Name | Home{% endblock title %}
{% block styles %}
{{super()}}
<link href="{{url_for('static',filename='stylesheets/style.css')}}"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto"
rel="stylesheet">
{% endblock styles %}
{% endblock head %}
Console output:
<head>
<title>My_Name | Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/stylesheets/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
My_Name | Home
<!-- Bootstrap -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/stylesheets/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
I actually was able to correct this by taking the contents of what was in the header (ex: Title and Styles) out of the block head.
/personal_website/app/templates/index.html:
{% extends "bootstrap/base.html" %}
{% block title %}My_Name | Home{% endblock %}
{% block styles %}
{{super()}}
<link href="{{url_for('static',filename='stylesheets/style.css')}}"
rel="stylesheet">
{% endblock styles %}
{% block head %}
{{ super() }}
{% endblock %}
This still alowed me to inherit the contents of the head from bootstrap/base.html
I think you just need to remove this line (probably both times):
{{super()}}
I'm quite the newbie at this, but I'm trying to get the bootstrap datepicker inline mode, but my divs are not showing anything once rendered. perhaps you might know what is wrong with my code?
<html>
<head>
<title>bootstrap datepicker examples</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href={%static "bootstrap-3.3.2-dist/css/bootstrap.min.css" %}>
<link rel="stylesheet" type="text/css" href="{%static 'css/datepicker.css' %}"/>
<link rel="stylesheet" type="text/css" href={%static "css/main.css"%}>
</head>
<body>
<div id="main">
<div class="datepicker"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> {# jQuery #}
<script src="{% static 'bootstrap-3.3.2-dist/js/bootstrap.min.js' %}"></script> {# Bootstrap #}
<script type="text/javascript" src="{% static 'js/bootstrap-datepicker.js' %}"></script>
<script>
$(document).ready(function() {
$(".datepicker").datepicker();
});
</script>
</body>
</html>
It works if i use an tag but then it is not in the inline mode.
put the following code to the first line of your template file.
{% load staticfiles %}
and change
<div class="datepicker"></div>
to
<input class="datepicker" />