How to make event listing work?

I’m basing myself on the Airid Pro “band” demo and trying to list events, but I could not make it look the same. I installed the “The Events Calendar” plugin and I’m editing everything with the Elementor. But it’s not getting anywhere near the “band” demo. What’s the right way? I did not find it in the tutorials.

Hello,

I would be glad to help you, but I’m not sure what exactly is your issue. Can you please provide a link to your website and some explanatory screenshots?

Kind Regards, Roman.
aThemes Support

Hello, I’m trying to solve it and I have not succeeded yet. I’m showing a print of how the part that shows the events is.
What is the right plugin to control events? Maybe what I’m using does not work well with the theme.

Hello, thank you for the screenshot.

But can you please provide a link to your website as well?

Kind Regards, Roman.
aThemes Support

Hi,

yes, here: https://mayogax.com/

Hello, thank you for the link.

Can you please disable caching/minification, leave it disabled to let me check the CSS files, and leave here a note?

Kind Regards, Roman.
aThemes Support

I’ve disabled.

And now?

Thanks

Hello, thank you.

It looks like you haven’t imported the Airi Band demo content, so please add this CSS code in Customize → Additional CSS section:

.elementor-widget-container .tribe-list-widget {
	list-style: none;
	padding: 0;
	margin: 0;
}
.elementor-widget-container .tribe-list-widget li {
	padding: 30px;
	margin-bottom: 10px;
	background-color: rgba(255,255,255,0.05);
	display: flex;
	align-items: center;
}
.elementor-widget-container .tribe-list-widget h4 a {
	color: #fff;
}
.elementor-widget-container .tribe-list-widget .atu-event-venue,
.elementor-widget-container .tribe-list-widget .tribe-event-duration {
	float: left;
	color: #bfbfbf;
	text-transform: uppercase;
	font-size: 14px;
}
.elementor-widget-container .tribe-list-widget .atu-event-venue::before,
.elementor-widget-container .tribe-list-widget .tribe-event-duration::before {
	font-family: Fontawesome;
	color: #e633ba;
}
.elementor-widget-container .tribe-list-widget .atu-event-venue::before {
	content: '\f041';
}
.elementor-widget-container .tribe-list-widget .atu-event-venue {
	margin-right: 20px;
}
.elementor-widget-container .tribe-list-widget .tribe-event-duration::before {
	content: "\f073";
}
.elementor-widget-container .events-inner {
	flex: 1;
}
.elementor-widget-container .tribe-list-widget .button {
	border-radius: 35px;
	background-color: transparent;
	border-color: #e633ba;
}
.elementor-widget-container .tribe-list-widget .button:hover {
	background-color: #e633ba;
}
.atu-agency-video img {
	display: none !important;
}
.atu-agency-video .eicon-play {
	font-size: 62px;
}
.atu-agency-video .elementor-custom-embed-image-overlay {
	height: 60px;
}
.gallery {
	margin: 0;
}
.atu-band-sub {
	text-align: center;
}
.atu-band-sub input[type="email"] {
	background-color: rgba(255,255,255,0.1);
	border: 0;
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
	max-width: 440px;
	width: 100%;
	padding-top: 13px;
	padding-bottom: 13px;
}
.atu-band-sub input[type="submit"] {
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
	margin-left: -10px;
	padding-bottom: 12px;
}
.atu-band-sub input[type="submit"]:hover {
	color: #fff;
}

@media ( max-width: 800px ) {
	.atu-band-sub input[type="email"] {
		border-radius: 30px;
		text-align: center;
	}
	.atu-band-sub input[type="submit"] {
		border-radius: 30px;
			margin-top: 15px;
	}
.elementor-widget-container .tribe-list-widget li {
		display: block;
	}
	.atu-events-button .button {
		display: table;
		margin-top: 15px;
	}
}

/* Contact page map */
.contact-page-map #atu-map {
	height: 400px;
}
.contact-page-form label,
.contact-page-form input:not(.wpcf7-submit),
.contact-page-form select {
	width: 100%;
	max-width: 100%;
}
.contact-page-form select {
	padding: 17px 20px;
}
.contact-page-form .wpcf7-submit {
	width: auto;
	margin: 0 auto;
	display: table;
	border-radius: 30px;
	box-shadow: 0 5px 35px 0 rgba(51, 51, 51, 0.26);
}
.contact-page-form .row {
	margin-bottom: 10px;
}

/* Footer widgets */
.footer-widgets {
	background-color: #06081c;
	padding-top: 35px;
	padding-bottom: 35px;
}
#menu-quick-links li {
	display: inline-block;
	font-size: 14px;
	padding: 5px 0;
}
#menu-quick-links li a {
	color: #4a5075;
}
#menu-quick-links li::after {
	content: '|';
	padding: 0 20px;
	color: #4a5075;
}
#menu-quick-links li:last-of-type::after {
	display: none;
}
.footer-widgets ul.social-media-list li a::before {
	width: 45px;
	height: 45px;
	line-height: 45px;
	background: transparent;
	border: 2px solid rgba(255,255,255,0.1);
}
.footer-widgets ul.social-media-list li a:hover:before {
	background-color: #e633ba;
}
.site-info {
	text-align: center;
}
.elementor-image-gallery .gallery-item {
	vertical-align: bottom;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.
aThemes Support

How strange, I used the tool to import the demo. But now it’s working, thank you. I have a question about pagination, do I post this or better open a new topic?

Hello,

I used the tool to import the demo. But now it’s working, thank you.

Okay, it’s great that it works now, you are welcome!

I have a question about pagination, do I post this or better open a new topic?

Please create a new topic to keep the forum in good order and make it easier to help you.

Kind Regards, Roman.
aThemes Support