Customising Button CSS Events+

Hi Guys

I would like to change the default styling of the View Event button on my site located at http://www.roberttownvillage.org.uk to be as per the button on the following page that I have set up as an example;

http://www.roberttownvillage.org.uk/wpmu

I have Custom CSS installed and support access is granted. Screenshot attached.

Many Thanks

Wayne

  • Jack Kitterhing
    • Code Norris

    Hi there @wayne,

    Hope you’re well today! :slight_smile:

    Do you want the calendar icon? Without the calendar icon, this will be quite simple, as it’s mostly colors and font, with the calendar icon, we’ll have to add the extra class to the plugin, as it appears that’s part of a shortcode builder?

    If you do want the calendar icon, can you send me through the following please? :slight_smile:

    – In the subject field add “Attn: Jack Kitterhing”

    – Link back to this thread

    – Include admin/network access

    – Include FTP

    – Include any relevant URLS for your site

    On the contact form, select “I have a different question“, this ensures it comes through and gets assigned to me.

    Contact Us

    Thank you!

    Kind Regards

    Jack.

  • DavidM
    • DEV MAN’s Mascot

    Hi Wayne,

    Thanks for clarifying that. Since you’re using the calendar template, I don’t really have an easy way to test this but I believe the following should do the trick:

    a.wpmudevevents-viewevent {
    font-family: 'Raleway',Arial !important;
    font-size: 12px;
    line-height: 14px;
    font-weight: 900;
    text-transform: uppercase;
    color: white;
    border: 3px solid #19B5FE;
    background-color: #19B5FE;
    padding: 6px 14px;
    margin-bottom: 20px;
    margin-right: 10px;
    cursor: pointer;
    transition: all 300ms ease-out;
    -webkit-transition: all 300ms ease-out;
    text-decoration: none;
    border-radius: 3px;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.2);
    }

    a.wpmudevevents-viewevent:hover {
    color: #19B5FE;
    background-color: white;
    }

    Could you let us know how that works for you?

    Thanks,

    David

  • aristath
    • Recruit

    Hello again @wayne,

    Thank you for granting us access, it really made things easier.

    I think I fixed that for you…

    The new CSS looks like this:

    body a.wpmudevevents-viewevent {
    text-decoration: none !important;
    font-family: 'Raleway',Arial !important;
    font-size: 12px;
    line-height: 14px;
    font-weight: 900;
    text-transform: uppercase;
    color: white;
    border: 3px solid #19B5FE;
    background-color: #19B5FE;
    background: #19B5FE;
    padding: 6px 14px;
    margin-bottom: 20px;
    margin-right: 10px;
    cursor: pointer;
    transition: all 300ms ease-out;
    -webkit-transition: all 300ms ease-out;
    text-decoration: none;
    border-radius: 3px;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.2);
    background-image: none;
    text-shadow: none;
    }

    body a.wpmudevevents-viewevent:hover {
    color: #19B5FE;
    background-color: white;
    background: #fff;
    background-image: none;
    }

    I hope that helps!

    Cheers,

    Ari.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.