I know this is a dumb question, but my Freemarker view isn't loading the css file, despite the fact that they in in the same package, in the resource. I've used the following links:
<link rel="stylesheet" type="text/css" href="absolute path here">
<link rel="stylesheet" type="text/css" href="/resource/views/styles.css">
<link rel="stylesheet" type="text/css" href="styles.css">
Is there a proper way to do this in an ftl file? I'd rather not have to code in the style on each page.
The CSS (and JavaScript) files are loaded by the browser. FreeMarker has nothing to do with it. The path you have in the href is resolved by the browser based on the URL you see in the address bar of the browser (unless you have a base element in the HTML head).
Last time I have worked with some Dropwizard project it used bootstrap.addBundle(new AssetsBundle()); in the Application.initialize method, and then there were src/main/resources/assets/whatever.css, and then in the template <link rel="stylesheet" href="assets/whatever.css"> or href="/assets/whatever.css">, depending on how the URL-s of you pages will look for the user.
Related
Recently re-did all the files to my website, and uploaded them to the 000webhost server they're located on. It's just some basic HTML but is heavily reliant on the CSS to make it look good. So when I checked it out to see that it didn't work, I realized not only did the javascript not work but the CSS too. I think it might be an error in my code, seeing as all the other files work fine. Any help would be appreciated.
I've tried redirecting the file paths, adding the head tags, deleting and re-adding the file to the server, and waiting to see if it was a server issue.
Here is the first couple of lines to my index HTML file:
<html>
<title>Home</title>
<link rel="shortcut icon" type="image/png" href="images/amistufffavicon.ico">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="functions.js"></script>
I really just want to make the HTML pages look good, and an explanation in case it ever happens again I know what to do.
first, use the {} logo on the top of the text editor to make your code show up. all you have to do is highlight your code, then click the {} button and it will format it for you.
your CSS and JS code actually looks like the HTML tags for these imports.
One bit of advice, if you have issues making several files work, just write everything in your HTML file
instead of
<link rel="stylesheet" type="text/css" href="style.css">
<script src="functions.js"></script>
just do this:
<html>
<style>
/*write style here*/
</style>
<script>
//write script here
</script>
</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">
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.
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.
I am having this issue here:
http://arflux-rpg.com/game/index.php
On line 5:
<link type="text/css" rel="stylesheet" href="/src/style.css">
The stylesheet exists (and is populated in correct syntax), I am linking correctly, and yet the styles fail to apply.
EDIT: Removed clickability of link as it's generating Google malware warning.
You actually mean to link to
<link type="text/css" rel="stylesheet" href="src/style.css">
Starting your url with / will treat it like an absolute path from your domain, without the slash it treats it as a relative path from the current directory.
Replace
<link type="text/css" rel="stylesheet" href="/src/style.css">
with
<link type="text/css" rel="stylesheet" href="../src/style.css"/>
Hope it helps
Your stylesheet may exist, but not under that path. Try to access it directly at http://arflux-rpg.com/style.css - you'll get a 404 Page Not Found error.
Check your path - you're specifying an absolute path with the leading /, so make sure the stylesheet is actually located in the "src" directory directly under your document root directory.