[Solved] Custom CSS problem in jekyll theme

Help
1

So I chose a theme for my first project, forty, modified it a little. Then I wanted the index page template of the theme tale for my blog posts. So I went on and copied the contents of tale’s _catalogue.scss to forty’s sass/components/_catalogue.scss and added an import in main.scss. Now, neither does the scss compile to css, nor does copying and pasting css to directly to assets/css/main.css work. The css just doesn’t show in the rendered page.
I tried a bunch of solution like deleting the assets/css/main.css file before jekyll serve --watch and some changes to _config.yml files but none of these seem to work. What should I do?

2

just a quick glance at the tale theme - did you see that the catalogue.scss file is using variables? did you add the variables.scss file?

3

Oh no I didn’t realize, I just started today. Those $ things are variables I guess. I’ll take a look into it.
Thanks

4

I tried adding variables to the _sass/libs/vars.scss file of the forty theme and adding the catalogue.css file directly by removing the variables(and included them in <link rel='stylesheet'> fashion, but to no avail. The site doesn’t render the css.
This is my css file

.catalogue {
    &-item {
        border-bottom: 1px solid #e5e5e5;
        color: #555;
        display: inline-block;
        padding: 2rem 0;
    
        &:hover .catalogue-line,
        &:focus .catalogue-line {
            width: 5rem;
        }
    
        &:last-child {
            border: 0;
        }
    }
    
    &-time {
        color: #aaa;
        font-family: Palatino, 'Palatino LT STD', 'Palatino Linotype', 'Book Antiqua', 'Georgia', serif;
        letter-spacing: .5px;
    }
    
    &-title {
        color: #353535;
        display: block;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 2rem;
        font-weight: 700;
        margin: .5rem 0;
    }
    
    &-line {
        @include transition(all .3s ease-out);
        border-top: .2rem solid #353535;
        display: block;
        width: 2rem;
    }
}

And this is the webpage

Screenshot from 2017-04-03 00-38-16.png1366×743 108 KB

5

I think that some of that is sass maybe? so it may need to be compiled first.

I don’t think &-item is normally css.

6

It isn’t getting compiled though. Even when doing jekyll serve and deleting main.css.

7

it won’t compile if you name it .css I don’t think. It needs to be named .scss and be in the sass directory, then you can import it into the main.scss file.

So maybe the first time it didn’t work because you didn’t have the variables, the second time it didn’t work cause you named it .css and the sass/scss isn’t compiling.

8

I have the _catalogue.scss file in my _sass/components directory and I have imported it in _sass/main.scss file.

9

not sure the main.scss file should be in the sass folder - usually it is in the /css folder. is there a repo to look at?

10

I’ll upload it in a few minutes, it was still a WIP but I’ll do it.

11

This is the link to the repo https://github.com/hackrush01/hackrush-website
Basically I want to keep the front page as forty and inside Blog2 as tale.

12

you have a main.scss file in the _sass folder, and a main.css file in the assets/css folder.

As it is I think the site is using the one in assets/css, which is not importing any sass so nothing in the _sass folder is being used. If you want to use sass, and I think you should, you have the partials in the _sass folder, and then normally you import them into the assets/css main.scss file - course it can be most anywhere, doesn’t have to be there, doesn’t have to be named main, does need to have the scss and the front matter.

1 Like
13

course to use everything as is, you do need to keep the name as main as that is what the layout/include is loading.

1 Like
14

Remove assets/css/main.css, move _sass/_main.scss to assets/css, and rename it to main.scss (drop the underscore since it’s not a SCSS partial.

When you run Jekyll now it will preprocess your main SCSS and generate _site/assets/css/main.css

I think your just getting tripped up on where partials go (E.g. _sass) and where a main SCSS file goes that imports partials.

The other key to how Sass assets work with Jekyll is to make sure they have --- front matter. This tells Jekyll to process them.

1 Like
15

Thanks a lot. Both of you! Your advice worked, now it is working as expected. I am new to this stuff. Thanks for taking time out and pinpointing the issue. I ran into an error about undefined mixin, but I figured that I didn’t copy the mixin from “Tale” to “Forty” :stuck_out_tongue_winking_eye:

16

Hi, creator of Tale here. Was just about to point out that @include transition... is a mixin. Glad you solved it anyway! :slight_smile: