I just want my CSS to apply, not sure where I'm messing up...
Alright so in my base.html.twig I have defined this
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('web/css/main.css') }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
{% endblock %}
The whole path to the main CSS file.
K:\phpstormproject\symfony\my-project\web\css\main.css
In the CSS file, the class is found when starting to type but the change is not being applied.
Here is a simple change
.font-weight-light {
font-size: 20px;
}
I tried deleting the cache but that doesn't really do the job, does it have anything to do that it's a bootstrap class?
Related
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 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>
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 used to see the changes I was making yesterday. And now I change the simply the color and the other things no change. This is really annoying and happened to me multiple times. I don't see any overriding file either. I checked the other similar problems and questions but couldn't solve it. So, if you can give me the logic behind the problem and the solution so that I don't encounter it again that would be very kind.
Here's the shortened CSS code:
.page-header {
background-color: #421557;
margin-top: 0;
padding: 20px 20px 20px 40px;
}
And here's the HTML code:
{% load staticfiles %}
<html>
<head>
<title>Blog</title>
<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">
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
</head>
<body>
<div class="page-header">
<h1>Blog</h1>
</div>
{% for post in posts %}
<div class="post">
<p>published: {{ post.published_date }}</p>
<h1>{{ post.title }}</h1>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
</body>
</html>
Whenever I mess up with Bootstrap, I get angry. I think I still didn't get the idea.