Widget For Eventbrite API

Demo for Widget For Eventbrite API plugin

Custom Grid Layout

by

With a bit of CSS you can make your layouts unique to your design, in this example I have added a bit on animation, changed the number of columns, and tweaked the colors

To start with I have wrapped the I have wrapped the shortcode with an html div with a class of ‘custom1’ so I can make css changes without impacting my other examples. I have hidden the excerpt and set the book now text, and link directly to the ticket screen.

<div class="custom1">
[wfea layout="grid" newtab="true"
 tickets="true" limit="99999" excerpt="false"
 booknow_text="BUY TICKETS"]
</div>

Now for styling: using css I will color the background to black and the text to white and force uppercase, tweak the entry meta section text size and padding and the CTA button height.

.custom1 section.wfea.grid  .entry-meta {
	border: none;
	color: #fff;
	font-size: 75%;
	padding-left:5px;
}
.custom1 .post, .custom1 .entry-header,
 .custom1 .booknow, .custom1 button {
	background-color: #000;
}
.custom1 .entry-header p, .custom1 .entry-header a {
	color: #fff;
}
.custom1 section.wfea  button {
	color: #e7e535;
	text-align: left;
	margin-bottom: 0;
}
.custom1 .booknow {
	line-height: 1;
}

Also let us remove the top date – just leaving the lower date and time.

.custom1 .entry-header time {
	display: none;
}

Now, to change the number of columns, you will need to work out your own media break points based on your own theme. Here I am going from 5 columns, to 3 columns, to 2 columns, to 1 column

.custom1 section.wfea.grid {
        grid-template-columns: repeat(5,1fr);
grid-gap: 30px 15px;
}
@media only screen and (max-width: 1200px) {
	.custom1 section.wfea.grid {
	grid-template-columns: repeat(3,1fr);
	}
}
@media only screen and (max-width: 1024px) {
	.custom1 section.wfea.grid {
	grid-template-columns: repeat(2,1fr);
	}
}
@media only screen and (max-width: 600px) {
	.custom1 section.wfea.grid {
	grid-template-columns: repeat(1,1fr);
	}
}

Then lets add some animation, I’m going to make the individual post move up on hover, and also add an arrow on the CTA button

.custom1 .post:hover {
	margin-top: -20px;
	transition: margin 600ms;
}
.custom1 .post {
	margin-top: 0px;
	transition: margin 600ms;
	text-transform: uppercase;
}
.custom1 section.wfea .booknow button:after {
	content: '\2192';
	opacity: 0;
    transition: all 500ms;
}
.custom1 section.wfea .booknow button:hover::after {
	opacity: 1;
	padding-left: 1em;
	transition: all 500ms;
}

And below is the final output, so with some CSS and a bit of experimenting you can create your own unique look.