##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:
....
....
....