2

I'm using Jekyll for the first time to build a portfolio site. I had no trouble with customizing the HTML but when I follow instructions on customizing the CSS, the changes I make are not applied after I do bundle exec jekyll serve. Here's what I've tried following instructions from this github help link: I created a CSS file (assets/css/style.css) and at the top of it I put this block of code:

--- 
---
@import "{{ site.theme }};

/* sample code to test it */

.button {
background-color: red;
}

Then, in the head.html file, I made sure to link this newly created stylesheet by adding this:

<link rel="stylesheet" href="{{- 'assets/css/style.css' | relative_url -}}" />
<link rel="stylesheet" href="{{- 'assets/css/main.css' | relative_url -}}" />

Note that the main.css is the original CSS file that comes with the template. Afterward, when I refresh the page, the button has not changed. I'd appreciate any tips on what I should be doing differently. Thanks

laertos
  • 21
  • 3
  • You're loading `main.css` after you load `style.css`. Could it be overriding your custom styles in `style.css`? If you look in the network tab in your devtools, to you see your custom CSS getting loaded, or is it 404ing? – neilsimp1 Mar 29 '18 at 19:31

2 Answers2

1

Its has something to do with the order in which you are calling the css.

css has a cascade model, in which the last css you call has preference.

Try to put YOUR css after the one that comes by default. 

<link rel="stylesheet" href="{{- 'assets/css/main.css' | relative_url -}}" />
<link rel="stylesheet" href="{{- 'assets/css/style.css' | relative_url -}}" />

If it does´t work, put an Important.

--- 
---
@import "{{ site.theme }};

/* sample code to test it */

.button {
  background-color: red !important;
}

If that does´t work either, simple put another class to the button in the css AND the html

--- 
---
@import "{{ site.theme }};

/* sample code to test it */

.btn {
  background-color: red;
}
Ignacio Galdames
  • 109
  • 1
  • 5
1

First thing I would try is to close the string.

Wrong: @import "{{ site.theme }};

Right: @import "{{ site.theme }}";

Community
  • 1
  • 1
qoolixiloop
  • 11
  • 1