Events+ looks a little bland on my theme compared to your video

Ok so I saw the events+ video, the layout of the events archive looks great on it, with thumbnails beside each event etc, but after installing it, it looks a little bland.

How do I:
1. Change the title that says 'Events'?
2. Display a thumbnail against each event on the archive page?
3. Do you have event+ templates on any of your other themes that I could use?

  • Tyler Postle

    Hey vmodha,

    Hope you're doing well today!

    It looks like the video has the plugin using the theme archive template, you can change this too :slight_smile:

    Just go to:

    Events+ > Settings > Appearance Settings.

    For Archive Template choose your preferred template.

    The one you have now is just the plugin: default.

    1. Change the title that says 'Events'?

    We can use our Ultimate Branding Network Wide Text Change module to do this. Activate it then add "Events" to it and change it to whatever you like.

    Screenshot attached.

    2. Display a thumbnail against each event on the archive page?

    Have you added a featured image to the event? If you switch to your theme template and it supports thumbnails/featured images on the archive then you can try that out :slight_smile:

    3. Do you have event+ templates on any of your other themes that I could use?

    Not at this time, I would try out your included theme templates first. If you ever really need a custom one done, then you can post that on our jobs board: https://premium.wpmudev.org/wordpress-development/

    That way you can work with a talented(non-staff) member of the community on it :slight_smile:

    Hope this helps!

    Let us know if you have any further questions.

    All the best,
    Tyler

  • Tyler Postle

    Hey there vmodha,

    Hope you're doing well today thanks for your reply!

    I'm guessing those lost their styling when you chose your theme template right? Well we can add it back in by copying and pasting this into your custom css sheet :slight_smile:

    a.wpmudevevents-yes-submit, input.wpmudevevents-yes-submit {
    float: center;
    color: #75ab24;
    cursor: pointer;
    display: inline-block;
    background-color: #e6e6e6;
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
    background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
    padding: 5px 9px 6px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    line-height: normal;
    border: 1px solid #ccc;
    border-bottom-color: #bbb;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -webkit-transition: 0.1s linear all;
    -moz-transition: 0.1s linear all;
    -ms-transition: 0.1s linear all;
    -o-transition: 0.1s linear all;
    transition: 0.1s linear all;
    text-decoration: none;
    }
    
    a.wpmudevevents-maybe-submit, input.wpmudevevents-maybe-submit {
    float: center;
    color: #bd8728;
    cursor: pointer;
    display: inline-block;
    background-color: #e6e6e6;
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
    background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
    padding: 5px 9px 6px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    line-height: normal;
    border: 1px solid #ccc;
    border-bottom-color: #bbb;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -webkit-transition: 0.1s linear all;
    -moz-transition: 0.1s linear all;
    -ms-transition: 0.1s linear all;
    -o-transition: 0.1s linear all;
    transition: 0.1s linear all;
    text-decoration: none;
    }
    
    a.wpmudevevents-no-submit, input.wpmudevevents-no-submit {
    float: center;
    color: #bd3328;
    cursor: pointer;
    display: inline-block;
    background-color: #e6e6e6;
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
    background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
    padding: 5px 9px 6px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    line-height: normal;
    border: 1px solid #ccc;
    border-bottom-color: #bbb;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -webkit-transition: 0.1s linear all;
    -moz-transition: 0.1s linear all;
    -ms-transition: 0.1s linear all;
    -o-transition: 0.1s linear all;
    transition: 0.1s linear all;
    text-decoration: none;
    }
    
    a.wpmudevevents-viewevent {
    float: right;
    color: #75ab24;
    cursor: pointer;
    display: inline-block;
    background-color: #e6e6e6;
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
    background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
    padding: 5px 14px 6px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    line-height: normal;
    border: 1px solid #ccc;
    border-bottom-color: #bbb;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -webkit-transition: 0.1s linear all;
    -moz-transition: 0.1s linear all;
    -ms-transition: 0.1s linear all;
    -o-transition: 0.1s linear all;
    transition: 0.1s linear all;
    text-decoration: none;
    }

    If you don't have a custom CSS sheet then use this plugin here: https://wordpress.org/plugins/simple-custom-css/

    That should do the trick :slight_smile: you may want to change some of those styles. Up to you.

    Let us know if you need any further assistance.

    All the best,
    Tyler

  • Predrag Dubajic

    Hi @vmodha,

    My apologies for the delay on this thread.

    If you want to change the order only by using CSS code it might be a bit tricky depending on how you want to order them.
    Here is a CSS code you can add that will reorder them in this way:
    I'm Attending No Maybe

    .wpmudevevents-no-submit {
    	float: none!important;
    	margin: 0 10px;
    }
    
    .wpmudevevents-maybe-submit {
    	float: none!important;
    }

    If you want a different order please let me know what it is and I will figure something out for you :slight_smile:

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.