Add some space between events

Hi Anna,
I don’t think I have the magic bullet for this one. I’m sure there is a way to do this in a global fashion, i.e., to have the plugin insert extra spacing between subsequent events?— however, support in this forum is scarce, and everybody seems to be waiting for the developer to resume work on this. Given that the plugin urgently needs an overhaul (I wish it was compatible with and using the block editor!), I personally don’t rely upon somebody to invest work in extra custom solutions on an outdated code base. However, I’m heavily relying on this plugin to work, so I’m desperately hoping that it will not suddenly be incompatible or—worse—break other things in WP. As a result, I’m doing all layout that can’t be controlled with the standard plugin by adding the required extra layout features to the individual event entries —?if necessary, by using the code editor. I have run into the issue with visual clutter / insufficient separation between subsequent events myself —?and here’s what I have done. First, my own events list (quite different from yours, though dealing with concerts as well):
Then, in order to avoid having to re-edit every single one of my >300 event entries over and over again, I am now relying on style sheets, via the “Simple Custom CSS” plugin. A typical event entry will end with something like

<hr class="event-separator" />

(...)

<a class="event-bloglinkstyle" href="some_URL" target="_blank" rel="noopener noreferrer">→ Blog Review (★★★★)</a>

<hr class="event-endline" />

whereby the classes “event-separator”, “event-bloglink”, and “event-endline” are defined in my Custom CSS as follows:

.event-separator {
	padding-bottom: 0px;
        width: 20%;
        margin-top: 0px;
	margin-right: 80%;
	margin-bottom: 20px;
	border-width: 1.5px;
}

.event-bloglinkstyle {
        font-size: 16px;
	background-color: #ffcc66;
	font-style: italic;
	font-weight: 500;
}

.event-endline {
	padding-bottom: 0px;
	height: 2px;
	color: #999999;
	background-color: #999999;
        width: 100%;
        margin-top: 24px;
	margin-bottom: 20px;
	border-width: 2px;
	clear: both;
}

I also rely upon Custom CSS for controlling the styles in the rest of the event-list output (including the sidebar widget). Sorry for lots of this looking clumsy —?it’s not the most elegant coding: I have over 25 years of HTML experience, but still am not an expert in CSS coding —?lots of this is the result of trial-and-error. Nevertheless the top code segment above to all my >300 event entries, I can now change the style of the extra separation ruler (spacing, color, thickness), as well as most other styling simply by changing that style in one file: my Custom CSS. I don’t say the ruler is ideal, but if you were to make its color transparent, e.g., with

	color: #99999900;
	background-color: #99999900;

(note the extra two digits for the opacity / transparency), then it will look like space. Note that the “clear: both;” property will probably not force the space beginning after the date box in the case of short event entries.
You have a nice WP Website (even though that recurring CD pop-up is slightly irritating)!
Best wishes, -Rolf

• This reply was modified 3 years, 4 months ago by Jan Dembowski.
• This reply was modified 3 years, 4 months ago by Jan Dembowski.

To build upon what Rolf said, but keep it more succinct, add the following to your child-theme’s stylesheet or your theme’s custom CSS field:

li.event {
    margin-bottom: 5em;
}

Change the value of ‘5em’ to whatever you like. You can use fractions, e.g. margin-bottom: 1.6667em.

• This reply was modified 5 years, 5 months ago by hatesspam.