I looked over some of the same questions on stack overflow and tried all the best answers. None of them worked.
I am learning html5 with CSS stylesheet. I looked over a website tutorial of building a web page with login form by flask.
So it has this base.html file which has some code links to a css file:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RELAX AND WORKOUT</title>
<link rel="stylesheet" href="bulma.css" />
</head>
Originally, followed by 'href' was a http link and it worked. But I downloaded the same css file and put it in the same folder as the base.html file so I can play with this css file.
They are both at ./project/templates/the_file
This is the link to download the css file: https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css
It was also originally the tutorial author put after 'href='. But when I changed it to my local file name 'bulma.css', it does not load the stylesheet at all.
I also tried absolute path and relative path. Neither of them worked.
I'm running it on Windows 10. Using Python 3.7 and flask.
So in my case, how do I make the html load this local css file?
Edit:
Ok, I made it work eventually.
I made a new folder called "static" and put the css file inside it. Then I changed the path to this:
<link rel="stylesheet" href="../static/bulma.css" />.
Does it mean flask treats the "templates" folder as a special folder only for html templates, it does not recognize other file formats?
But I saw a question which the person put his css file in the same directory. The answer is to just add a dot and it worked. That was why I put it with all the other html templates in my templates folder. But it never worked in my case.
From flask docs:
Flask automatically adds a static view that takes a path relative to the flaskr/staticdirectory and serves it. The base.htmltemplate already has a link to the style.cssfile:
{{ url_for('static', filename='style.css') }}
You need to create a folder called static inside your flask app directory with your static files inside, ex.: CSS, images, etc.
In your html code use:
<head>
<link rel="stylesheet" href= {{ url_for('static', filename='bulma.css') }}>
</head>
Try changing your href="bulma.css" to href="./bulma.css" and see if it works.
Are you sure you don't have to go into the templates folder? "/templates/bulma.css"
Hit F12 to open up the development pane. Go to the network tab. Refresh the page. Is the file listed in that list? You may have to refresh your cache to have it take effect. To do that: CTRL+SHIFT+R. If the file is listed in there you can view the preview to make sure it's current, if not you will still need to do a force refresh on the cache.
As for URL's you can also use an absolute file path starting at the root with href="../project/templates/filename.css" (use 2 periods). The following is a website for more info on this:
https://www.w3schools.com/html/html_filepaths.asp
Related
I'm using node.js, express and mysql.
I have successfully followed these instructions to include my css file:
How can I include css files using node, express, and ejs?
The css does load on every page, except one link that contains an id in the url:
http://localhost:8089/edit/123
The last number is passed from the previous page, when the user clicks on an 'edit' link in a table row.
The styling is not loading on this edit page. It does load everywhere else.
My node.js server file:
app.use(express.static(__dirname + '/public'));
The edit.html is in the same 'views' folder as the other pages. The css link is the same in the html:
<link rel="stylesheet" href="css/style.css">
Can someone help what the problem is and how to fix it?
add /
<link rel="stylesheet" href="/css/style.css">
this way it will return to the document root not on here /edit/123/css/style.css
i created a html page in pingendo using its drag and drop feature.
3 files were created draft.html, draft.css, draft.less.
I uploaded files on my website on hostinger.
But it only shows the html part and css is not loaded.
what changes should I make in pingendo files to make it work?
Are you linking to the css file sored locally on your machine in your HTML?
IE: <link href="C:\Users\USERNAME\Desktop\web\assets\draft.css" rel="stylesheet" type="text/css">
Rather than directly going to the path of the CSS in relation to your HTML page?
IE <link href="assets\draft.css" rel="stylesheet" type="text/css">
May I have a link to your site to take a look?
I am building a web2py application.
I use my own css file called style.css
I do know that the following code
{{response.files.append(URL('static','css/base.css'))}}
{{include 'web2py_ajax.html'}}
will link my css file to my application.
I use this for layout.html; which is used for every page of application.
Initially, I do not have problem with this...
Suddenly, at some point, my css is not updated...
Every css before the point, works fine.
Every css after the point, do not work at all.
In web2py editor, all css changes are updated. However, If if run it, the css is not updated... If I inspect the css code using chrome, the css is not updated and remain to previous css file..
for clarification, I give you example
initially I just have the following.
#title{
font-size: 90px;
}
then I change it to the following
#title{
font-size:100px;
}
IN the web2py editor, the change is saved and set it to 100px. However, if i run the application and view css file using chrome inspect, it is still remained as 90px.
I thought the server may have some error, so I restarted. I still get error.
Another thing I can think of is the confit with bootstrap..
The following is the head part of layout.html
<head>
<title>NR</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
{{response.files.append(URL('static','css/bootstrap.min.css'))}}
{{response.files.append(URL('static','css/style.css'))}}
{{include 'web2py_ajax.html'}}
</head>
Actually, I do have a solution...
If I create css file with different name, and copy and paste all css work, it work!!
However, this takes extra work... create new css file and copy and paste.... It is not good way.
Can you help me?
Thank you
Perhaps your web server is configured to set the HTTP response headers so the assets will be cached by the browser (in which case, they will not be re-sent on every request). If this is just a development issue, you can simply force your browser to reload all assets (e.g., by pressing CTRL-F5).
For a more general solution, see the documentation on static asset management.
Another option is to let web2py serve the static content itself, in which case, the assets will be re-requested with each page and web2py will return 304 responses if the assets have not changed since last sent.
When I include a jquery-ui stylesheet for a resizable jquery-ui dialog remotely like so
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/start/jquery-ui.css" />
I get this result:
but when I download the very same file and include it locally like so
<link rel="stylesheet" type="text/css" href="./jquery-ui.css" />
I get this result:
Note the missing resize handle in the lower right corner which seems to be the only difference.
What causes the difference?
Jquery-ui references a bunch of image sprite sheets. When including the reference from ajax.googleapis.com the path to the image resolves properly because google hosts those images on their server and has them in the proper location. However in your local copy of the jquery-ui.css i'm guessing there's a good chance your images are not in the proper location.
I'm using jquery ui in a current project and my folder structure is:
Content
images <--- this is the jquery ui sprite iamges folder
jquery-ui.css
go to /jquery-ui.css and make sure the bg paths are path correctly
In my JSF Application (My faces 1.2.3) , I am referring to a css file as
<link href="css/nav.css" type="text/css" rel="stylesheet" />,
This worked when the rendered HTML is accessed as an HTML file using the browser but not inside my customized servlet container.
It wasn't referring correctly, eventhough the relative path was correct. Then I tried with
<link href="../css/nav.css" type="text/css" rel="stylesheet" />
It worked in a browser and did not in some other browsers.
I was told that I should use facelets.DEVELOPMENT" = true to make it work , It worked in Dev Env and it did not in Test Env (There will be some inherited properties!!! and not everything will be used from my application)
I have some knowledge on these accompanying technologies but not an expert. Wondering whats the issue and where ? - Servlet Container , XHTML , Facelets , JSF Impl ?
Any Idea - What could be the problem?
A relative <link> URL is relative to the request URL as it is on the client side, in the webbrowser's address bar (the webbrowser is namely the one responsible for loading the CSS files), it is not relative to the folder structure as it is on the server side.
So if the request URL is for example http://example.com/context/page.jsf, then the CSS which is referenced by href="css/nav.css" will be loaded by http://example.com/context/css/nav.css and the CSS referenced by href="../css/nav.css" by http://example.com/css/nav.css.
If you still stucks with this, then you need to post both the absolute URL with which you can request the page in question successfuly and the CSS file itself. This way we can explain you which relative URL to the CSS file you should be using for the page in question.
Probably the problem is that your application is not absolute to the request url
Lets assume that you access your application via:
http://localhost/my-app/
And now when you try to load a resource as you described above
<link href="css/nav.css" type="text/css" rel="stylesheet" />
It will be loaded by
http://localhost/css/nav.css
I would suggest using the context path property when referring resources.
<link rel="stylesheet" type="text/css" href="#{request.contextPath}/css/style.css"/>
One potential solution here would be to use a root relative path, something like.
/MyCSSFolder/myfile.css
In most cases this can resolve the issues.