Edit Dynamic Template

<div class="post-list--col" onclick="window.location.href = '/community/event-rsvp/?event_id=[? $event['event_id'] ?]'; return false;">  <logic:if test="$templateRegionsShown['icon'] && $event['event_icon']" evaluateat="render"> <div class="post-list--img"> <standard:image src="[? $event['event_icon'] ?]" alt="[? $event['event_title'] ?]" lazy="true"width="300" height="300" /> </div> </logic:if> <div style="padding: 2rem"> <hr class="accentLine" /> <h3 style="margin-top: .5rem;"><span style="color: #333333;">[? $event['event_title'] ?]</span></h3>  <logic:if test="$templateRegionsShown['date']"> <table border="0" width="100%"> <tr> <td width="30px" style="vertical-align: top;"> <standard:icon library="feather" iconstyle="standard" iconname="calendar" style="width: 15px; height: 15px;" /> </td> <td width="auto"> <logic:if test="$event['event_start_datetime']"> <logic:if test="formatDate($event['event_start_datetime'], 'yyyy') == date('Y')"> [? formatDateTime($event['event_start_datetime'], '', 'MMM dd', '') ?] </logic:if> <logic:else>[? formatDateTime($event['event_start_datetime'], '', 'MMM d, yyyy', '') ?]</logic:else> </logic:if> <logic:if test="$event['event_end_datetime']"> <logic:if test="formatDate($event['event_start_datetime']) != formatDate($event['event_end_datetime'])"> <logic:if test="formatDate($event['event_end_datetime'], 'yyyy') == date('Y')"> - [? formatDateTime($event['event_end_datetime'], '', 'MMM dd', '') ?] </logic:if> <logic:else>- [? formatDateTime($event['event_end_datetime'], '', 'MMM d, yyyy', '') ?]</logic:else> </logic:if> </logic:if> </td> </tr> </table> </logic:if>  <logic:if test="$templateRegionsShown['time'] && $event['event_start_datetime']"> <table border="0" width="100%"> <tr> <td width="30px" style="vertical-align: top;"> <standard:icon library="feather" iconstyle="standard" iconname="clock" style="width: 15px; height: 15px;" /> </td> <td width="auto"> [? formatDateTime($event['event_start_datetime'], '', '', 'h:mm a', false, true) ?] <logic:if test="formatDateTime($event['event_start_datetime'])"> <logic:if test="formatDateTime($event['event_start_datetime']) != formatDateTime($event['event_end_datetime'])"> - [? formatDateTime($event['event_end_datetime'], '', '', 'h:mm a', false, true) ?] </logic:if> </logic:if>  </td> </tr> </table> </logic:if>  <logic:if test="$templateRegionsShown['location'] && ($event['event_location_id'] != null)"> <logic:variable value="[? \Components\Marketing\Events\Locations::get($event['event_location_id']) ?]" as="eventLocation" /> <table border="0" width="100%"> <tr> <td width="30px" style="vertical-align: top;"> <standard:icon library="feather" iconstyle="standard" iconname="map-pin" style="width: 15px; height: 15px;" /> </td> <td width="auto">[? $eventLocation['event_location_description'] ?]</td> </tr> </table> </logic:if>  <logic:if test="$templateRegionsShown['price'] && \Components\Marketing\Events::getEventPrice($event['event_id'])"> <table border="0" width="100%"> <tr> <td width="30px" style="vertical-align: top;"> </td> <td width="auto"> <logic:if test="\Components\Marketing\Events::getEventPrice($event['event_id']) == 0">Free</logic:if> <logic:else>[?? \Components\Marketing\Events::renderEventPrice($event['event_id']) ??]</logic:else> </td> </tr> </table> <br /><br /> </logic:if>  <logic:if test="$templateRegionsShown['short_description'] && $event['event_description_short']"> <br /> <p> [?? $event['event_description_short'] ??] </p> <br /><br /> </logic:if>  <logic:if test="$templateRegionsShown['rsvp']"> <logic:variable as="eventRSVP" value="[?? \Components\Marketing\Events::canContactRSVPForEvent($event['event_id'], \Components\Customers\Contacts::currentContactId()) ??]" />  <logic:if test="$templateRegionsShown['rsvp_deadline'] && $eventRSVP['can_rsvp'] && $event['event_rsvp_deadline_datetime']"> <p>Registrations End: [? \Components\Marketing\Events::renderTime($event, $event['event_rsvp_deadline_datetime']) ?]</p> <br /><br /></logic:if> <logic:if test="$eventRSVP['can_rsvp']"> <br />  <templates:button variant="Classic" color="#d90f31" padding="10" borderRadius="0" href="" bgcolor="" border="2px solid #d90f31" href="/community/event-rsvp/?event_id=[? $event['event_id'] ?]">Register Here</templates:button> </logic:if> <logic:else test="!$eventRSVP['can_rsvp']"> <br /> <p style="text-align: center;">[? $eventRSVP['reason'] ?].</p> </logic:else> </logic:if> </div> </div>

Declared Variables

$event
['event_id']
['event_parent_id']
['event_sub_event_registration_mode']
['event_sub_event_registration_optional']
['event_sub_event_direct_rsvp_enabled']
['event_recurring_series_id']
['event_recurring_rule_id']
['event_recurring_occurrence_date']
['event_recurring_generation_key']
['event_recurring_is_detached']
['event_title']
['event_start_datetime']
['event_end_datetime']
['event_timezone']
['event_capacity']
['event_rsvp_deadline_datetime']
['event_capacity_restrictive']
['event_attendance_via_qrcode']
['event_location_id']
['event_description']
['event_custom_fields']
['event_allow_alternate_rsvp']
['event_allow_guest_rsvp']
['event_attendee_company_rsvp']
['event_linked_product']
['event_enable_product_order_options']
['event_linked_guest_product']
['event_ticket_bundles']
['event_attending_count']
['event_attending_checkedin_count']
['event_notattending_count']
['event_maybe_count']
['event_norsvp_count']
['event_allow_maybe_rsvp']
['event_requires_invitation']
['event_require_phone']
['event_guests_price']
['event_guests_custom_fields']
['event_uri_suffix']
['event_uri_suffix_is_overridden']
['event_search_title']
['event_search_title_is_overridden']
['event_search_description']
['event_search_description_is_overridden']
['event_search_keywords']
['event_search_keywords_is_overridden']
['event_search_noindex']
['event_search_nofollow']
['event_created_datetime']
['event_modified_datetime']
['event_require_address']
['event_require_dob']
['event_guests_require_registration']
['event_guests_require_email']
['event_guests_require_phone']
['event_guests_require_dob']
['event_icon']
['event_is_offline']
['event_cancelled_datetime']
['event_cancelled_message']
['event_rescheduled_datetime']
['event_previous_start_datetime']
['event_previous_end_datetime']
['event_rescheduled_message']
['event_calendar_sequence']
['event_external_rsvp_url']
['event_rsvp_disabled']
['event_description_short']

Common Tags

<logic:if>
<logic:else>
<standard:image>

.templateContainer--marketingEvents-list-custom { display: flex; justify-content: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; gap: 1.5rem; } .post-list--col { min-width: 250px; width: 31%; margin-bottom: 2rem; position: relative; text-align: left !important; cursor: pointer; border: 1px solid #ffffff; box-shadow: 0px 2px 20px rgb(226 226 226 / 50%); transition: .2s all; } .post-list--col:hover { box-shadow: 0px 2px 20px rgb(226 226 226 / 90%); } .post-list--col * { text-align: left !important; } span.subtitle { color: orange; text-transform: uppercase; font-size: .8rem; letter-spacing: 1px; font-weight: bold; } hr.accentLine { width: 20%; margin-left: 0; border-top: 3px solid #d90f31; margin-top: 1rem; margin-bottom: 2rem; transition: .2s ease; } .post-list--col:hover hr.accentLine { width: 35%; } @media (max-width: 900px) { .post-list--container, .templateContainer--websitePosts-list-custom, .templateContainer--websitePosts-list-default { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .post-list--col { width: 48% !important; } } @media (max-width: 500px) { .post-list--col { width: 100% !important; } } .post-list--img { width: 100%; height: 200px; overflow: hidden; } .post-list--col img { height: 200px; width: 100%; object-fit: cover; vertical-align: bottom; transition: 0.5s all; } .post-list--col:hover img { transform: scale(1.2); } .post-list--col:hover hr { width: 70px; } .post-list--col h3::before { display: none !important; }

Changes to Design template: AF Design - Events List

218506 Yesterday 9:08pm System Modified design template Restore	220307 Today 1:00am System Modified design template PART OF Find and Replace Undo

Html:

Design Id:

Component Class:

\Components\Marketing\Events

\Components\Marketing\Events

Id:

list

list

Default Variation:

Css:

.templateContainer--marketingEvents-list-custom {

	display: flex;

	justify-content: center;

	-webkit-box-orient: horizontal;

	-webkit-box-direction: normal;

	-ms-flex-flow: row wrap;

	flex-flow: row wrap;

	gap: 1.5rem;

}



.post-list--col {

	min-width: 250px;

	width: 31%;

	margin-bottom: 2rem;

	position: relative;

	text-align: left !important;

	cursor: pointer;

	border: 1px solid #ffffff;

	box-shadow: 0px 2px 20px rgb(226 226 226 / 50%);

	transition: .2s all;

}

.post-list--col:hover

{

	box-shadow: 0px 2px 20px rgb(226 226 226 / 90%);

}



.post-list--col * {

	text-align: left !important;

}



span.subtitle {

    color: orange;

    text-transform: uppercase;

    font-size: .8rem;

    letter-spacing: 1px;

    font-weight: bold;

}



hr.accentLine {

    width: 20%;

    margin-left: 0;

    border-top: 3px solid #d90f31;

    margin-top: 1rem;

    margin-bottom: 2rem;

    transition: .2s ease;

}



.post-list--col:hover hr.accentLine

{

	width: 35%;

}



@media (max-width: 900px) {

	.post-list--container,

	.templateContainer--websitePosts-list-custom,

	.templateContainer--websitePosts-list-default {

		display: grid !important;

		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

	}



	.post-list--col {

		width: 48% !important;

	}

}



@media (max-width: 500px) {



	.post-list--col {

		width: 100% !important;

	}

}



.post-list--img {

	width: 100%;

	height: 200px;

	overflow: hidden;

}



.post-list--col img {

	height: 200px;

	width: 100%;

	object-fit: cover;

	vertical-align: bottom;

	transition: 0.5s all;

}



.post-list--col:hover img {

	transform: scale(1.2);

}



.post-list--col:hover hr 

{

    width: 70px;

}



.post-list--col h3::before

{

	display: none !important;

}

.templateContainer--marketingEvents-list-custom {

	display: flex;

	justify-content: center;

	-webkit-box-orient: horizontal;

	-webkit-box-direction: normal;

	-ms-flex-flow: row wrap;

	flex-flow: row wrap;

	gap: 1.5rem;

}



.post-list--col {

	min-width: 250px;

	width: 31%;

	margin-bottom: 2rem;

	position: relative;

	text-align: left !important;

	cursor: pointer;

	border: 1px solid #ffffff;

	box-shadow: 0px 2px 20px rgb(226 226 226 / 50%);

	transition: .2s all;

}

.post-list--col:hover

{

	box-shadow: 0px 2px 20px rgb(226 226 226 / 90%);

}



.post-list--col * {

	text-align: left !important;

}



span.subtitle {

    color: orange;

    text-transform: uppercase;

    font-size: .8rem;

    letter-spacing: 1px;

    font-weight: bold;

}



hr.accentLine {

    width: 20%;

    margin-left: 0;

    border-top: 3px solid #d90f31;

    margin-top: 1rem;

    margin-bottom: 2rem;

    transition: .2s ease;

}



.post-list--col:hover hr.accentLine

{

	width: 35%;

}



@media (max-width: 900px) {

	.post-list--container,

	.templateContainer--websitePosts-list-custom,

	.templateContainer--websitePosts-list-default {

		display: grid !important;

		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

	}



	.post-list--col {

		width: 48% !important;

	}

}



@media (max-width: 500px) {



	.post-list--col {

		width: 100% !important;

	}

}



.post-list--img {

	width: 100%;

	height: 200px;

	overflow: hidden;

}



.post-list--col img {

	height: 200px;

	width: 100%;

	object-fit: cover;

	vertical-align: bottom;

	transition: 0.5s all;

}



.post-list--col:hover img {

	transform: scale(1.2);

}



.post-list--col:hover hr 

{

    width: 70px;

}



.post-list--col h3::before

{

	display: none !important;

}