Why AppEngine doesnt load my stylesheet? - html

I import my stylesheet with this line on the html
<link href="styles.css" rel="stylesheet" type="text/css" />
it works fine when I drag-n-drop the file into the browser but when I load trough AppEngine it doesnt take the css file or the pictures that are located in a child file

Can you show your app.yaml and your folder structure? Is that Python, Java, PHP, Go?
If its python, you should use a folder for your static files, add a handler for this folder in your app.yaml file:
handlers:
- url: /static
static_dir: static
And then link it as:
<link href="/static/styles.css" rel="stylesheet" type="text/css" />
For more info take a look at https://developers.google.com/appengine/docs/python/gettingstartedpython27/staticfiles

Related

Github pages not loading css on subfolders

Any idea why github pages stoped loading css and images in subfolders, it works fine on the root of the site.
When i checked the source code of the page, i see this
"href="css/bootstrap-3.3.6/css/bootstrap.min.css">"
instead of
"href="/css/bootstrap-3.3.6/css/bootstrap.min.css">".
In my config file I have a line
baseurl : /
--> crowd42.github.io
Thanks
It should work the way it is baseurl : "/" if when loading assets you use that variable:
<link rel="stylesheet" href="{{site.baseurl}}css/main.css">
As it seems that you aren't using base urls, you can try forcing the root path with a slash at the beginning:
<link rel="stylesheet" href="/css/main.css">
Or including the absolute path:
<link rel="stylesheet" href="{{'css/main.css'|absolute_url}}">
with baseurl: "".

Referencing a CSS file from another local directory in a link tag HTML

I have a HTML file and a CSS file located in different directories in my PC.
in the head tag I use a link tag to reference my css file
<link href="C:\Users\UserName\Desktop\Web_testing\BGsample SS.css"
type="text/css" rel="stylesheet" />
this doesn't work
try using the file:/// protocol.
href='file:///C:\Users\UserName\Desktop\Web_testing\BGsample SS.css'
If that doesn't work (and you say it doesnt), then my guess is that it won't work at all due to it being prevented by security features in the browser.
It depends on where you are loading the main HTML content from, but if the main HTML is loaded from the internet then I can understand why the browser might object to loading the CSS from the client machine's local file system.
One final thing to try: You might try setting up a web server on your machine, putting the mystyles.css file into the web folder, and loading it into the page using:
href='http://localhost/mystyles.css'
I can't really suggest much else, I don't think.
Check your paths, Best practices is to always use a relative paths. Ex
If your stylesheet is called style.css the link should be:
<link rel="stylesheet" type="text/css" href="style.css" />
If you have the css file in a subdirectoy (and the subdirectory is called styledirectory) the link becomes:
<link rel="stylesheet" type="text/css" href="styledirectory/style.css" />
If the css file is in the parent directory of the html file the links becomes:
<link rel="stylesheet" type="text/css" href="../style.css" />
.. goes up 1 directory, if you need two you could do: ../../
Sample Folder structure
Assuming structure is like that then,
<link rel="stylesheet" type="text/css" href="styles/BGsampleSS.css" />
Name files without spaces too.
You should be using '../' to move back in your path, and then into the directory with the CSS file.
Please always follow the CSS External Style Sheet way. In your case the CSS file cannot be located. Try adding \ before SS.css
<link rel="stylesheet" type="text/css" href="C:\Users\UserName\Desktop\Web_testing\BGsample\SS.css">

Linking my stylesheet without the root so can use the folder anywhere

I linked my stylesheet customstyle.css to my index.html but when i copy the folder to another drive the stylesheet wont get linked how do i overcome this problem as i have to send the folder to another person
<link rel="stylesheet" type="text/css" href="D:\healthplus\style.css">
Make sure that index.html and customstyle.css are in the same folder. Then in index.html you should link to your stylesheet like this:
<link rel="stylesheet" type="text/css" href="customstyle.css">
This is a relative path because it doesn't start with a /

My CSS file in Github isn't being used by the HTML file

This is the link: https://footballcoder.github.io/YearOfCode/projects/about.html (source code: https://github.com/FootballCoder/YearOfCode)
If you see in my repo, I have a folder called projects and in there I have my about.html, and a folder called css. I have a file in the css subfolder that is called about.css, which is the css for about.html. I don't know why the css isn't being used. Is it the way the file is being linked or some other error. The link from the HTML file is in the tags.
change this
<link rel="stylesheet" type="text/css" href="/projects/css/about.css">
to this
<link rel="stylesheet" type="text/css" href="./css/about.css">
I hope this article can help you
You refer to the link as such:
<link rel="stylesheet" type="text/css" href="/projects/css/about.css" />
See if the following edit (removing '/projects/') fixes the problem.
<link rel="stylesheet" type="text/css" href="css/about.css" />
This should work because it is linking the path starting at the serving html, aka about.html, not at the root of your site. Just tested it with Dev Tools in Chrome, and it looks like it works (and is super cool!)
Side note: if your fonts from Google aren't loading, move the custom CSS below those links in the head. I'm not sure if they are or not since I'm not familiar with them, but that will work if that is also an issue.

CSS file path changes on the browser

I have specified the following css path but when i am trying to load page it converts the file path as below
In the html code i had given the path like :
<link href="css/style.default.css" type="text/css" rel="stylesheet">
But after inspecting on browser it gets converted as below:
<link href="css/A.style.default.css.pagespeed.cf.cgR25iXVvw.css" type="text/css" rel="stylesheet">
It is your server changes filepath. This is because you have turned on addidtional cache for files.