Divi Events Calendar

Documentation & Support

Docs » Divi Events Calendar » How To Style The Event Website Link As A Button

How To Style The Event Website Link As A Button

Sometimes users ask me how to link from the Events Feed module directly to the event website rather than the default single event page which is created by The Events Calendar. This is easy to do because they already have a field called “Website” and our modules show this link already. So all you need to do is turn off the “More Info” button in the module settings and make sure the “Website” link is turned on. Then, just style the website link as a button using the CSS snippet provided below and it looks great.

Before

before styling the event website link as a button

After

after styling the event website link as a button

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*provide some top and bottom spacing to the button*/

.ecs-weburl {
	margin: 1.5em 0
}


/*hide the icon*/

.ecs-weburl:before {
	display: none;
}


/*hide the label*/

.ecs-weburl .ecs-detail-label {
	display: none;
}


/*style the link to look like a button*/

.decm-show-detail-center p a {
	color: #FFFFFF!important;
	border: 2px solid #0048FF;
	border-radius: 50px;
	font-size: 20px;
	font-weight: bold!important;
	background-color: #0048FF!important;
	padding: 0.5em 1em;
  transition: all ease 0.3s;
}


/*style the link to look like a button on hover*/

.decm-show-detail-center p a:hover {
	color: #0048FF!important;
	background-color: #ffffff!important;
}

If you are showing the event excerpt, then it may not look right to have the button above the excerpt. To move it to the bottom, you will need to use jQuery, and I have created a snippet below that will do exactly that.

If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

<script>
	jQuery(document).ready(function(){
    jQuery(".ecs-weburl").each(function(){
        jQuery(this).parent().siblings(".ecs-excerpt").detach().insertBefore(this);
    })
})
</script>

Last updated Sep 13, 2021 @ 10:37 pm

Get Support

Have a question? Something not going well? I am happy to help!


Pin It on Pinterest

0

Your Cart