MEC Events list page CSS help

[brinkleyr]

On the individual listings on an Events display page is there any way to center the View Detail button and use the X-theme buttons and style? I’ve successfully removed the share icons with the following CSS:

.mec-event-sharing-wrap .mec-event-share {
display: none !important;
}

but can’t seem to work out the rest.

See https://dev.zebulonpike.coloradodar.org/program-calendar/ for an example

[christian]

Hey Roger,

Please use this CSS to center the button and copy the button style.

.mec-event-grid-clean .mec-event-footer .mec-booking-button {
    right: 50%;
    transform: translateX(50%);
    width: 119px;
    color: #fff;
    border-color: #282b2d;
    background-color: rgb(0,73,144);
    margin-bottom: 0.25em;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    box-shadow: 0 0.25em 0 0 rgb(0,35,75), 0 4px 9px rgba(0,0,0,0.75);
    border-radius: 100em;
}

.mec-event-grid-clean .mec-event-footer .mec-booking-button:hover {
    color: #fff;
    border-color: #141516;
    background-color: rgb(225,58,62);
    margin-bottom: 0.25em;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    box-shadow: 0 0.25em 0 0 rgb(120,26,31), 0 4px 9px rgba(0,0,0,0.75);
}

Thanks.

[brinkleyr]

That worked. Thanks

[rad]

You’re most welcome!