I am unable to access CSS file which is located under MVC AREA section.
Here is the full path of the CSS file.
http://mywebsite/Areas/MVC/Resources/dist/css/custom.css
I tried to debug using firebug and it prints the following error message.
The stylesheet
http://mywebsite/Areas/MVC/Resources/dist/css/custom.css was not
loaded because its MIME type, "text/html", is not "text/css".
Although I have specified the text/css type in the link attribute.
I am referring to the css file as below
<link href="~/Areas/MVC/Resources/dist/css/custom.css" rel="stylesheet" type="text/css" />
I have also tried giving the absolute path but still no luck.
If we try to open the above link in browser it is opening correctly and showing CSS but it does not load in the application.
Also the js resouces and images are being loaded in the same folder by using the same path but not the CSS.
Try linking the css file in your main html file. Also, if your system is an user login system then, try linking the css file in that html file which does not require user login.
Related
I am trying to use a single HTML stylesheet that I've created between multiple apps script web app projects. I have the HTML stylesheet hosted on an external site but cannot figure out the code to include that external stylesheet into my apps script projects.
I've currently got it working with the following code in my Index.html file:
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<?!= include('stylesheet') ?>
The include function calls:
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
And my stylesheet is a separate HTML file in my Apps Script.
This all works well, but I'd like to have a central repository elsewhere (I've read that I cannot link to an Apps Script file in another project) for my stylesheet so that whatever changes I make will update to all of my Apps Script projects automatically.
To do this, I've uploaded my stylesheet.html to a website and have taken the link that points to the file (i.e. http://www.test.com/stylesheet.html) and tried to do the following without success:
<link rel="stylesheet" href="http://www.test.com/stylesheet.html">
I've placed this in the head element of my Index.html file, and I also tried it above the head element. Neither worked.
I've also tried to just use the include function that worked as mentioned above and modify my stylesheet.html to be blank except for:
<link rel="stylesheet" href="http://www.test.com/stylesheet.html">
None of this seems to work, wondering if anyone else has any thoughts on how this might be possible.
Host CSS file in Google Drive
Create a .css stylesheet file and host it on Google Drive.
Change the uploaded file permissions to publish it on the Web.
Now copy the published file ID and use it to build the following URL:
https://drive.google.com/uc?export=view&id=FILE-ID-GOES-HERE
Now include the generated URL to your HTML page using the <link/> tag in this way:
<link rel="stylesheet" href="google_drive_link_goes_here">
Reference
Host CSS or JS file on Google Drive
For some reason, I can only access my CSS files in my Node.js app if they are located in the same folder or deeper than HTML.
Folder structure that works:
I can assess CSS here using the css/style.css path as it is located in the sub-folder of the HTML folder. It also works for the nested sub-folders.
Folder structure that doesn't work:
But when I try to move CSS on the level higher, it can't be accesses using ../css/style.css, an error message about the incorrect MIME type (text/html) appears and the style doesn't apply.
Am I missing something or this is intended?
The issue might be with path, it must be
<link rel="stylesheet" type="text/css" href="../css/style.css">
I made static directory inside my app and kept my css folder inside static with the name style.css. I set the css link as :
<link rel="stylesheet" href="{% static 'css/style.css' %}">
I think all the path is correct but it shows the previous project's css. why this is happening?
This is a classic problem when developing multiple sites locally using the same resource names. Your browser has cached the contents of the file so it doesn't attempt to download the file again when the page loads. Usually this is a good thing as it makes your pages load faster, however in this case it's picking up a stale cached filed.
To fix this you'll need to perform a hard refresh, on Windows this is done by pressing Ctrl+Shift+R. If you have the Chrome developer tools open you can press and hold the refresh icon and it will show you the different refresh options.
Simple as title says, how do I include a css file that is found two parent folders up from the actual web application itself?
I have tried adding the file as a link to the web project and then referencing it like that and it dose not work
<link rel="stylesheet" href="../../mystyle.css" /> would literally move up two folders on your server. You may be better off with using the full path: <linke rel="stylesheet" href="/folder1/folder2/mystyle.css" /> - which all assumes that the path you need to get to is accessible to the web server.
Since the page comes from the server I would read the physical file and stuff that onto the page as part of the server script such as:
<style>
<?= css_file_content ?>
</style>
If in a parent folder, it may be outside the hosted path making it inaccessible to the client. But it is not inaccessible to the server-side script.
Visit: http://www.w3schools.com/css/css_howto.asp
You can add inline css if external doesn't work
I'm trying to style the custom error pages in IIS7 with a linked CSS style sheet.
This works.
<html><head><title>404 - File or directory not found.</title>
<LINK href="http://stage.mysite.com/custErr/css/style.css" rel="stylesheet" type="text/css">
</head><body>Page Not Found</body></html>
I've created a virtual directory in mysite called custErr that contains the css and images needed.
But to make it easier to deploy I'd like to have it relative like this...
<html><head><title>404 - File or directory not found.</title>
<LINK href="../css/style.css" rel="stylesheet" type="text/css">
</head><body>Page Not Found</body></html>
After trying this I find that relative paths don't seem to work. In fact a style sheet in the c:\inetpub\custerr\en-US folder doesn't work either.
Where are these pages being served from?
Is there an easier way of doing this?
So I don't have to modify each and every absolute path for each environment?
I know this is a late reply but the reason why the relative paths don't work (I think) is because if you hosted a site such as www.myfavouritephotos.com and on visiting a directory on that site such as www.myfavouritephotos.com/images/ which is a directory in your website that doesn't have a default document like Default.aspx or whatever your site is set up as serving as a default page, IIS would return a HTTP Response of 404 for not finding a page to serve up or a 403 response because the user may not have the necessary rights to view the content of the directory under that url.
IIS by default would serve either the 404.htm or 403.htm file from within the c:\inetpub\custerr\en-US directory by default but when you replaced it with a custom htm file that replaces 404.htm, the relative path to the stylesheet you reference from that htm file would make a request at what the original url made to the server was so www.myfavouritephotos.com/images/(../css/style.css) which would result in an incorrect relative path so it may be able to be avoided by using a reference to a stylesheet with www.myfavouritephotos.com/css/style.css