Tutorial: Events List Grid

Because the topic on this spanned 19 posts… I figured it might be easier for others to cut it down to this “tutorial”

This will be in a grid.

This will be in two parts.
Part 1 will be for you site… ie: mywebsite/events
Part 2 will be for inserting in a generic post or page.

Part 1 Putting the code in for “mywebsite/events” the default “events list page”.
In Settings -> Events
Events Manager Options
–> Formating
click ->Events (it expands to “Events Page”)

There are three parts here…
“Default event list format header”
“Default event list format” this is like the “body”
“Default event list format footer”
=======================================
“Default event list format header”

<div class="row">
    <div class="col-3ex exmenu" >
      <ul>

Then below that…
“Default event list format”

<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>

and Below that… the “footer”
“Default event list format footer”

</ul>
     </div>
</div>

==============================
The following code for all this was gleemed from
https://www.w3schools.com/css/css_rwd_grid.asp

The CSS to make this all work…
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.

===========================================
Part Two… Generic Post or Page
Use the same CSS code as above…
Then using “shortcodes” for Events List….
Put this in… Obviously using the “text” not “vusual” editor…..

<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/

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/

=========================
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.

Hopefully I got the above correct from my previous lengthy thread…

• This topic was modified 7 years, 9 months ago by Robswaimea.
• This topic was modified 7 years, 9 months ago by Robswaimea.
• This topic was modified 7 years, 9 months ago by bdbrown.