I made a website and got to the point where you need to connect styles.css, but after all the manipulations, my site has not changed and no design has been connected. I tried to rewrite css and html, tried different tips, but nothing helped me. any ideas?
I would be grateful for any advice!
1part base.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{title}}</title>
<link type="text/css" href="{% static 'women/css/styles.css' %}" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="{% static 'women/images/main.ico' %}" type="image/x-icon"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<table class="table-page" border=0 cellpadding="0" cellspacing="0">
<tr><td valign=top>
{% block mainmenu %}
<div class="header">
<ul id="mainmenu" class="mainmenu">
<li class="logo"><div class="logo"></div></li>
{% for m in menu %}
{% if not forloop.last %}
<li>{{m.title}}</li>
{% else %}
<li class="last">{{m.title}}</li>
{% endif %}
{% endfor %}
</ul>
<div class="clear"></div>
</div>
{% endblock mainmenu %}```
I've added screenshots below if anyone needs them.
[1][1]
[2][2]
[3][3]
[4][4]
- PS I have already tried these options, gives an error
```<link type="text/css" href="{% static 'women/css/styles.css' %}" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="{% static 'women/images/main.ico' %}" type="image/x-icon"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">```
[1]: https://i.stack.imgur.com/3exw2.png
[2]: https://i.stack.imgur.com/ye5k7.png
[3]: https://i.stack.imgur.com/ZKSs6.png
[4]: https://i.stack.imgur.com/eQRvd.png
Don't know if its the same issue but I find clearing the cache can fix styling issues (ctrl+f5)
Check static dirs in settings.py and correct static dirs, because it may cause issues in connecting with dirs.
[for reference I am giving you settings of static dirs below]
settings.py
STATIC_URL = "/static/"
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "media")
If the settings are okay then remember whenever you change something in CSS browser doesn't Change CSS directly you need to make a hard reset your browser's tab by pressing
Ctrl + shift + R
If it's on server, make sure to collectstatic after you make changes in files of your static folder. To make your static folder updated.
python manage.py collectstatic
Then restart gunicorn and nginx
sudo systemctl daemon-reload
sudo systemctl restart gunicorn
sudo systemctl restart nginx
However if it's in your local computer, you might just need to hard-reload your browser (ctrl+shift+R).
If it still doesn't work, make sure the path of your css file is correct.
Related
I have been trying to get an embedded Power BI report hosted on a flask page. When the page attempts to load, the console throws CORS errors left and right1 and it seems as though the packets carrying the data are getting blocked.2 I have tried setting 'Access-Control-Allow-Origin' to
a wildcard in our response header, but it doesn't seem to solve the issue. However we believe it is at least related to headers because when we try to run it on a version of chrome with security disabled, the report will load as it should. Another unit that works parallel to me has been able to get the same(ish) code working on a C# hosted site and they didn't need to add any origin headers or anything so I'm fairly certain this is an issue specific to flask/power bi. Here is the relevant code from our route serving file:
#app.route('/pm/getembedinfo', methods=['GET'])
def get_embed_info():
'''Returns report embed configuration'''
config_result = utils.Utils.check_config(app)
if config_result is not None:
return json.dumps({'errorMsg': config_result}), 500
try:
embed_info = pbiembedservice.PbiEmbedService().get_embed_params_for_single_report(app.config['WORKSPACE_ID'], app.config['REPORT_ID'])
# embed_info.headers.add('Access-Control-Allow-Origin', '*')
response = make_response(embed_info)
response.headers['Access-Control-Allow-Origin'] = '*'
return response
except Exception as ex:
return json.dumps({'errorMsg': str(ex)}), 500
#app.route('/pm/favicon.ico', methods=['GET'])
def getfavicon():
'''Returns path of the favicon to be rendered'''
return send_from_directory(os.path.join(app.root_path, 'static'), 'img/favicon.ico', mimetype='image/vnd.microsoft.icon')
#app.route('/pm/power_bi_dashboard', methods=["GET"])
def power_bi_dashboard():
response = make_response(render_template('power_bi_dashboard.html'))
response.headers.add('Access-Control-Allow-Origin', '*')
return response
And here is the relevant part of the html template:
<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" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/global.css') }}">
<title>Traffic Monitoring Dashboard</title>
</head>
<body>
<header class="embed-container col-lg-12 col-md-12 col-sm-12 shadow">
<p>
Traffic Monitoring Dashboard
</p>
</header>
<main class="row">
<section id="report-container" class="embed-container col-lg-offset-4 col-lg-7 col-md-offset-5 col-md-7 col-sm-offset-5 col-sm-7 mt-5">
</section>
<!-- Used to display report embed error messages -->
<section class="error-container m-5">
</section>
</main>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/powerbi-client/2.15.1/powerbi.min.js" integrity="sha512-OWIl8Xrlo8yQjWN5LcMz5SIgNnzcJqeelChqPMIeQGnEFJ4m1fWWn668AEXBrKlsuVbvDebTUJGLRCtRCCiFkg==" crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
</body>
This question already has answers here:
Link to Flask static files with url_for
(2 answers)
Closed 1 year ago.
I am new to web development,and I was building my first website with Flask.When I first runned the website,Bootstrap was not working,after that I went in inspect mode and it gave me some errors.
I tried emptying the cache,but it did not change anything.
The projects folders are arranged like this:
This is the HTML code:
<!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">
<link rel="stylesheet" href="css/bootstrap.css">
{% if title %}
<title> Project--{{Title}} </title>
{% else %}
<title> Project </title>
{%endif%}
</head>
<body>
<div class="alert alert-primary" role="alert">
Hello
</div>
<script src="js/bootstrap.js"></script>
</body>
</html>
The python code:
from flask import Flask,render_template,url_for
app=Flask(__name__,template_folder='Template')
#app.route("/")
def home():
return render_template('Home.html',title='Home')
if __name__=='__main__':
app.run(debug=True)
How can I fix this issue?
Thanks in advance!
You have to keep js and css folder in a folder named static at same level that of templates folder where you will keep only html files.
You can use href="{{ url_for('static', filename='css/bootstrap.css') }}" for a css file named bootstrap.css which is in css folder in static folder. Same you have to do with us files , src="{{ url_for('static', filename='js/bootstrap.js') }}"
I'm trying to add a maintenance page to my Flask site. I have created a route called /maintenance that renders my maintenance.html template. I then added an #app.before_request to check whether the site is in maintenance mode (a Boolean value).
When I request the /maintenance route directly from the browser, the page displays fine:
However, when the route is called from the #app.before_request, it displays like this:
As can be seen from the console window, I'm getting the following message:
'Resource interpreted as Stylesheet but transferred with MIME type text/html'
Here is the code for the /maintenance route and #app.before_request:
#app.before_request
def check_for_maintenance():
if maintenance == True and request.path != url_for('maintenance'):
return redirect(url_for('maintenance'))
#app.route('/maintenance')
def maintenance():
if request.method =='GET':
return render_template('maintenance.html')
Here's the code for the maintenance page (ish, it inherits lots of parent Jinja templates but the important stuff is here):
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/static/css/theme.css">
<link href="{{ url_for('static', filename='fonts/peenu/stylesheet.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='favicon.ico') }}" rel="icon">
</head>
<body>
<div id="maintenanceBackground">
<div id="maintenanceTextParent">
<img id="spannerIcon" src="/static/media/graphics/spanner.png" alt="Spanner icon">
<h1 id="maintenanceText1">We're doing some work at the moment</h1>
<h2 id="maintenanceText2">We hope to be running again soon. Please try again later.</h2>
<img id="whiteLogo" src="/static/media/graphics/logoWhite.png" alt="Custom Crochet logo">
</div>
</div>
</body>
</html>
This is somewhat related to flask. If you try to access the html directly without flask's webserver, the html page loads with applied css, as expected.
To be more specific, actual solution is
to create a "css" folder in "static" folder.
add css in path of ".css" file (update all occurrence for any .css file with expected relative path)
eg.
change => href="{{ url_for('static', filename='stylesheet.css') }}" to href="{{ url_for('static', filename='css/stylesheet.css') }}" OR
change => href="../static/main.css" to href="../static/css/main.css"
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
In your case
try moving stylesheet.css from "fonts/peenu/stylesheet.css" to "static/css" folder.
change => href="{{ url_for('static', filename='fonts/peenu/stylesheet.css') }}"
to
href="{{ url_for('static', filename='css/stylesheet.css') }}"
I had spent some time on this issue and was able to resolve it with above mentioned solution.
This question already has answers here:
How to add a browser tab icon (favicon) for a website?
(13 answers)
Closed 5 years ago.
I try to learn flask. My test is mainly based on this blog.
I would like to change the icon right next the title.
Here is my base.html :
<html>
<head>
<link rel="flask" href="../static/flask.ico" type="image/x-icon">
{% if title %}
<title>{{ title }} - microblog</title>
{% else %}
<title>Weclome to microblog</title>
{% endif %}
</head>
<body>
<div>Microblog: Home</div>
<div>Ajout: Add</div>
<div>Clean: Clean</div>
<hr>
{% block content %}{% endblock %}
</body>
</html>
The base.html is in the template/ folder and the flask.ico is in static/. So all the html pages that inherite from it, should have the new icon. But it doesn't work.
I have already tried:
<link rel="flask" href="static/flask.ico" type="image/x-icon">
<link rel="flask" href="static/flask.png" type="image/png">
<link rel="flask" href="{{ url_for('static', filename='flask.ico') }}" type="image/x-icon">
<link rel="flask" href="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/flask-icon.png" type="image/png">
And none of this has worked.
Thanks for your replay.
edit:
the solution was to change rel="flask" for rel="icon".
Thanks
As per W3C ruling, the preferred method to add a favicon to a page is to use rel="icon".
Example:
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
As the title says, only the first static file in a Django template is loaded.
Here is the offending code:
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock title %}</title>
<link rel="stylesheet" href="{% static 'global/css/grid.css' %}" media="screen" title="grid" charset="utf-8">
<link rel="stylesheet" href="{% static 'global/css/style.css' %}" media="screen" title="main" charset="utf-8">
</head>
I have 'global' set up correctly in my STATICFILES_DIRS, both 'grid.css' and 'style.css' exist in that directory, and both styles do not conflict.
But only 'grid.css' loads when I render a page with the above code in it.
When I check inspect element in chrome, both links are displayed/rendered correctly:
<link rel="stylesheet" href="global/css/grid.css" media="screen" title="grid" charset="utf-8">
<link rel="stylesheet" href="global/css/style.css" media="screen" title="main" charset="utf-8">
But when I check the 'Sources' of chromes dev tools it shows the folder 'static/global/css', and within it only grid.css is displayed. So Django is not delivering style.css in the response.
I know that style.css works, when I comment out the line that loads grid.css, style.css does load.
So again, it seems that only the first static file that is requested in a template is delivered in the response.
It's the HTML attribute 'title'. When that is set on a stylesheet link, then that stylesheet will become the 'prefered' stylesheet, and all others will be ignored. I got rid of the title attributes and it worked.
I dont think this is from Django, as far as my knowledge django does not do that.
Clear your cache and try again. Maybe your first CSS file might have been loaded from cache and second file might not be cached earlier.
If both files are not loaded after clearing cache, then there is a mistake in your static file configuration.
If the first CSS comes even after clearing the cache, check the Network Tab in Google Chrome. See where the request goes, and see the response received. Check whether the response comes as the file or 404 or 503 and debug accordingly.