Its weird but I removed everything in the css file, the website still shows all the colours and stuff. I dont know what happened so I need t ask for help.
here is the main html:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/bootstrap-dropdownhover.min.css" rel="stylesheet">
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='style.css') }}">
</head>
the style sheet:
(yes its literally nothing)
I'm running flask and I dont know whats happening so..
also the screenshot for the webiste when I put all the styles in:
would be happy if anyone can help me get past this part
Likely, your browser is caching the CSS. If you are in Google Chrome, a longer-term solution while developing is to open the DevTools (Ctrl+Shft+I), go to Network/Disable Cache and then hit the "open to new window" button so you can minimise it.
Related
I am trying to add an image in a title bar and after searching online I didn't got any answer that can satisfy the problem
<link rel="icon" type="img/png" href="~random image link~" >
Put the icon in your static directory as favicon.ico good size for it is 16 x 16, and now simple use url_for function to get that icon, from docs
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
I have been trying to style bokeh widgets with a css file in flask that I modified from the gapminder demo. In particular, I am currently trying to style the dropdown, tab and slider widgets without much progress. I was able to style the tooltips using the gapminder css example, but would ultimately like to know if there are other examples or, even better, a listing of all of the bokeh style options (i.e. .bk-... styles). I'm not sure if this should work properly, as I'm still learning web dev, by my current index.html file in flask looks like:
<html>
<head>
<link
href="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.1.min.css"
rel="stylesheet" type="text/css">
<link
href="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.1.min.css"
rel="stylesheet" type="text/css">
<link
rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/gapminder.css') }}">
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.1.min.js"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.1.min.js"></script>
{{ script | safe }}
</head>
<body>
<div class=page>
{{ div | safe }}
</div>
</body>
</html>
Thanks in advance for the help.
Not sure if you are still searching for a response, but here is what I have done to adress this issue.
<style>
{% include 'styles.css' %}
.bk-root .bk-toolbar-right .bk-button-bar-list .bk-toolbar-button:hover .bk-tip {
color: #5DADE2;
}
.bk-root .bk-slider-parent input[type="text"]{
color: #FDFEFE;
}
</style>
It is quite manual, in that I first generated the bokeh plots, inspected the widget elements i wanted to change then simply added this into the index.html file. If you want to see which attributes you can edit, just inspect them and you will see them there.
For this example i changed the color of the tool names when you hover on them and also the slider value color.
I also had a seperate .css file which i included, so you could move it all in there.
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.
I am trying to create a dynamic page that has to do some work behind the scene/server side and also show a web page where the person can retrieve what we have processed server side. So just as a base template for a page I have this:
#!/usr/bin/python
import cgi, os, sys, commands
print "Content-type: text/html\n";
print "<html>\n"
print "<head>\n"
print "<title>My Title Here</title>\n"
#Need to find out how to get python to get css code done.
print "<![if !IE]> <link href="../styles/screen.css" rel="stylesheet" type="text/css" media="screen" /> <![endif]>\n"
print "</head>\n"
print "<body>\n"
print "<body>\n"
print "</html>\n"
This line print "<![if !IE]> <link href="../styles/screen.css" rel="stylesheet" type="text/css" media="screen" /> <![endif]>\n" Is the one causing problems. How does one use this logical way of finding out and using the css when the page is built in python then served to the user? How do I incorporate css in my pages when done through python?
You can try this:
print '<![if !IE]> <link href="../styles/screen.css" rel="stylesheet" type="text/css" media="screen" /> <![endif]>\n'
I changed the title in html and added a favicon, and those changes are only showing up locally. This is happening even when I have updated some text ("Testing 1 2 3" as shown):
However, when I update to github and push to heroku, I the text changes happen ("Testing 1 2 3") but the title and favicon don't show up:
I am also using incognito, so it can't be a problem with the cache, and I have the same problem on Firefox so it can't be the browser. What could the problem be?
Here is part of my html code:
<html>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<head>
<title>
Opal Kale
</title>
<meta name="description" content="Senior at Cal studying CS. Welcome to my personal homepage.">
<meta name="keywords" content="Opal Kale">
<link href='{{url_for('static', filename='style.css')}}' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Codystar:300,400' rel='stylesheet' type='text/css'>
</head>
<body id='home'>
To expand on what Kapil said, this isn't a problem with your code at all, but with your domain host. You registered your domain with one company, but your Heroku app runs on another domain.
You're using cloaked redirection to point your URL at Heroku. This means your domain registrar isn't doing any DNS changes, but just creating a page with a frame inside of it that displays the contents of the other url.
You can see it if you curl the page:
>> curl http://www.opalkale.com/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8'>
<meta name="VERSION" content="">
<meta name="DATA" content="fwdnode7-bl.web-hosting.com (162.255.119.4)">
<title></title>
</head>
<frameset rows='100%, *' frameborder=no framespacing=0 border=0>
<frame src="http://glacial-mesa-9513.herokuapp.com/" name=mainwindow frameborder=no framespacing=0 marginheight=0 marginwidth=0></frame>
</frameset>
<noframes><h2>Your browser does not support frames. We recommend upgrading your browser.</h2><br><br>
<center>Click <a href="http://glacial-mesa-9513.herokuapp.com/" >here</a> to enter the site.</center>
</noframes>
</html>
This method works, but it's a really cheap n' dirty way to do it. Your registrar has no idea what the content of that other page is, so that's why the title, favicon and anything else won't display properly.
The right way to do it is to have your domain registrar point the URL at heroku's servers using DNS, but a lot of free domain registars won't do this.
The source code on the site indicates that the html body is being rendered in a tag that points to the heroku server. So the correct body is being rendered. But the header being rendered is the header on.
The title and favicon you wrote are being rendered in the tag in the frame, but the outside the doesn't have the favicon or title tags, and that's the one the browser is reading.
I'm not sure what might have caused this, but your DNS / hosting settings are likely the thing to blame.