This is a weird problem. On my login page the CSS will always load correctly.
But once i sign in to my application and get redirected to the dashboard, the CSS will almost always fail to load the first time although when i press F12 to see in the network tab if the CSS files are loaded; they are.. After some inactivity when i refresh the dashboard again the CSS may fail to load although the network tab sais it did load properly..
All CSS files exists and the HTML looks like this in the view:
{{-- CSS --}}
<link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}">
<link rel="stylesheet" href="{{ asset('css/font-awesome/fontawesome.css') }}">
<link rel="stylesheet" href="{{ asset('css/font-awesome/solid.css') }}">
<link rel="stylesheet" href="{{ asset('css/font-awesome/regular.css') }}">
<link rel="stylesheet" href="{{ asset('css/choices.css') }}">
<link rel="stylesheet" href="{{ asset('css/common.css') }}">
<link rel="stylesheet" href="{{ asset('css/dashboard.css') }}">
#stack('css')
I have also tried to clean the browser cache with no luck.
Also i tried to composer dump-autoload, i don't know if that would help in any way but i tried it.. What could be causing this?
I have 2 images for reference.
The first one is when this weird error happens and the other one is how it looks just after i refresh it.
Related
I have two css files in my html project, the problem is that the two files affect each other.
this link
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}" type="text/css">
influence
<link rel="stylesheet" href="{{ asset('css/all_site_style.css') }}" type="text/css">
Occasionally I see these errors in my PHP log about favicon-96x96.png not found.
It looks like this:
No route found for "GET /assets/favicon-96x96.png" (from "https://test-project.com")
My head element has these favicons loaded:
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ asset('favicon-16x16.png') }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ asset('favicon-32x32.png') }}">
<link rel="icon" type="image/png" sizes="96x96" href="{{ asset('favicon-96x96.png') }}">
So it should be found by any browsers without a problem.
Also I can't even reproduce this error, I only see it logged a few times a day.
Any ideas what kind of requests these could be? I don't have any controller called assets or any public folder named like this. Every favicon is in public folder.
If I'm not mistaken the 96x96 favicon is used by Google TV. How could I reproduce this behaviour?
I have in my index.html, between my <head> tags the following line of code:
{% block head %}
<link type="image/x-icon" rel="shortcut icon" href='static/img/favicon.ico'/>
{% endblock %}
This is not working somehow. But if I go to: 'http://127.0.0.1:5000/static/img/favicon.ico' The favicon shows up. So this means that the favicon works, it's displayable but I can't find a way to put it next to the URL as it should be. Thanks in advance
From your code, you have given and the URL provided it looks like it is a flask app.
If it is flask you need to load the static files as follows, which will help you to load the favicon as well.
<link rel="shortcut icon"
href="{{ url_for('static', filename='img/favicon.ico') }}">
Try it like this:
<link rel="icon" href="static/img/favicon.ico">
I use Hugo to generate website. I have a syntax highlight css (e.g. tomorrow-night-blue.css) in /themes/hyde/static/css, a highlight.pack.js in /themes/hyde/js and have the following code in the header.html
<!-- CSS -->
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/print.css" media="print">
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/poole.css">
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/syntax.css">
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/hyde.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/tomorrow-night-blue.css">
<script src="{{ .Site.BaseURL }}js/highlight.pack.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
The code chuck on the rendered website only has a blue background colour but the texts are not highlighted as shown below.
I think the syntax highlight css conflicts with other css, but I don't know where the conflict is and how to resolve it.
Source files are hosted here, if that helps to debug.
Did some search. Couldn't find a solution for my particular issue, but still managed to highlight the code following this post here.
https://github.com/yihui/hugo-xmin/pull/5/files
Essentially, one needs to put something like following in the header.html
<link href="//cdn.bootcss.com/highlight.js/9.12.0/styles/github.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
<script src="//cdn.bootcss.com/highlight.js/9.12.0/languages/r.min.js"></script>
<script>
hljs.configure({languages: []});
hljs.initHighlightingOnLoad();
</script>
I've put both the link to css and script in the header.html as opposed to putting them separately in hearder.html and footer.html as shown the link. It works either way.
I'm still open to more specific solutions.
I am trying to make a simple website using Python and Flask. Right now, I have the HTML and CSS finished, but my page does not show any of the CSS. My files are in the following hierarchy:
/static
/static/css/style.css
/static/js/skel.js
/templates
/templates/index.html
I have the following code in my html file:
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/config.js"></script>
<script src="../static/js/skel.min.js"></script>
<script src="../static/js/skel-panels.min.js"></script>
<noscript>
<link rel="stylesheet" href="../static/css/skel-noscript.css" />
<link rel="stylesheet" href="../static/style.css" />
<link rel="stylesheet" href="../static/css/style-desktop.css" />
</noscript>
When I run this, the terminal displays "304" for the JS files and gets them from "/static/js/skel.js" which I think is correct, but it then displays "404" for the CSS files and gets them from "/css/style.css". I am not quite sure why this is happening - shouldn't this be retrieving files from /static/css/style.css? How can I fix it?
Thanks for the help.
Your on-disk layout is not the same thing as the routes served by your Flask site. Do not rely on the relative paths between templates and static.
Instead, have Flask calculate the routes to static files for you, using the url_for() function in your Jinja template:
<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/config.js') }}"></script>
<script src="{{ url_for('static', filename='js/skel.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/skel-panels.min.js') }}"></script>
<noscript>
<link rel="stylesheet" href="{{ url_for('static', filename='css/skel-noscript.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/style-desktop.css') }}" />
</noscript>
If the template is really what you have, and your layout is really what you list, then they don't match:
/static/css/style.css
does not match
<link rel="stylesheet" href="../static/style.css" />
Instead you should have
<link rel="stylesheet" href="../static/css/style.css" />
or move style.css up one folder. Note however that IIRC you can't have ../ in path, because static folder is supposed to be at same level as your flask app script. So you should be able to just have
<link rel="stylesheet" href="static/css/style.css" />
but as others have mentioned it is better to have flask generate the url for you via url_for (see example in step 6 of tutorial).
I had the same problem. This solved it:
open your config.js and add static/ in front of the css/... in all links like href="css/style.css" that they look like href="static/css/style.css" and it should be fine.
The question is already 5 months old but I hope I can help someone who has the same problem.