This is driving me nuts. This is should be simple - but I can't tell what I am doing wrong.
I have a plain old web site. Index.html, a css folder, images folder, fonts folder and js folder.
I am trying to add a font through the #font-face declaration.
I run the page locally and I get 404s for both the font file and the background image?
The paths are correct?
You are pointing to the wrong directory.
Try to add /../ before your path. Like:
src: url(/../fonts/in901xk.ttf)
This give an "step back" to the main directory and now can point to the "fonts" folder.
Other option to check this, for example in the case of images, is write the complete url that you think is the correct.If you can see the image, you will know what is the correct path that you should use in your src
Related
When I use the command hugo, it generates the index.html in the Public folder. When I open index.html, the site load like this:
But when I use the hugo serve command locally, it generates the link http://localhost:1313/, and the site load properly. It loads like this:
I think the problem is because of the not proper rendering of files or anything similar.
My approach:
I added the code relativeURLs = true and uglyURLs = true at top of the config.toml file but still it does not rendered properly.
I had set baseurl = "/" in config.toml file but this also does not work.
Your theme might be loading CSS using {{ .Site.Baseurl }}.
For example:
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/style.css">
In that case, make sure that the BaseUrl defined at the top of your config.toml file is set to http://localhost:1313, which will allow your local server to find the CSS file.
You're CSS file is not loading properly. This can have several reasons, for example:
http url on an https website.
wrong "integrity" hashes on you css file.
css file is not deployed or not on same location on the server.
Google developer tools plugin might help here. If you right click on your web page, click "inspect" and go to console. You can see any loading errors.
You can install Web Server for Chrome and choose the /public folder of your Hugo website. Your site should now render correctly at the url configured (http://127.0.0.1:8887 in the example screenshot).
You might want to set baseURL to the absolute path of the public folder.
Fixed this by configuring baseUrl in config.toml.
If you're deploying using GitHub pages, you'll want to make your baseUrl equal to your github pages domain.
So I compiled my SASS into one CSS file using codekit 2 on their own localhost and the website looks perfectly fine.
However when I upload my website onto a webserver (including all my SASS and CSS) it will not show some of my images. Then when I remove the SASS from my server leaving the compiles CSS it looses my fonts as well.
Does anyone know why is this?
Here is the website: http://bubbacue.nathanpatton.co.uk/
And the GitHub Repo for all the files: https://github.com/NathanPatton/Bubbacue
Your web host is generating a bunch of 403 Forbidden and 404 Not Found errors on the assets.
In Chrome, go to View, Developer, JavaScript Console and you'll see a list of the problem files and directories. Here is how to fix it.
I just started a new Grails project (Grails v2.4.2) and it is my first time using the Asset Pipeline plugin. I managed to get it working without much issue until I noticed the fonts were not displaying correctly.
I figured that the issue was the #font-face url in the css did not have the correct path. The only way that I could get it to work was to put the full path to the files into the css which was, for example:
src: url('/ProjectName/assets/fontawesome-webfont.eot');
The font files are all in the grails-app/assets/fonts folder and the css files are in the grails-app/assets/stylesheet folders.
Is there a better way to reference the font files from the css?
The issue for me was caused by a bug in the version of the Asset plugin that was bundled with Grails 2.4.2. This error will only show up for people using Windows PC's
Illegal character in path at index 0: \/../
Once I went from asset-pipeline:1.9.4 to asset-pipeline:1.9.6 the error went away
The error is discussed here:
I'm having trouble making my CSS external stylesheet work in my actual hosting. It all works fine when I open the files from my Finder (I'm using a mac), but the stylesheet does not seem to load to my server properly. All other html files load fine and are visible when you visit my website in any browser,this is my website and the File Manager on my cPanel indicates that the CSS folder and external stylesheet file have been successfully uploaded for enough time that the style features should display. I tried clearing my browsing history and reopening my browser.
My link tag is and I have tried it using aswell as with just "css/socialpolarities.css". I've checked to make sure the spelling is right on the path and corresponds to the actual file.
Is the answer to just put all the style files in the public_html folder and then just change the path on all my html files? Or am I missing something?
I'm also using LiquidWeb if that means anything
The file css/socialpolarities.css seems to exist, but is void of content.
try looking at your local file to make sure it is indeed the one with the css code, then upload it to the same folder and override the original one.
You may have had an upload error.
I got it! The problem was actually that I needed to put the css file in the home directory, for some strange reason. My path from my html files definitely specified that the css files were in a css directory so I'm not sure if it's something I did wrong or whether the cPanel just sucks. Regardless, it works so I won't mess with it. Now time to copy all of my webfont files into my home directory...this is going to be messy lol.
Check your permission. They should be 755. You can search about permissions on internet. I changed the permissions and it worked fine.
I am trying to add a htc file in css. The solution structure is:
I am in /Styles/QTip/jquery.qtip.css and from there I am referring the PIE.htc as:
behavior: url('../HTC/PIE.htc');
But it is not working.
Also after running the application from VS2010 if I browse
http://localhost:2873/Styles/QTip/jquery.qtip.css
Then browser opens the css file but if I browse the URL
http://localhost:2873/Styles/HTC/PIE.htc
I am getting The resource cannot be found.
What will be the right path of this htc file?
You have to use an absolute path or a full URL reference as suggested here and here.
You need to go up another folder...
behavior: url('../HTC/PIE/PIE.htc');