How do I increase the spacing between Items?

Between which items? The paragraphs?

This sounds like a css issue, so the template would be of most help :-)

Paragraphs if you like. Perch refers to them as 'Items'. There are three in the example, each with a bold heading and brief body text This is something the client wants to do, and tinkering with CSS is surely not a client activity?

What you put in an item is up to you. I would probably wrap each item in a div and give that margins.

Or if you want a quickfix just add:

.entry p strong {
  display:block;
  margin-top:15px
}

And no, tinkering with css should not be up to the client. Just add the needed rules to the css, or change the markup in the item template.

As you can doubtless tell, I'm new to Perch and Markdown (but not to HTML, CSS or PHP). I'm trying to present my client with a 'Region' into which she can insert one or more 'Items' as the need arises. The number and content of items will change over time.She has successfully inserted three items, but now wants to have more space between those items.

Thanks for your suggestion, clearly it would work, but where my client has used '<p><strong>' should really be <h2>. I think if I can persuade her to use a level two heading (<h2> in HTML, but ## in Markdown) at the start of her items I can style that heading to have a top margin.

Thanks for your help.

In Perch, you can create your own templates to control the look of the page:

So, very simply, set up something like events.html in /perch/templates/content/:

<div class="event">
<h2><perch:content id="event_title" type="text" label="Event Title" required="true" title="true" /></h2>
<h3><perch:content id="event_date" type="date" label="Date" format="l, F j, Y, g:i a" fieldorder="dmy" time="true" /></h3>
<perch:content id="event_description" type="textarea" label="Event Description" markdown="true" editor="markitup" />
</div>

Now this template can can be called into the region you are setting up to hold the event data... And now, in the admin, the user is entering individual field items and the template applies the surrounding html...

Now, if you use the events app, the templates would be different as there are some default fields the events app requires... and all of the tags would be in the Events appspace <perch:events id="...

Know what I mean?

Hi Tim

I wouldn't let the client dictate your layout too much. Perch is a content manager after all. But if you are wanting to arrange items equally vertically in a space then have a look at flex-box / grid's justify-content: space-between property. It will space child items evenly inside the parent container item.

Looking at your page I think what you've got is fine. Stacked to the top is perfectly natural. Maybe ask your client what happens when the page is filled with 5 to 10 items? Or how it will appear to someone on mobile if the next item is below the fold – they simply won't know the content is there.

Hope this helps (and welcome to Perch!)

Jon

Thanks. I can see where your suggestion is leading, and I will investigate it further. In the short term I have solved my client's immediate requirement.

There's an element of walking before I run in my approach. I'm not yet confident I fully understand how the elements of Perch inter-act. Sometimes I achieve something but a month later I don't understand how I got there. More manual reading required.

Hello Jon,

Thanks for your comments. I think what I have NOW is fine. Earlier today the items were all very close together, I think my client was right to want more space. I don't have any problem with the CSS (though there's always more to learn), it's the Perch bits that are still a bit of a mystery to me. I'm working on it, trying to relate 'Regions' and 'templates' etc.

Tim