# \[Solved\] Custom CSS problem in jekyll theme **URL:** \ **Category:** Help\ **Created:** [April 2, 2017, 12:14pm UTC](https://talk.jekyllrb.com/t/solved-custom-css-problem-in-jekyll-theme/390 "2017-04-02T12:14:13Z")\ **Posts on this page:** 16\ **Page:** 1
**Author:** ![hackrush01](https://avatars.discourse-cdn.com/v4/letter/h/ba8739/32.png) [@hackrush01](https://talk.jekyllrb.com/u/hackrush01)\ **Post date:** [April 2, 2017, 12:14pm UTC](https://talk.jekyllrb.com/t/solved-custom-css-problem-in-jekyll-theme/390/1 "2017-04-02T12:14:13Z")
So I chose a theme for my first project, [forty](https://github.com/andrewbanchich/forty-jekyll-theme), modified it a little. Then I wanted the index page template of the theme [tale](https://github.com/chesterhow/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? ---
**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\ **Post date:** [April 2, 2017, 5:11pm UTC](https://talk.jekyllrb.com/t/solved-custom-css-problem-in-jekyll-theme/390/2 "2017-04-02T17:11:51Z")
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? ---
**Author:** ![hackrush01](https://avatars.discourse-cdn.com/v4/letter/h/ba8739/32.png) [@hackrush01](https://talk.jekyllrb.com/u/hackrush01)\ **Post date:** [April 2, 2017, 6:08pm UTC](https://talk.jekyllrb.com/t/solved-custom-css-problem-in-jekyll-theme/390/3 "2017-04-02T18:08:04Z")
Oh no I didn’t realize, I just started today. Those `$` things are variables I guess. I’ll take a look into it. Thanks ---
**Author:** ![hackrush01](https://avatars.discourse-cdn.com/v4/letter/h/ba8739/32.png) [@hackrush01](https://talk.jekyllrb.com/u/hackrush01)\ **Post date:** [April 2, 2017, 7:10pm UTC](https://talk.jekyllrb.com/t/solved-custom-css-problem-in-jekyll-theme/390/4 "2017-04-02T19:10:23Z")
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 `` fashion, but to no avail. The site doesn’t render the css. This is my css file ```css .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 ![](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/1X/a79052c2a1eca41c824e98f7fa63bb97d8ea1ebf.png) ---
**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\ **Post date:** [April 2, 2017, 7:35pm UTC](https://talk.jekyllrb.com/t/solved-custom-css-problem-in-jekyll-theme/390/5 "2017-04-02T19:35:19Z")
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. ---
**Author:** ![hackrush01](https://avatars.discourse-cdn.com/v4/letter/h/ba8739/32.png) [@hackrush01](https://talk.jekyllrb.com/u/hackrush01)\ **Post date:** [April 2, 2017, 7:41pm UTC](https://talk.jekyllrb.com/t/solved-custom-css-problem-in-jekyll-theme/390/6 "2017-04-02T19:41:15Z")
It isn’t getting compiled though. Even when doing `jekyll serve` and deleting `main.css`. ---
**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\ **Post date:** [April 2, 2017, 8:36pm UTC](https://talk.jekyllrb.com/t/solved-custom-css-problem-in-jekyll-theme/390/7 "2017-04-02T20:36:40Z")
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. ---
**Author:** ![hackrush01](https://avatars.discourse-cdn.com/v4/letter/h/ba8739/32.png) [@hackrush01](https://talk.jekyllrb.com/u/hackrush01)\ **Post date:** [April 2, 2017, 8:58pm UTC](https://talk.jekyllrb.com/t/solved-custom-css-problem-in-jekyll-theme/390/8 "2017-04-02T20:58:18Z")
I have the `_catalogue.scss` file in my `_sass/components` directory and I have imported it in `_sass/main.scss` file. ---
**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\ **Post date:** [April 2, 2017, 9:04pm UTC](https://talk.jekyllrb.com/t/solved-custom-css-problem-in-jekyll-theme/390/9 "2017-04-02T21:04:03Z")
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? ---
**Author:** ![hackrush01](https://avatars.discourse-cdn.com/v4/letter/h/ba8739/32.png) [@hackrush01](https://talk.jekyllrb.com/u/hackrush01)\ **Post date:** [April 2, 2017, 9:08pm UTC](https://talk.jekyllrb.com/t/solved-custom-css-problem-in-jekyll-theme/390/10 "2017-04-02T21:08:15Z")
I’ll upload it in a few minutes, it was still a WIP but I’ll do it. ---
**Author:** ![hackrush01](https://avatars.discourse-cdn.com/v4/letter/h/ba8739/32.png) [@hackrush01](https://talk.jekyllrb.com/u/hackrush01)\ **Post date:** [April 2, 2017, 9:43pm UTC](https://talk.jekyllrb.com/t/solved-custom-css-problem-in-jekyll-theme/390/11 "2017-04-02T21:43:56Z")
This is the link to the repo [https://github.com/hackrush01/hackrush-website](https://github.com/hackrush01/hackrush-website) Basically I want to keep the front page as `forty` and inside `Blog2` as `tale`. ---
**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\ **Post date:** [April 2, 2017, 10:54pm UTC](https://talk.jekyllrb.com/t/solved-custom-css-problem-in-jekyll-theme/390/12 "2017-04-02T22:54:56Z")
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. ---
**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\ **Post date:** [April 2, 2017, 10:56pm UTC](https://talk.jekyllrb.com/t/solved-custom-css-problem-in-jekyll-theme/390/13 "2017-04-02T22:56:00Z")
course to use everything as is, you do need to keep the name as main as that is what the layout/include is loading. ---
**Author:** ![mmistakes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/mmistakes/32/2169_2.png) [@mmistakes](https://talk.jekyllrb.com/u/mmistakes)\ **Post date:** [April 2, 2017, 10:57pm UTC](https://talk.jekyllrb.com/t/solved-custom-css-problem-in-jekyll-theme/390/14 "2017-04-02T22:57:21Z")
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. > **[Assets](https://jekyllrb.com/docs/assets/)** > > Jekyll provides built-in support for Sass and can work with CoffeeScript via a Ruby gem. In order to use them, you must first create a file with the proper extension name (one of .sass, .scss, or .coffee) and start the file with two lines of triple... ---
**Author:** ![hackrush01](https://avatars.discourse-cdn.com/v4/letter/h/ba8739/32.png) [@hackrush01](https://talk.jekyllrb.com/u/hackrush01)\ **Post date:** [April 3, 2017, 5:21am UTC](https://talk.jekyllrb.com/t/solved-custom-css-problem-in-jekyll-theme/390/15 "2017-04-03T05:21:16Z")
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” 😜 ---
**Author:** ![chesterhow](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/chesterhow/32/159_2.png) [@chesterhow](https://talk.jekyllrb.com/u/chesterhow)\ **Post date:** [April 3, 2017, 5:04pm UTC](https://talk.jekyllrb.com/t/solved-custom-css-problem-in-jekyll-theme/390/16 "2017-04-03T17:04:19Z")
Hi, creator of Tale here. Was just about to point out that `@include transition...` is a mixin. Glad you solved it anyway! 🙂