Thank you to Caimin for pointing out that excellent tutorial about CSS and “grid” layout with tables.
If you are not very experienced with CSS, and this plugin it can be difficult to start.
This plugin has a lot to offer…. BUT that means there is a lot to learn.
And with that a lot you can do.
1.) Where to put the “code” or “html”…
In Settings -> Events
Events Manager Options
–> Formating
click ->Events (it expands to “Events Page”)
go down to
— >”Default event list format”
That is where you would put in your “html” code and “Placeholders”
<div class="row">
<div class="col-3ex exmenu" >
<ul>
[events_list limit=3]
<li>
<div align="center" style="margin-right:5px;text-align: center;">#_EVENTIMAGE{125,69}<br />
<span style="font-size: 12pt;font-weight:bold;">#_EVENTNAME</span><br>
<span style="padding:2px;text-align: center;border:solid black 1px;border-radius:4px;background-color:#e6e6e6;font-color:#000000;font-size:16px;font-weight:bold;">#_EVENTDATES</span>
</div>
</li>
[/events_list]
</ul>
</div>
</div>
If you don’t know about placeholders… you need to learn and know them…
https://wp-events-plugin.com/documentation/placeholders/
Now you also need to know about CSS and where to put it for all the above to work.
Put the CSS in your Child Theme…. or use a CSS Editor like the one in JetPack, or other type plugin.
So for the above to work you would use CSS like this below.
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
padding: 15px;
}
.col-3ex {width: 85%;}
.exmenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.exmenu li {
padding: 8px;
margin-bottom: 7px;
margin-right: 5px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
border:solid black 2px;
border-radius:10px;
display:inline-block;
min-width:260px;
max-width:260px;
vertical-align:top;
}
.exmenu li:hover {
background-color: #0099cc;
}
</style>
ALWAYS make backups of your files and database before editing files…
while this won’t hurt your database… it is a good practice to remember.
If you haven’t already… learn about the shortcodes will help…
https://wp-events-plugin.com/documentation/shortcodes/
And the documentation…
https://wp-events-plugin.com/documentation/
