Combine multiple css link tags AND autoloading template specific css files

Kirby 3 Solved ✅
1

I would like to use more than one stylesheet and also use template specific css files, but I can’t get it to work. And yes, there is a templates-Folder in assets/css and the file name is the same as the templates (info.css for info.php and info.txt).

  <?= css([
  'assets/css/normalize.css',
  'assets/css/index.css'
  ]) ?>

I have tried several ways to include this as seen here
<?= css('@auto') ?>

in there, but can’t figure it out. Please go easy on me, I’m learning… Thanks!

2

Hm, that should work, you can find an example in the Starterkit:

Use in the header: https://github.com/getkirby/starterkit/blob/master/site/snippets/header.php

assets folder structure: https://github.com/getkirby/starterkit/tree/master/assets/css

3

But the Starterkit has only one index.css, no other files. Or am I wrong?

4

No, there are quite a few template specific files in the /assets/css/templates folder, that’s why I linked to the css folder: https://github.com/getkirby/starterkit/tree/master/assets/css/templates

5

Ah, I think we might have a misunderstanding? How do I include the normalize.css, the index.css and the link to the specific templates css?

I have the normalize.css in assets/css like the index.css

6

Should work like this, all in one array:

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

It does! Weird, I thought I tried that before and got an error… But I think I didn’t put a comma behind '@auto', because the last item in the list here doesn’t have one and I’m still not familiar with PHP. Thanks a lot!

I have been in home-holidays and now need to get in again…

8

The comma after @auto is not necessarily required, it’s more a matter of coding styles:

The comma after the last array element is optional and can be omitted. This is usually done for single-line arrays, i.e. array(1, 2) is preferred over array(1, 2, ) . For multi-line arrays on the other hand the trailing comma is commonly used, as it allows easier addition of new elements at the end.PHP: Arrays - Manual

9

Okay, just tried it. Works too (of course…). But then I really don’t know what I initially did wrong. Maybe just a css mistake. Thanks again for digging deeper!

1 Like