Page finished, page not there?

The CMS Questions
1

Finally i can use layouts and blocks in a page;
but it seems i need to tell the template what to show?
What should it show? I just want to show, what i have done in the panel.

2

Ok … here i will go on tomorrow

3

Funny, funny, now i have my layouts and blocks on the page; but it seems there is no css for that. hould it be like that? Should i add the css for my own to the code that layouts and blocks are produce?

4

Yes, you are responsible for your frontend. Unless you get a theme. The Kirby Starterkit is not a theme, only an example.

5

That means, that i will probably find some blocks/plugins in themes?

Is there no collection of blocks somewhere?

I need some easy things, but understand now that i will need some time to produce my own blocks (time, that i dont really have now).

Like: A div with a picture and a h1 plus text in the center
Like: A picture and colored ectangle with text as a button under it.
Usual things …

I will try to watch some themes now. Thank you.

Anyway it would be a wonderful thing to have such a library like i know it from other systems.

6

Not aware of a collection. There are some listed here: Plugins | Kirby CMS

And these resources might be helpful:

7

But …

I have setup layouts to use them for my “home”.
When i fill it with blocks, it looks like i want to see it later on the page.
That means that i have the css for the panel page, but not for the web page?

8

The frontend is completely independent of the Panel, yes. That’s no different from other CMSs, e.g. a WordPress block has backend and frontend styles as well.

9

I dont understand how this should be possible.
For example:

<div class="column" style="--span:2">
  <div class="blocks">
    <div class="block block-type-gallery">
      <figure>
        <ul>
          <li>
            <img alt="" src="http://localhost/media/pages/home/03a1801976-1663683329/7-01-edited.jpg">
          </li>
        </ul>
      </figure>
    </div>
  </div>
</div>

This code i have in different places in my page; but how should i set the picture one time to 300x300 and another time to 400x400; there is no difference in the code. How do i add something to set different css to these blocks?

10

If you want to add additional styles, then you have to customize the default blocks and add fields where you can set a class. Then use the value from this new field in the block snippet.

11

This means that i make copies from blocks for different output?
Is it possible to add input fields to blocks to set some vars directly?

Like div/div with
a) class=“haha”
b) style=“whatever”
c) class= “haha lala dada”;

Means i could add a textfield that is added directly after the <div … and before the >?

12

If you add a new field to a block, you can then use the value in the block snippet. You need to make a copy of the block yaml in site/blueprints/blocksand a copy of the block snippet in `site/snippets/blocks and make your changes there.

You can find the original code of the block snippets/blueprints here: