I'm having some problem with my multiples stylesheet references. Basically the classes defined on style.css are not acting on my index.html. Might be that as there are multiple stylesheet someone of these are overwriting the file style.css?
Last time I was having a similar problem and I asked a question here but after a couple of hours the file was working fine... Now I have restarted and all but still style.css still do nothing...
myapp/static/style.css
h1 {
color: blue;
text-align: center;
}
.box {
width:30%;
height:30%;
background-color: blue;
}
On my layout.html have been defined multiples stylesheet references on the following way
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-
scalable=no">
<!-- Estilos de la master -->
<link rel="stylesheet" href="{% static 'myapp/style.css' %}" type="text/css" >
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}"
type="text/css">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'js/sss/sss.css' %}" type="text/css" media="all">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!-- Estilos de los recursos adicionales -->
<link rel="stylesheet" href="{% static 'fontawesome/web-fonts-with-css/css/fontawesome-
all.min.css' %}">
<!-- LibrerÃas adicionales -->
<script src="{% static 'js/jquery.min.js'%}"></script>
<script src="{% static 'js/sss/sss.min.js' %}"></script>
<!-- LibrerÃas de plugins -->
<!-- Archivo personalizado de Javascript -->
<script src=" {% static 'js/codejs.js' %}"></script>
<title>{% block title %}{% endblock %}</title>
</head>
and finally my index.html:
{% extends "myapp/layout.html" %}
{% load static %}
{% block body %}
<h1> Hola Mundo</h1>
<div class="box">Hello world1</div>
<div style="width:30%; height:30%; background-color: red;">Hello world2</div>
{% endblock %}
Related
I am wanting to take a dataframe and put it to a bootstrap table that is searchable. Right now I have this:
tester.html
<!DOCTYPE html>
<html lang="en">
<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>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<head>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/df_style.css') }}">
<style>
body {font-family: "Lato", sans-serif}
.mySlides {display: none}
</style>
</head>
<div align="center">
<br>
<br>
<br>
<br>
<br>
<br>
<table id="myTable">
<h1>
<!--Displaying the converted table-->
{% for table in tables %}
<h2>{{titles[loop.index]}}</h2>
{{ table|safe }}
{% endfor %}
</h1>
</table>
</div>
</body>
app.py
from app import app
from flask import Flask, render_template
#app.route("/")
def eod_coin():
return render_template('tester.html', tables=[eod.to_html()], titles=[''])
I have looked at the following How to make bootstrap-table-filter-control work with Flask, Jinja and Dataframe but can't seem to get the search function to work when I want to pass in a df and not building the data in my app.py
example of issue: https://imgur.com/a/dtZsdjr
Code
views.py
def home_view(request, *args, **kwargs):
context = {
"title" : "PortfolioLog - Home",
}
return render(request, "base.html", context)
base.html
<html lang = "en">
<head>
<meta charset="utf-8">
<title>{{title}}</title>
<meta name="description" content="Home page">
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
<script type="text/javascript" src="{% static 'scripts.js' %}"></script>
</head>
</html>
I figured it out.
My styles.css was displaying all elements, therefore the title element, as
display: block;
Fixed it by changing it to title {display: none;}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="{{ static 'images/logo.png' }}" alt="Company Logo">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script>
-->
</body>
</html>
when including the static files in the Django-jinja template it shows an error. If I removed that line It worked. But I want to load my static files in jinja template.
First you have to load static at top of your html page
{% load static %}
Then you have to use {% %} instead of {{ }}
<link rel="icon" href="{% static 'images/logo.png' %}" alt="Company Logo">
you need to add {% load static %} first
I am following a youtube tutorial but my CSS won't load.
I've tried changing the path and resetting the cache in chrome.
I'm at a loss as to what I can change to get it to work. Everything else is working
I've seen some other posts like this but I couldn't find an answer at any of those that worked for me.
Using VS 2019, Python 3.8
app.py
from flask import Flask, render_template, url_for
app= Flask(__name__)
#app.route('/')
def index():
return render_template('index.html')
if __name__ == "__main__":
app.run(debug=True)
index.html
{% extends 'base.html' %}
{% block head %}
<h1>Templated</h1>
{% endblock %}
{% block body %}
<body>Templates</body>
{% endblock %}
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" type="text/css" herf="{{ url_for('static', filename='/css/main.css') }}" >
{% block head %}{% endblock %}
</head>
<body>
{% block body %}
<link rel="stylesheet" type="text/css" herf="{{ url_for('static', filename='/css/main.css') }}">
{% endblock %}
</body>
</html
main.css
body {
color: blue;
margin: 0;
font-family: sans-serif;
}
h1 {
color: red;
margin: 0;
font-family: sans-serif;
}
path: C:\Users\username\OneDrive\Programming\Visual Studio 2019\Flask Introduction\static\css\main.css
In your base.html and in the link tag remove the first / in path /css/main.css ( => css/main.css ) and change to this and check if it works:
<link rel="stylesheet" type="text/css" herf="{{ url_for('static', filename='css/main.css') }}">
You should use relative path not the absolute one.
Hello i can't resolve static file (vendor,bootstrap,css,js) i can t see the picture with color just baisc formular need help to resolve this i followed the documentation step by step but this step didnt work
this is my code html :
<!DOCTYPE html>
<html lang="en">
<head>
{% load static %}
<title>Login V9</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<link rel="icon" type="image/png" href="{{ static
'AppStage/images/icons/favicon.ico' }}"/>
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{% static
'AppStage/vendor/bootstrap/css/bootstrap.min.css' %}">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{% static
'AppStage/fonts/font-awesome-4.7.0/css/font-awesome.min.css' %}">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{% static
'AppStage/fonts/iconic/css/material-design-iconic-font.min.css' %}">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{% static
'AppStage/vendor/animate/animate.css' %}">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{% static
'AppStage/vendor/css-hamburgers/hamburgers.min.css' %}">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{% static
'AppStage/vendor/animsition/css/animsition.min.css' %}">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{% static
'AppStage/vendor/select2/select2.min.css' %}">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{% static
'AppStage/vendor/daterangepicker/daterangepicker.css' %} ">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{% static
'AppStage/css/util.css' %} ">
<link rel="stylesheet" type="text/css" href="{% static
'AppStage/css/main.css' %} ">
<!--===============================================================================================-->
</head>
<body>
<div class="container-login100" style="background-image: url('images/paul.jpg');">
<div class="wrap-login100 p-l-55 p-r-55 p-t-80 p-b-30">
<form class="login100-form validate-form">
<span class="login100-form-title p-b-37">
Sign In
</span>
<div class="wrap-input100 validate-input m-b-20" data-validate="Enter username or email">
<input class="input100" type="text" name="username" placeholder="matricule">
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input m-b-25" data-validate = "Enter password">
<input class="input100" type="password" name="pass" placeholder="password">
<span class="focus-input100"></span>
</div>
<div class="container-login100-form-btn">
<button class="login100-form-btn">
Sign In
</button>
</div>
</form>
</div>
</div>
<div id="dropDownSelect1"></div>
<!--===============================================================================================-->
<script src="{% static
'AppStage/vendor/jquery/jquery-3.2.1.min.js' %}"></script>
<script src="{% static
'AppStage/vendor/animsition/js/animsition.min.js' %}"></script>
<script src="{% static
'AppStage/vendor/bootstrap/js/popper.js' %}"></script>
<script src="{% static
'AppStage/vendor/bootstrap/js/bootstrap.min.js' %}"></script>
<!--===============================================================================================-->
<script src="{% static
'AppStage/vendor/select2/select2.min.js' %}"></script>
<!--===============================================================================================-->
<script src="{% static
'AppStage/vendor/daterangepicker/moment.min.js' %}"></script>
<script src="{% static
'AppStage/vendor/daterangepicker/daterangepicker.js' %}"></script>
<!--===============================================================================================-->
<script src="{% static
'AppStage/vendor/countdowntime/countdowntime.js' %}"></script>
</body>
</html>
this is the file views.py
from django.shortcuts import render
from django.http import HttpResponse
from django.template import loader
# Create your views here.
def Authenti(request):
template = loader.get_template('authentification/index.html')
return HttpResponse(template.render(request=request))
the picture of hearchi of my project
[1]: https://zupimages.net/up/19/29/dkik.png"tooltip"
first link is wrong
<link rel="icon" type="image/png" href="{% static 'AppStage/images/icons/favicon.ico' %}"/>
use path for image,
.container-login100 {
background: url("/AppStage/images/paul.jpg")
}