Overwriting a class in a CSS

Help
1

Hi forum,
I’m new to Jekyll and currently I’m building a site based on https://github.com/daattali/beautiful-jekyll
In its /css/main.css file this contains a definition of
hr.small {
max-width: 100px;
margin: 15px auto;
border-width: 4px;
border-color: inherit;
border-radius: 3px;
}

I now want to achieve that this class gets another color.
Instead of simply changing the color in the main.css I’m trying to add a custom CSS file for all my changes but I’m failing all the time.
Currently I have a file under /assets/ css/style.scss that contains

@import “{{ site.theme }}”;

hr.small {
border-color: #F08921;
}

This follows the description under https://help.github.com/articles/customizing-css-and-html-in-your-jekyll-theme/.

However, wen building the site, that css is simply ignored.

Does anybody here have any advice for me on how I can introduce my own css file to the site in which I can change the CSS settings without changing all the files that ship with the theme?

Thanks a lot in advance
Norbert

2

There are many approaches to overriding CSS but the one rule that is common to all is the rule of hierarchy.
CSS defined at the beginning can be overridden by CSS after it.

say your site’s default stylesheet is called on line 12 like so:

12 <link rel="stylesheet" href="css/styles.css" />

Then to override it, all I would need is call another custom stylesheet after it:

14 <link rel="stylesheet" href="assets/css/custom.css" />

A

2 Likes
3

Thanks for the answer! In the meantime I got it working. I tried so many combinations that I lost track of them in the end.
I’m not using a file named custom.css under /assets/css/ and manually include it via the head.html.
The description under https://help.github.com/articles/customizing-css-and-html-in-your-jekyll-theme/ did not work in any way but in the end there is only on thing that counts: It’s working now :slight_smile:
Have a nice weekend!
Norbert

1 Like