Design your own structured fields for better usability

##A structured field… with custom design##

Check out the screenshot above. It’s the panel-view of a blueprint (a landingspage, in this case) - completed with tabs on top (to keep things clear for my client).

There is also a “quotes / testimonials” section (like all sites have…), and I decided to complete this with a structured field;

  • Image / avatar of the person.
  • The company that is quoted.
  • The role / position of the person.
  • The quote itself.

In “preview” mode, the structured fields looks… not so structured; it’s hard to read what they present. Of course you can click on the “edit” button in order to see all fields more clearly, but sometimes you just have to find a testimonial quickly in order to change it.

##Kirby 2.2.0###

Kirby 2.2 will have a table-grid for the structured fields, but why wait - because you can already design the field right now!

I placed some icons in front of every text-field, and separated them with a thin, gray line; this makes the cards more easy to read and far more easy to navigate, when you have a lot of these fields.


##How to?##

This is how you can design your own structured fields.

1. Add the following code to your config.php which is located in /site/config/

c::set('panel.stylesheet', 'assets/css/panel.css');

2. Create the file panel.css in /assets/css/

3. Copy/paste the following code in the panel.css

/* icons in structure fields */

div.structure-entry-content i.fa.fa-icon {
  color: #777;
  margin: 0 10px 0 0;
  min-width: 24px;
  text-align: center;
}

div.structure-entry-content br {
  border-bottom: 1px solid #ccc;
  content: "";
  display: block;
  margin: 10px 0;
}

4. Use markup in your blueprint;

  Testimonials:
    label: Create a testimonial
    type: structure
    entry: >
      <i class="fa fa-icon fa-image"></i> {{quote_image}}<br>
      <i class="fa fa-icon fa-user"></i> {{quote_name}}<br>
      <i class="fa fa-icon fa-anchor"></i> {{quote_anchor}}
    fields:
         ....
         ....
         ....
7 Likes

Nice! I just thought, if the name of the blueprint was added as a class in the markup in Kirby core, it would be easier to customize with CSS.

It could be added to the body or mainbar element:

<div class="mainbar blueprint-homepage">

That way we could tweak the styles per blueprint.

1 Like

Actually, I think you can even place a complete website in the structure-field :smile:

It accepts most tags, so why not!

But I wanted it to keep it simple… only added an icon <i></i> and <br> … that’s it.

The icon comes from Font Awesome, the margin / spacing and gray line is created with the “::after tag”

It’s really cool to create the fields like this - you can quickly identify a field, within all the structure-entries…

Social Media cards##

##Testimonial cards##

##Number cards (numbers are animated strings on the site)##

##Project cards##

etc… :stuck_out_tongue:

3 Likes

This would be really helpful! /cc @bastianallgeier

As you requested… you can now style all the structured fields like you want… :stuck_out_tongue:

(Please, see GitHub link above for the details - it’s very easy to implement).

1 Like

The blueprint class is a great idea! That’s why I just implemented it :smile:

2 Likes