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.
Related
Icons not showing , So I've this problem.
I'm using some weather icons provided by erikflowers on github.
They are working and showing up fine when I've opened my app through the live server extension in Visual Studio Code. However, when I open my index.html manually from the folder, they are showing up as blank squares.
Anyone have any clue why this might be?
Thanks in advance
EDIT:
Directory:
<link rel="stylesheet" href="./weather-icons-wind.css">
<link rel="stylesheet" href="./weather-icons.css">
I did try changing to ./ no help
It says it can't find the files but they are there
Your pathing is wrong. As u wrote by urself in a comment -
"To use the Weather Icons, place the main CSS files in your CSS directory, and the font files in a "font" directory on the same folder level as the CSS director. Once you've done that, all you need to do to reference an icon in your HTML is type ""<i class="wi wi-night-sleet""> "
You dont have a CSS directory.
Also look at your console error.
The route is wrong.. your Project Name is missing.
"../JavaScript/Projects/fonts/weather..", where is your Folder "Weather API"?
I would suggest to create a CSS folder (your styles.css stays in the project root), with your icon stylesheet files in it. That should fix your problems.
How are you accessing those icons? CDN? Or do you have them stored locally in some separate folder? Also, share your index.html and folder structure.
For example, you have them in a folder called icons, say a file called cloud.png. Then there are 2 ways to access them in your HTML file:
Using icons/cloud.png
Using ./icons/cloud.png
Both of these approaches work in Live Server, but sometimes we have to use the 2nd one when opening index.html directly or when hosting on Github Pages.
So try both of them and see which one works for you.
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
I downloaded the minified version of bootstrap and put it in the root directory of my project. Then in a HTML file in /views/ I added:
<link rel="stylesheet" href="/bootstrap.min.css">
However, the page continued to look the same because Bootstrap styles weren't added. I know I can use a CDN, I did and it worked, but for now I want to try including it locally. I tried to similarly include Semantic-UI but it didn't work too. What am I doing wrong?
I think I figured it out. Assuming that you have your stylesheet in /public then you have to add this line to your application file (usually app.js):
app.use(express.static(path.join(__dirname, 'public')));
From now on you can link to your stylesheets from anywhere in the project using this code:
<link rel="stylesheet" href="/bootstrap.min.css">
Note that we no longer have to specify the full path, which is "/public/bootstrap.min.css" - we omit the "/public" (in fact href="/public/bootstrap.min.css" would be an error).
If anybody reading this can explain why the first line is necessary please comment below. I believe I understand what it does but why the Express creators insisted on doing it that way i.e. why can't I <link> to my local files normally is what I don't get.
So i was doing some basic formating to my html page using CSS, and when i ran it on netbeans nothing happened. I double checked the <link> on my html page and it was correct.
So kind of confused now I went to the folder where netbeans project is saved and copied the files to a new folder on the desktop. I made the same edits on my css file using notepad++, and then ran my index.html file (double clicked and it opened with browser) and viola, changes i made appeared. Has anyone else experienced this encounter? Why will it not work on netbeans? Am i missing a plugin or something?
The CSS file first need to be listed on the directory tree on the left side of Netbeans. If its not there, the program won't run the css file that you're trying to include in the html.
It'll also help if you put the
your_css.CSS
In a sub folder... e.g. Folder Name: CSS
and then have your CSS file in there.
Then you should have this to link the css to the HTML document
<link type="text/css" rel="stylesheet" href="directory/css.css">
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.