Edit Dynamic Template

<div class="event-list-boxy" itemscope itemtype="http://schema.org/Event">  <logic:if test="$templateRegionsShown['icon'] && $event['event_icon']" evaluateat="render"> <div class="event-list-boxy-icon"> <div class="event-list-boxy-category"> <logic:variable as="arrCategories" value="[? \Components\Marketing\Events\Categories::getAllForEvent($event['event_id']) ?]" /> <data:repeater id="event_category_repeater" datasource="$arrCategories" as="arrCategory"> <a style="pointer-events: none"><small>[? \Components\Marketing\Events\Categories::getColumn($arrCategory['event_category_id'], 'event_category_title')?]</small></a> </data:repeater> </div> <standard:image width="100%" src="[? $event['event_icon'] ?]" alt="[? $event['event_title'] ?]" maintainAspect="crop" height="200" style="border-radius: 5px;" /> </div> </logic:if> <div style="padding: 20px 30px 20px 30px;"> <a style="pointer-events: none"><hr class="event-list-boxy-accent" /></a> <h3 style="text-align: left;">[?? $event['event_title'] ??]</h3>  <table> <logic:if test="$templateRegionsShown['date'] && $event['event_start_datetime']"> <logic:if test="$templateRegionsShown['date'] && $event['event_start_datetime']"> <tr> <td style="vertical-align: top; width: 30px"> <standard:icon library="feather" iconstyle="standard" iconname="calendar" style="width: 18px; height: 18px;" /> </td> <td width="auto"> <time itemprop="startDate" datetime="[? date_format(date_create($event['event_start_datetime']), 'Y-m-d\TH:i:s') ?]">[? \Components\Marketing\Events::renderTime($event, $event['event_start_datetime'], null, '') ?]</time> <logic:if test="$event['event_end_datetime'] && \Components\Marketing\Events::renderTime($event, $event['event_start_datetime'], 'MMM d', '') != \Components\Marketing\Events::renderTime($event, $event['event_end_datetime'], 'MMM d', '')"> - <time itemprop="endDate" datetime="[? date_format(date_create($event['event_end_datetime']), 'Y-m-d\TH:i:s') ?]">[? \Components\Marketing\Events::renderTime($event, $event['event_end_datetime'], null, '') ?]</time> </logic:if> </td> </tr> </logic:if>  <logic:if test="$templateRegionsShown['time']"> <tr> <td style="vertical-align: top; width: 30px"> <standard:icon library="feather" iconstyle="standard" iconname="clock" style="width: 18px; height: 18px;" /> </td> <td width="auto"> <time itemprop="startDate" datetime="[? date_format(date_create($event['event_start_datetime']), 'Y-m-d\TH:i:s') ?]">[? \Components\Marketing\Events::renderTime($event, $event['event_start_datetime'], '') ?]</time> <logic:if test="$event['event_end_datetime']"> - <time itemprop="endDate" datetime="[? date_format(date_create($event['event_end_datetime']), 'Y-m-d\TH:i:s') ?]">[? \Components\Marketing\Events::renderTime($event, $event['event_end_datetime'], '') ?]</time> </logic:if> </td> </tr> </logic:if> </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" /> <tr> <td style="vertical-align: top; width:30px;"> <standard:icon library="feather" iconstyle="standard" iconname="map-pin" style="width: 18px; height: 18px;" /> </td> <td itemprop="location" itemscope itemtype="http://schema.org/Place"> <span itemprop="name">[? $eventLocation['event_location_description'] ?]</span> </td> </tr> </logic:if>  <logic:if test="$templateRegionsShown['price'] && \Components\Marketing\Events::getEventPrice($event['event_id'])"> <tr> <td style="vertical-align: top; width:30px;"> <standard:icon library="feather" iconstyle="standard" iconname="dollar-sign" style="width: 18px; height: 18px;" /> </td> <td> <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> </logic:if>  <logic:if test="$templateRegionsShown['places_available'] && $event['event_capacity']"> <tr> <td style="vertical-align: top; width:30px;"> <standard:icon library="fontawesome" iconstyle="solid" iconname="users" style="width: 18px; height: 18px;" /> </td> <td>[? $event['event_capacity'] - $event['event_attending_count'] ?] Places Remaining</td> </tr> </logic:if> </table>  <logic:if test="$templateRegionsShown['short_description'] && $event['event_description_short']"> <br /> <p itemprop="description">[?? $event['event_description_short'] ??]</p> </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']"> Sign up before <time itemprop="rsvpResponseDueDate" datetime="[? date_format(date_create($event['event_rsvp_deadline_datetime']), 'Y-m-d\TH:i:s') ?]">[? \Components\Marketing\Events::renderTime($event, $event['event_rsvp_deadline_datetime']) ?]</time> </logic:if> <logic:if test="$eventRSVP['can_rsvp']"> <br /><br /><br /><br /> <a class="event-list-boxy-button" href="/community/event-rsvp/?event_id=[? $event['event_id'] ?]">View Details</a> </logic:if> <logic:else test="!$eventRSVP['can_rsvp']"> <br /> <p style="text-align: center;"><small>[? $eventRSVP['reason'] ?].</small></p> </logic:else> </logic:if> </div> <a class="event-floating-link" href="/community/event-rsvp/?event_id=[? $event['event_id'] ?]" target="[? $event['event_external_rsvp_url'] ? '_blank' : '_self' ?]"></a> </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 { background-color: transparent; position: relative; min-height: 200px; display: grid; grid-template-columns: 1fr; align-items: stretch; overflow: visible; width: 100%; text-align: left; gap: 20px; /* Medium to small screens: two items per row */ @media (min-width: 576px) { grid-template-columns: repeat(2, 1fr); } /* Large screens: three items per row */ @media (min-width: 992px) { grid-template-columns: repeat(3, 1fr); } } .event-list-boxy { min-width: 250px; position: relative; background-color: #ffffff; padding: 0; margin: 0; border-radius: 10px; box-shadow: 0px 3px 20px rgb(0 0 0 / 10%); & .event-list-boxy-icon img { border-bottom-left-radius: 0px !important; border-bottom-right-radius: 0px !important; } & .event-list-boxy-category { position: absolute; top: 20px; right: 30px; & a { background: currentColor; padding: 2px 8px; font-size: 0.7rem; font-weight: bold; text-transform: uppercase; display: inline-block; margin-bottom: 10px; & small { color: #ffffff; } } } & .event-floating-link { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } & .event-list-boxy-accent { width: 40px; margin-left: 0; border: none; border-top: 3px solid currentColor; transition: width .5s; } &:hover { & .event-list-boxy-accent { width: 55px; } } & .event-list-boxy-button { position: absolute; bottom: 30px; left: 30px; text-align: center; background-color: ''; border: 1px solid currentColor; border-radius: 0px; padding: 10px; } }

Changes to Design template: Design #1 - Events List

Today
1:00am 220301

System
Modified design template

Yesterday
8:50pm 218174

Kim Guevarra
Created design template

218174 Yesterday 8:50pm Guevarra, Kim Created design template Restore	220301 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

{

	background-color: transparent;

	position: relative;

	min-height: 200px;

	display: grid;

	grid-template-columns: 1fr;

	align-items: stretch;

	overflow: visible;

	width: 100%;

	text-align: left;

	gap: 20px;



	/* Medium to small screens: two items per row */

	@media (min-width: 576px)

	{

		grid-template-columns: repeat(2, 1fr);

	}



	/* Large screens: three items per row */

	@media (min-width: 992px)

	{

		grid-template-columns: repeat(3, 1fr);

	}

}



.event-list-boxy

{

	min-width: 250px;

	position: relative;

	background-color: #ffffff;

	padding: 0;

	margin: 0;

	border-radius: 10px;

	box-shadow: 0px 3px 20px rgb(0 0 0 / 10%);



	& .event-list-boxy-icon img

	{

		border-bottom-left-radius: 0px !important;

		border-bottom-right-radius: 0px !important;

	}



	& .event-list-boxy-category

	{

		position: absolute;

		top: 20px;

		right: 30px;



		& a

		{

			background: currentColor;

			padding: 2px 8px;

			font-size: 0.7rem;

			font-weight: bold;

			text-transform: uppercase;

			display: inline-block;

			margin-bottom: 10px;



			& small

			{

				color: #ffffff;

			}

		}

	}



	& .event-floating-link

	{

		position: absolute;

		top: 0;

		left: 0;

		right: 0;

		bottom: 0;

		width: 100%;

		height: 100%;

	}



	& .event-list-boxy-accent

	{

		width: 40px;

		margin-left: 0;

		border: none;

		border-top: 3px solid currentColor;

		transition: width .5s;

	}



	&:hover

	{

		& .event-list-boxy-accent

		{

			width: 55px;

		}

	}



    & .event-list-boxy-button

    {

        position: absolute;

        bottom: 30px;

        left: 30px;

        text-align: center;

        background-color: '';

        border: 1px solid currentColor;

        border-radius: 0px;

        padding: 10px;

    }

}

.templateContainer--marketingEvents-list-custom

{

	background-color: transparent;

	position: relative;

	min-height: 200px;

	display: grid;

	grid-template-columns: 1fr;

	align-items: stretch;

	overflow: visible;

	width: 100%;

	text-align: left;

	gap: 20px;



	/* Medium to small screens: two items per row */

	@media (min-width: 576px)

	{

		grid-template-columns: repeat(2, 1fr);

	}



	/* Large screens: three items per row */

	@media (min-width: 992px)

	{

		grid-template-columns: repeat(3, 1fr);

	}

}



.event-list-boxy

{

	min-width: 250px;

	position: relative;

	background-color: #ffffff;

	padding: 0;

	margin: 0;

	border-radius: 10px;

	box-shadow: 0px 3px 20px rgb(0 0 0 / 10%);



	& .event-list-boxy-icon img

	{

		border-bottom-left-radius: 0px !important;

		border-bottom-right-radius: 0px !important;

	}



	& .event-list-boxy-category

	{

		position: absolute;

		top: 20px;

		right: 30px;



		& a

		{

			background: currentColor;

			padding: 2px 8px;

			font-size: 0.7rem;

			font-weight: bold;

			text-transform: uppercase;

			display: inline-block;

			margin-bottom: 10px;



			& small

			{

				color: #ffffff;

			}

		}

	}



	& .event-floating-link

	{

		position: absolute;

		top: 0;

		left: 0;

		right: 0;

		bottom: 0;

		width: 100%;

		height: 100%;

	}



	& .event-list-boxy-accent

	{

		width: 40px;

		margin-left: 0;

		border: none;

		border-top: 3px solid currentColor;

		transition: width .5s;

	}



	&:hover

	{

		& .event-list-boxy-accent

		{

			width: 55px;

		}

	}



    & .event-list-boxy-button

    {

        position: absolute;

        bottom: 30px;

        left: 30px;

        text-align: center;

        background-color: '';

        border: 1px solid currentColor;

        border-radius: 0px;

        padding: 10px;

    }

}