How can I add a favicon to by blogdown website? I am using the minimal theme. I tried adding the line in the config.toml favicon = imgPath and I also attemped to move 'favicon.ico' to the static folder, but neither has worked.
If you have a file named favicon.ico in root directory, most browsers will use it. The easiest way is to add favicon.ico in static directory (therefore, Hugo will copy it to root directory), see here.
Favicon is declared in <head> element. In minimal theme, the <head> element is defined in header.html file.
As you can see, the minimal theme does not provide support for favicon.
First, check if you have a layouts/partials/header.html file.
If this file does not exist, copy themes/minimal/layouts/partials/header.html file to layouts/partials directory (you may have to create this directory).
You have to modify the layouts/partials/header.html file.
Add after opening <head> tag:
<link rel="icon" type="image/png" href="{{ "imgPath" | relURL }}">
If you are using other themes such as Academic, you might have to create an icon instead of a favicon.ico file. As per instructions here, you have to create a square 512x512 pixel image named icon.png and place the image in your root assets/images/ folder. For the Academic theme, the assets folder is located under themes\hugo-academic when using RStudio.
So be careful if you have a Hugo theme that does not support simply pasting the favicon.ico file in the root of the static folder.
Related
I'm currently learning about html and css. I've learnt about this code,
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
It was said that external stylesheets can be loaded with 3 ways, and that's one of the ways.
So my question is, does that mean I have to upload my stylesheet to a specific website so I can access the stylesheet my html document?
ps. sorry for bad english
edit: the link comes from w3schools, i'm learning the basics from there. if i shouldn't have done that please tell me so i can remove it.
The following
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Will download the styles.css file from www.w3schools.com/html/. In that case, you only have to upload your html file. The downside is that if the w3schools.com admin deletes the file you don't have control over his decision , your page will not find it anymore.
The best thing to do is to put a local my_styles.css file in the same folder as your html file and then
<link rel="stylesheet" href="my_styles.css">
This means you will have to upload your html file and my_styles.css. In this case the style will be always available for the webbrowsers to download.
does that mean I have to upload my stylesheet to a specific website so I can access the stylesheet
No. The stylesheet needs a URL so the browser can access it. It doesn't have to be a URL hosted by a particular website.
It doesn't matter where that URL resolves to (unless it is one that isn't accessible to the browser — e.g. if the URL is on a private LAN and the browser isn't on that LAN).
No it doesn't have to be uploaded anywhere. The href attribute simply expresses where the file is. The value of the href can be relative or absolute.
Relative
Relative paths are relative to the folder your HTML file is in. So imagine you have an HTML page webpage.html and a CSS file styles.css in the following folder structure:
My Website
|-- css
| `-- style.css
|-- images
`-- webpage.html
Your link element could use a relative path like this:
<link rel="stylesheet" href="../css/styles.css">
../ to go up a folder, then css/ to go into the css foler.
Absolute
An absolute path points to the same place no matter where you're pointing from. In the folder structure above, if My Website was the root directory of our website, we could use absolute paths a couple different ways:
<link rel="stylesheet" href="/css/styles.css">
/ to start at the root directory, then css/ to go into the css folder
OR
<link rel="stylesheet" href="http://www.mywebsite.com/css/styles.css">
This would directly load your CSS from the URL like the w3schools example.
https://www.w3schools.com/tags/tag_link.asp
<link rel="stylesheet" type="text/css" href="my_style.css" />
https://www.w3schools.com/tags/att_style_type.asp
<style type="text/css">
...
</style>
https://developer.mozilla.org/tr/docs/Web/CSS/#import
#import 'custom.css';
My bootstrap css file is located at
C:\Users\SCEA\Downloads\bootstrap-3.3.7\css
and for linking this to my php file I have given absolute path as:
<link href="C:\Users\SCEA\Downloads\bootstrap-3.3.7\css" rel="stylesheet">
but the effect of css is not visible.Is my css file not getting linked?
You might have a typo before css. The backslash before it might need to be a period.
<link href="C:\Users\SCEA\Downloads\bootstrap-3.3.7.css" rel="stylesheet">
If are running server in your local computer I suggest moving this file within the server document root.
Your comment:
css is a folder inside bootstrap-3.3.7
Probably in the CSS folder are the actual css files.
You need to refer to the actual CSS files and not to the folder itself.
Here is a quickfix using CDN:
Put these links in and it works guaranteed
My pages in pretty basic html hold styling when kept in the root folder. Created a new folder for a group, but when I move pages to that folder they seem to lose connection to the css file.
Thought the problem might be the link since it now had to move up one folder. So I changed this:
link href="assets/css/readable/bootstrap.css" rel="stylesheet"
To this:
link href="http://www.example.com/assets/css/readable/bootstrap.css" rel="stylesheet"
but that changed nothing. Still page works fine in root folder, but not in /new folder.
Thank you for pointing out the basic premise I could be missing.
link href="/assets/css/readable/bootstrap.css" rel="stylesheet"
Add a / at the beginning of the path to refer to the Document Root instead of using a relative path.
I'm trying to add an external css file in my index.html.
Organization-name - codehunks
My directory structure is as:
codehunks.github.io
_layouts/
style.css
LICENSE.txt
README.rst
index.html
I tried adding it as:
<link rel="stylesheet" type="text/css" href="_layouts/styles.css"/>
but it didn't work.
I searched and get to know that raw.github.com/../.. doesn't work in case of css/text
I found some articles adding it by providing link as [username].github.io/[repo]/[folder]/[filname] but this didn't work for my organization.
I tried adding it as codehunks.github.com/codehunks.github.io/_layouts/style.css but the link is giving me 404 not found response.
Any possible solution or I'm following something wrong.
Here's my page codehunks.github.io and here's my code Source Code
your style will work at /styles.css if you put it in the root, _layout folder is used by jekyll/ruby.
create a css folder in the root of your repo and put the style in there.
/css/style.css instead.
I am using a Dedicated Server.
In the web-hosting side, I have folders arranged like so.
html
forum
files
images
files
Equinox
index.php
header.php
footer.php
style
style.css
mc-multiplayer
style
style.css
index.php
header.php
footer.php
I am trying to get the index.php of mc-multiplayer to link to the css file in mc-multiplayer, but no matter what it keeps going to the style.css file in the html folder.
At first glance I would suggest using the following code:
<link rel="stylesheet" href="style/style.css">
Make sure to confirm that everything is cased/spelled correctly and that directories are correct. As Kevin Boucher suggested, it would help to know the link you're currently using.
from a page within the mc-multiplayer subdirectory (as long as a <base> element isn't overriding the directory context)
this might work (no prefix (such as / or ../) before style should maintain the current folder context, then style subdir then the file):
<link href="style/style.css" rel="stylesheet" />
this should definitely work (/ to start at the root of the site then into mc-multiplayer subdir then style subdir to the file):
<link href="/mc-multiplayer/style/style.css" rel="stylesheet" />