Events Feed Module
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 after version 2.2 with the custom Links settings. You can simply set the More Info button to link to the event website instead.
But sometimes you may want to show BOTH the website link and the single event page link, so you may want to style the Website link as a button to match the More Info button. For that, you can easily use some CSS to style the website link as a button.
BEFORE
AFTER
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 .decm_weburl 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 .decm_weburl 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>Events Page Module
To do this same thing with the website link in the Events Page, the code is different from the Events Feed. You can use the snippet below as the base and customize it however you want.
/*style the link to look like a button*/
.et-db #et-boc .et-l .diec_event_page_0_tb_body p.ecs-weburl 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*/
.et-db #et-boc .et-l .diec_event_page_0_tb_body p.ecs-weburl a:hover {
color: #0048FF!important;
background-color: #ffffff!important;
}