Using .scss files in Krabi

Themes
1

#nonexpertquery

I am trying to style Cove comments in the Krabi template. I added a comments.hbs file and added styles to _comments.scss file. Added the latter to _all.scss. But it is not picking up the styles. Wondered if it needed to be compiled or something (which I don’t know how, or want, to do).

Advice gratefully received.

I actually began just by using the new Table of Content styles - so that the Comments section would look a bit like the TOC section. But this resulted in a TOC section being added to all files, not just ones with H2/H3. There is probably something I could do to change this but I did not spend time looking into it.

Thanks Lorcan

2

It sounds like there’s a couple of things going on here.

First, scss indicates that the file is SASS, which is a format that needs to be compiled to CSS before it can be used. This process is a bit complex and will be dependent on how you’re theme was built. A way to get around this would be to just add your styles via Code Injection > Site Header to your site in a <style> tag. (This may not be desirable if you have a lot to add.)

Second, in terms of the TOC collision, I’d have to see what’s going on there. My guess is that you’re adding a class name or something that is being picked up by JavaScript and adds the TOC to the page.

If you have a link to share that would be great!

3

Thanks for this. The first part is as I suspected. Which is another issue around the whole Themes model.

I did try code injection … and it partly worked. But that may in part be down to my inexperience/lack of knowledge. I could be making a syntax or other mistake. Or the interaction between the code injection and the outputs of the Cove script.

On the second, I would have to go back and change the class names. But prob not worth it now.

I don’t have high volume of comments :slight_smile:
You can see a comment here … Advice to an LIS graduate student: reflecting life and career (lorcandempsey.net)

I just changed the style of the header to match the one on the related posts coming after. And it seems mostly to be coming out of the Cove box as only some of the stuff is working (the styles defined in .scss are not).

I need to finish some other stuff but I will look at code injection again in a while. Thanks for confirming.

4

I don’t know exactly what you’re trying to do, but I think your comments are looking good as is!

If you’re trying to get them to look a bit more like your TOC, then you could try adding the following to your Code Injection > Site Header:

<style>
.c-comments {
	background: var(--color-background-secondary);
	padding: 1em;
	border-left: 2px solid var(--ghost-accent-color);
}
</style>

I’ve included an image for reference:

image
image772×376 32.7 KB

5

Thanks very much. I actually had something very similar but a little more elaborate than this in code injection and it was not picking it up.

However, I have just put your code in. But I put it in before the Cove script is called, rather than after and hey presto it works.

I should have thought about the order before but I guess I was just thinking that it should come after.

Thanks for putting some time into this … and for great advice!

Lorcan

1 Like
6

Curious what theme you are using on your own site?

7

I’m using a custom theme I created called Mel (after my dog!). The code’s open source but I just made it for myself so there are a lot of things hardcoded.

1 Like