CSS not working in default jekyll HTML

Question

I'm using jekyll to build a static webpage hosted on github, pulishing as gh-pages branch as default.

I've created index.html for unique changes, theme.css withing same directory: ../css ,

My css flie is not being executed and its not working, following is my code in each files.. file: default.html

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">

<link type="text/css" rel="stylesheet" href="{{site.baseurl}}/css/theme.css">

<title>Jai's Blog</title>

</head>
<body>
<header>
    <h1>The BLOG</h1>

    {% includes nav.html %}
</header>

{{content}}

    <footer>
        <p>copyright Jai Sharma</p>
    </footer>

</body>

below is the css file code, which is not working with above html file.

body {

    background-color: #e74c3c;
}

.current {
    background-color: #000531;
}

Answer 1

The baseurl is only part of the url.

You should reference the entire url:

{{ site.url }}/{{ site.baseurl }}/css/theme.css

I think that the forward slash ( / ) is needed in this format.

Another way which I think works is:

{{ site.url | append: site.baseurl }}/css/theme.css

If you are happy with relative urls, the you could try:

../css/theme.css

Hope this helps.

CSS not working in default jekyll HTML

Question

1 answers

solution1
1 ACCPTED 2016-11-21 10:11:54

CSS not working in default jekyll HTML

Question

1 answers

solution1 1 ACCPTED 2016-11-21 10:11:54

solution1
1 ACCPTED 2016-11-21 10:11:54