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>
Related
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
Hii I'm kind of new so I might be making a rookie mistake but I have this HTML :
{% extends 'base.html' %}
{% load static %}
{% block meta %}
<title>HOME</title>
{% endblock meta %}
{% block style %}
<link rel="stylesheet" href="{% static 'style.css' %}">
{% endblock %}
{% block content %}
<div class="content">
<h1>Test</h1>
</div>
{% endblock content %}
and this CSS
div.content {
background-color: #DFBEBE;
text-align: center;
padding: 10px;
height: 100%;
}
But it's not working... I tried with .content before but it also won't apply to my HTML. I applied a h1 css (with font) and it works just fine. It also works just fine with my previous projects(?) What did I do?
I am not sure what your file structure is, but try something like this to link your stylesheet:
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
url_for() is what I have always used for my django projects, and it has worked every time. Note: you will need to have the stylesheet placed in the 'static' folder (unless you change 'static' in the function to something else).
<link rel="stylesheet" type="text/css" href="index.css">
This is the easiest way to link them. Also check if the CSS and HTML are in the same folder
You're probably not linking it correctly to the CSS in the HTML. Make sure your path is correct. If it is, .content should work fine.
Here is the working JSFiddle with your code.
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've just added some CSS the my django project in a static folder and it only works on some elements. The file is loaded on the site but when I try to make changes to the paragraph element nothing happens. When I edit the body element in the external style sheet it does have an effect on the style. Here is my css and HTML:
HTML
<!DOCTYPE html>
<html>
{% load staticfiles %}
<head>
<title>Would-be Username</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/test.css'%}">
</head>
<body>
<img src="{{ current_user.userprofile.profile_picture.url }}">
<p>Username: Would-be Username</p>
<p>Name: {{ current_user.userprofile.first_name }} {{ current_user.userprofile.last_name }}</p>
<p>Email: {{ current_user.username }}</p>
Edit
Forgot your password?
</body>
</html>
CSS
#charset "UTF-8"
p {
color: red;
}
body {
margin: 0;
}
The body margin changes, and I can change the color of the text when I add
color: red;
to the body. However, no matter what I do to 'p', nothing happens.
What am I doing wrong that won't let me edit the 'p' tags?
It is a very trivial mistake - You need a ; after the first line:
#charset "UTF-8"
should be
#charset "UTF-8";
Here is the fiddle
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.