i've renamed my .css to .less and referenced the less.js file (version 1.3). I'm unable to edit the .less file, it's almost like it's readonly. Any ideas? thanks
i've got this in my root layout head tag:
<link rel="stylesheet/less" type="text/css" href="#Url.Content("~/Content/CSS/mystylesheet.less")"/>
and this in the body tag:
<script type="text/javascript" src="#Url.Content("~/Scripts/less-1.3.0.min.js")"></script>
the css works fine, i just cant make any edits whilst running and when stopped.
Using mvc 3 and razor
Don't use ~ in your path. Either use a relative path or a full path using file:// if you're working from localhost.
Related
I was working on a preview card component and when I uploaded my code to a repo to deploy it, github doesn't seem to load my css file style.
note: not my first time to deploy on github pages.
thanks in advance!
repo link: https://github.com/HanyAyad/Stats-preview-card-component-
live-website link on github pages: https://hanyayad.github.io/Stats-preview-card-component-/
same website deployed on netlify (working fine): https://62116b02da6915993f04d79c--suspicious-hypatia-156ece.netlify.app/
Maybe because the folder is CSS/styles.css and your declaration in index.html is css/styles.css?
I just tested here and when importing your CSS file, you are using
<link rel="stylesheet" href="css/style.css">
when you should be using
<link rel="stylesheet" href="CSS/style.css" >
URLs may be case-sensitive, it depends on what file system you are running your website.
Try renaming the folder CSS to css.
The directory in your repo is named CSS and not css as expected. So, please rename the directory.
It only works on Netlify because it doesn't take casing into account, for some reason. (That is, https://62116b02da6915993f04d79c--suspicious-hypatia-156ece.netlify.app/CsS/sTyLe.css works fine.)
I have an index.html file and index.css. The directory structure is:
img of directory structure
I am linking the css to html with : link rel="stylesheet" type="text.css" href="css/index.css"
I am using tomcat v8.5 to host. When I run my project on server I see this in the window within eclipse:
browser displayed within eclipse
However when I open up chrome/firefox and search, it is only pulling the index.html and the css is not being displayed :(
I read that files have to be specified with "relative path", however, the folder containing index.css is in the same directory(WebContent) as the index.html. So what is the issue with href="css/index.css" ? Can someone please help me with the path issue?
Thanks so much for your time !
There is a slight mistake in the link tag. Replace type="text.css" with type="text/css":
<link rel="stylesheet" type="text/css" href="css/index.css">
I've been experimenting with Twitter Bootstrap and have run into a problem I cannot resolve. Basically, I have a very simple HTML file (based on the beginning of this tutorial: http://www.sitepoint.com/understanding-twitter-bootstrap-3/ ) and I can open the file, but it is not loading the CSS.
I've tried this locally as well as from my web server and in both instances, the CSS does not load. This tutorial has some errors on where quotes go which I've fixed, but I've had the same problems with another tutorial.
index.html is located in the same folder as the CSS folder.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Please for the love of God help me before I destroy my Macbook.
Try using bootstrap.css instead of bootstrap.min.css. Also, make sure that it's in the correct path.
Another thing you can try as well is using media="all" instead of media="screen" in your link specifications.
Your javascript link tag for jQuery looks suspicious. Either give a relative path on your local directory, or the absolute path to an external url.
I had the same problem but it was unique, not sure if other had the same issue. I had "rel=" before the "href=". Just swapping the places, i.e. "href=" before "rel=" resolved the issue.
Thanks a ton for the correct syntax.
I followed below steps to load or apply Boostrap css.
first check bootstrap available in node_modules?
If you don't see, Install bootstrap with below command
npm i bootstrap
After installation successful, verfiy again boostrap in node_modules.
enter image description here
next open your project styles.css file and import below line.
#import '~bootstrap/dist/css/bootstrap.css';
when you upload the bootstrap files to your hosting, make sure to upload ALL the files even the .map files. I did that and it worked for me.
I had the same problem and I solved it.
open your file in windows notepad, choose save_as > Beside the Save button , open Encoding dropdown and choose UTF-8 !
my file was saved in Unicode Encoding.
I used windows notepad to save-as my file in a UTF-8 Encoding and the issue was gone.
you may also use notepad++ to change the encoding of a file.
good luck
I found this answer because it was the top google search yet I had this problem for a completely different reason.
For those who might have made the same mistake I have, remember to add
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
or some reference to another version of bootstrap so that your code knows where to get all the bootstrap related information
Sounds like this is just a simple directory issue.
You are saying you have the HTML file and the CSS file in the same folder right?
Then to load the file link it like this:
<link href="bootstrap.min.css" rel="stylesheet" media="all">
Else
If your css file is in a "css" folder then change the directory to:
<link href="css/bootstrap.min.css" rel="stylesheet" media="all">
If worse comes to worse use the external link instead for troubleshooting:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
I am working on a remote instance using amazon ec2 instances and created an index.html file. In that HTML file, I have created links to an external CSS file which is in the same directory as my index.html file but when I try it out in chrome it doesn't seem to find the CSS file and gives me a 404 not found an error. I have tried doing the same thing on my local machine and it works just fine there. Am I missing something? How can I fix this issue? Any help is appreciated, thank you.
This is the part of the code i am confused with:
<!-- Custom styles for this template -->
<link rel="stylesheet" type="text/css" media="screen" href="signin.css">
</head>
Try the usual suspects:
1. Renaming your css file
2. Check if it works on you local machine. You've done that, so it's a server related issue.
3. Try absolute path for the css
4. Try other browsers, maybe it's just chrome
I have installed impatient-mode in emacs, and I would like to edit both the html file and the external css file linked in the tag and see the changes automatically in the browser:
<head>
<link rel="stylesheet" href="path/to/my/style.css" type="text/css">
</head>
The problem is that when I edit my css, nothing happens, and the html file which appears in the browser stops loading content.
How can I resolve?
Just enable impatient-mode in the linked CSS file as well as the HTML file.
The syntax is correct but Try to check your css file path first.