How to edit CSS of the Starterkit?

The CMS Questions
1

Hello!
So I’ve installed Kirby and read the Docs, but I can’t figure out how to change any styling (fonts, colours…).
The only CSS file I found is in assets/css/index.css – however, any changes in this file don’t have any effect on how the website looks.
What am I doing wrong?
I have some experience with CSS and HTML and understand that it can’t be difficult, but I really can’t find my way around it, so will be really thankful for a hint!

2

Hi there!

Well, that IS the css file that styles the starterkit as far as I know. I am pretty sure about that.

The file is linked in the ‘header’ snippet under /site/snippets/

Are you sure the file is being saved and you know what css you are editing and what to expect?

Alternatively create another css style file , and link it in the header snippet instead of index.css, see what happens?

1 Like
3

@plagasul is right, /assets/css/index.css is the one and only CSS file, so any changes you make to that file should be reflected in the Starterkit. Maybe the old settings are cached by the browser, have you cleared the cache?

Other possible reasons:

  • a syntax error in your CSS
  • the styles you changed are overwritten by some rules with higher specificity later in the file
  • your are loading another CSS file that overwrites some rules?
1 Like
4

You were right, it was the browser cache!
I opened it in another browser and saw all the changes I’ve made.
I knew there was a simple answer, but didn’t expect it would be THAT simple! Thank you so much!

2 Likes
5

Is there a way to include related CSS files for snippets from the assets/css/(snippets) folder, for example?

6

Yes, you can do that, in the same way you include your main css file. However, it usually makes sense to have a build process that combines your individual component files into one file that you then link to in your Html

1 Like
7

Okay, hmm.
At first I’d thought that there was only one CSS file included in the Mægazine Starter Kit but it turns out there are a few that are deeper in the assets/css/templates directory. How do those get included?

8

They are auto-included based on template:

<?= css(['assets/css/index.css', '@auto']) ?>
1 Like