I am working on a web application using Flask and Tailwind CSS and can’t import custom fonts. I can build the CSS file but the HTML template isn’t showing the font. How do I get my custom font to import?
I have this in my CSS build file:
#tailwind base;
#tailwind components;
#tailwind utilities;
#font-face {
font-family: 'Grifter';
src: url(../../static/Skyer-Regular.otf);
}
Here is a sample of when I try to use my imported font:
<head>
<link rel="stylesheet" href="{{ url_for('static', filename=’mainStyles.css') }}"/>
</head>
<body class = 'bg-black'>
<div class = "font-pri text-3xl text-center text-white">
Sample Text
</div>
</body>
I had this exact problem a while ago and have a solution that works. I ended up having to link a separate CSS file to each HTML template. Here is an example of what I did. I have my custom font and CSS file in my static folder. gameStyles.css is my Tailwind CSS file.
<link rel="stylesheet" href="{{ url_for('static', filename='gameStyles.css') }}"/>
<link rel="stylesheet" href="{{ url_for('static', filename='styles2.css') }}"/>
Here is an example of what I would put in styles2.css:
#font-face {
font-family: 'reg';
src: url(../static/ObjectSans-Regular.otf);
}
body {
font-family: 'reg';
}
I tried everything and this was the only thing that worked for me. Hopefully this helps!
Related
Inside the project folder, I have created both the html and CSS file under 'venv' library root folder.
html file name - index.html
CSS file name - styles.css
code that I used to link CSS:
<link rel="stylesheet" href="styles.css" type="text/css">
This does not seem to work. Need help.
CSS is not available in PyCharm Community but it will work perfectly in the Professional edition. Also, if you face a problem with the static file use href="{% static "static/d.css"%}" and change the setting.py
You can see how to add it. I run the code below in PyCharm 2021.3.1 (Professional edition).
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="d.css" type="text/css" />
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
I am not sure but check it.
you can add the folder what the css file is found.
like this: <link rel="stylesheet" href="../root/styles.css" type="text/css">
I'm using an open source for using Google Map API, but I don't know how to resize the map. Here's my code. Please help me.
index.html
<body><div>{{sndmap.html}}</div></body>
main.py
#app.route('/')
def index():
sndmap = Map(
identifier="sndmap",
varname="sndmap",
lat=37.4419,
lng=-122.1419,
markers=[(37.4419, -122.1419), (37.4500, -122.1350), (37.4300, -122.1400, "Hello World")]
)
return render_template('index.html', sndmap=sndmap, GOOGLEMAPS_KEY=request.args.get('apikey'))
You can easily include inline styling, but adding a stylesheet is largely considered the most maintainable method.
This is done by giving your desired tag a class. Then linking a css stylesheet to your html and updating the css as needed.
I've included an example.
projectroot/index.html
<html lang="en">
<head>
<link rel="stylesheet" type="text/css"
href="{{ url_for('static', filename='style/style.css') }}">
</head>
<!-- Other html -->
<body>
<div class="google-map">
{{ sndmap.html }}
</div>
</body>
<!-- Other html -->
</html>
projectroot/static/styles/style.css
/* More css */
.google-map {
max-width: 500px;
max-height: 200px;
}
/* More css */
This shouldn't be copied verbatim as you'll need to play around with the exact styling to achieve the look you want. The number of customization options through standard css are endless. I'd recommend looking up common patterns and coping what you like.
Everything was working fine before Python Flask. Now I tried to connect my HTML page with Python Flask. CSS is working fine but when I define images inside the CSS file the image is no longer loaded into the web site. Instead it is showing error 404.
python app.py code
from flask import Flask, render_template, url_for
app = Flask(__name__ , static_url_path='/static')
#app.route('/')
def index():
return render_template('/intro.html')
if __name__ == '__main__':
app.run(debug=True)
HTML code :-
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>NewliFit</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
<link rel="stylesheet" href="{{ url_for('static',filename='css/owl.carousel.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='css/owl.carousel.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename = 'css/owl.theme.default.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='css/firstone.css') }}">
</head>
<body>
<div class="main">
<div class="cover-image">
<div class="menu">
<div class="leftmenu">
CSS file
#charset "utf-8";
/* CSS Document */
*{
margin: 0px ;
padding: 0px ;
}
/* ------------cover image -------------*/
.cover-image {
background-image: url({{ url_for('static',filename = '/images/cover4.jpg')}});
background-size: 100% 100%;
width: 100%;
height: 110vh;
}
Please help.
You are using url_for in a CSS file, which does not work. You need to specify the url of the background image either in the HTML file, or specify a proper URL in your CSS.
So either add this to your CSS:
background-image: url('/static/images/cover4.jpg')}});
Or change your cover-image div in your HTML file to this:
<div class="cover-image" style="background-image: url({{ url_for('static',filename = '/images/cover4.jpg')}});">
Unless you plan on changing your static folder (or your cover image) regularly, I would advise going the first route, to make sure you separate style and semantics.
The solution of my problem is probably very simple but yet out of my understanding. I am trying to load an HTML file into a QWebEngineView with PyQt5. The way I am doing it is:
self.webView = QtWebEngineWidgets.QWebEngineView(self.splitter)
html = r"C:\DATI\git\webgis\map.html"
self.webView.setHtml(html)
The only thing I get is a string representing the path and name of my HTML file:
C:\DATI\git\webgis\map.html
My map.html looks like this:
<html>
<head>
<title>Simple Map</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.5.0/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.5.0/build/ol.js"></script>
<script src=".js/qwebchannel.js"></script>
<style>
body { padding: 0; margin: 0; }
html, body, #map { height: 100%; }
</style>
</head>
<body>
<div id="map" class="map"></div>
<script src="./js/map.js"></script>
</body>
</html>
Strangely (to me at least), if I do self.webView.setHtml("<html><head></head><body><h1>ciao</h1></body></html>"), this will render the HTML properly.
What am I missing?
The setHtml method does exactly what its name suggests: it loads html content from a string. What you are trying to do is load a url, so for that, you need to use the load method:
url = QtCore.QUrl.fromLocalFile(r"C:\DATI\git\webgis\map.html")
self.webView.load(url)
I'm using one of the Bootstrap examples (the Dashboard). I'm deploying the site using Python Flask.
The style.css file is being called successfully using Flask.
<!-- Bootstrap core CSS -->
<link href="{{ url_for('static', filename ='bootstrap.min.css') }}" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="{{ url_for('static', filename ='ie10-viewport-bug-workaround.css') }}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{{ url_for('static', filename ='style.css') }}" rel="stylesheet">
Everything works except when I add my own CSS selectors to the file and try to call them in HTML.
For example, I've added
#profile_picture {
width: 300px;
height: 300px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}
.flash_msg {
background: #93ff9e;
font-size: large;
font-weight: bold;
}
to the style.css file, and
<img id="profile_picture" src="{{user[1]}}">
<li class="flask_msg">{{ message }}</li>
to the html, yet nothing happens.
Here is the link to the full style.css file.
Here is one of the HTML templates.
Here is the rest of the repo.
Your CSS is looking for an img child of #profile_picture on your github.
This was a caching issues. Clearing the browser cache allowed it to work. However, I believe this post may provide a better solution: Flask css not updating