How to style an Events+ event page

Hi,

I need to make some changes to the appearance of event posts and the event index page. Your assistance will be very much appreciated. There are some lines of information that I want to stop from appearing, there are some style and colour issues I want to address, and for some reason, the body text in Events+ event posts are not assuming the site's primary brand font, Merriweather. They are reverting to Arial, for some reason. I need this rectified. Headings seem to be OK. They are taking on the Alice font as expected. But the same isn't happening for the body.

Here are my specific requirements. Hopefully I'm providing enough detail of my requirements.

Using this event page as an example http://secretsunday.wpengine.com/events/2015/05/sunday-lunch-on-31st-may-2015/ I need to make the following changes to the appearance of the event:

I do not want the post metadata to show under the title of the event, so I need to know how to omit the post author/username, the date the entry was made, and the words, "Leave a comment".

I also do not want to give users the opportunity to "See who has RSVPed", so I need to know how to stop that from appearing.

I need styling control over the three buttons No/Maybe/I'm attending. At the moment, I presume because of the global button styling that I have created with the X Theme, when hovering over a button, the link text turns white (which means it can't be seen against the background). I need to being able to control the colour of the text in both standard and hover states.

I want to omit line of text showing the breadcrumbs OR at the very least, make sure it assumes the same font style as the rest of the body text on the site, which is Merriweather. Preferably this line of information will be deleted completely from the post though.

I need to omit the the small profile icon, plus line of text saying, "Created by wearesmarticle"

Again, the line of text that says, "Takes place on... " needs to assume the site's global font, Merriweather (instead of Arial, as it is now).

And the main body text of the post, i.e. the menu section, must also assume the site's primary body font, Merriweather.

With regard to the page at http://secretsunday.wpengine.com/events/ I need the following changes:

Again, NO metadata showing on the event.

Omit the words "View event" from the short excerpt text.

I think that's it for now. Look forward to hearing from you.

  • Patrick

    Hi there @Mark Hare

    I hope you're having a great day!

    Yep, all that can be done with a bit of CSS lovin' and some plugin options.

    To remove the post metadata (on both page types), breadcrumbs & Created by, add the following CSS:
    .single-incsub_event .p-meta, .single-incsub_event #event-bread-crumbs, .single-incsub_event #wpmudevevents-user, .post-type-archive-incsub_event .p-meta {display:none;}

    As for the font issue, the following CSS should fix that right up:
    #wpmudevevents-wrapper {font:100%/2.3em "Merriweather","Helvetica Neue",Helvetica,sans-serif;}

    But it looks like you found the right selectors to use for the No/Maybe/I'm attending button hovers, as I see the text just fine on hover in color: #793e3e

    To remove the See who has RSVPed, simply uncheck the box in the plugin settings (1st screenshot).

    Does that cover everything?

  • Mark Smarticle

    Hey Patrick,

    Thanks for getting back to me and providing some answers.

    The first bit of code did it's job... Spot on!

    However, the second bit of code to bring the body font back to Merriweather, didn't work. It didn't seem to change anything.

    As for the buttons, no, I haven't done anything to sort those yet... But you prompted me to dig a bit further. On Chrome (which is my default browser), the button text font appears to be Merriweather, which, upon hover, turns white and can barely be seen against the background. However, on both Firefox and Safari, the font is Arial, but the hover state of the text is, like you say, #793e3e. Strange. Any thoughts? Would be so kind as to check that your end, just in case it's a caching issue or something? But...

    Having reviewed my requirements again (and having converted it to a paid event, which I forgot first time around), I would actually like to eliminate the "No" and "Maybe" buttons completely, then change the text on the "I'm attending" button to "Attend the event" that, when pressed, displays the PayPal screen. And this brings me to the font issue...

    The body font hasn't changed with that bit of code you sent and, now that I have made it a paid event, I can see that Arial is also in use on the PayPal screen and in the box that says, "Excellent! We've got you marked as coming..."

    For starters, I'd like to eliminate the box that says, "Excellent! We've got you marked as coming..." and I'd also like the previously pressed button, "I'm attending" to disappear once the PayPal option shows up.

    If the above functionality is too much of a problem then, worse case scenario, I'd like to eliminate the buttons completely and simply have the PayPal option showing all the time. Although I need to be able to edit the text that sits alongside the payment elements.

    Finally, as previously stated, the main body of the post is still Arial, so I need another fix for that, so that it displays as Merriweather. But I'd also like to either, a) eliminate the two icons, the first of which is a calendar next to the text that says, "Take place on... The second of which is coins next to "GBP 30.00" Or b) have the ability to replace those icons with my own theme icons using the shortcodes. Either option is fine. Oh, and I'd like to change the letters, "GBP" to an actual pound sign (£) too, please.

    Thanks again for your help, Patrick. Look forward to hearing from you.

    Kind regards,

    Mark

  • Ash

    Hello @Mark

    I hope you are well today.

    However, the second bit of code to bring the body font back to Merriweather, didn't work. It didn't seem to change anything.

    The correct code of Patrick should be:

    #wpmudevevents-wrapper {font:100%/2.3em "Merriweather","Helvetica Neue",Helvetica,sans-serif;}

    But if it doesn't work, would you please post a screenshot of which part you want to change the font?

    As for the buttons, no, I haven't done anything to sort those yet... But you prompted me to dig a bit further. On Chrome (which is my default browser), the button text font appears to be Merriweather, which, upon hover, turns white and can barely be seen against the background. However, on both Firefox and Safari, the font is Arial, but the hover state of the text is, like you say, #793e3e. Strange. Any thoughts? Would be so kind as to check that your end, just in case it's a caching issue or something? But...

    I think this is the browser cache of chrome, would you please clear cache and check again?

    a) eliminate the two icons, the first of which is a calendar next to the text that says, "Take place on... The second of which is coins next to "GBP 30.00"

    Please try the following css:

    .wpmudevevents-date, .wpmudevevents-price{
    background: none !important;
    }

    b) have the ability to replace those icons with my own theme icons using the shortcodes.

    Then instead of above code, use the following:

    .wpmudevevents-date{
    background: url(/path/to/icon) !important;
    }
    .wpmudevevents-price{
    background: url(/path/to/icon) !important;
    }

    Oh, and I'd like to change the letters, "GBP" to an actual pound sign (£) too, please.

    Please use the following code in your theme's footer.php after wp_footer():

    <script type="text/javascript">
    jQuery(function($) {
      var html = $('.wpmudevevents-price').text();
      $('.wpmudevevents-price').text( html.replace('GBP', '£') );
    });
    </script>

    This highly recommended to use a child theme in this case, as the changes will be lost when you will update the theme. You can learn more about child theme here: http://codex.wordpress.org/Child_Themes

    For starters, I'd like to eliminate the box that says, "Excellent! We've got you marked as coming..." and I'd also like the previously pressed button, "I'm attending" to disappear once the PayPal option shows up.

    Please try the following css:

    #eab-success-notice{
    display: none;
    }
    div#wpmudevevents-payment ~ #wpmudevevents-header {
      display: none;
    }

    You can add this to a theme's stylesheet, in a child theme, or using a plugin like My Custom CSS.

    Hope it helps :slight_smile: Please feel free to ask more question if you have any.

    Cheers
    Ash

  • Mark Smarticle

    Back... After a long weekend here in the UK. Appreciating all your help with this. We're almost there. A couple more questions though, based around this page: http://secretsunday.wpengine.com/events/2015/05/amazing-event/

    How can we completely eliminate the attending options, i.e. the need for clicking "Yes"/"No"/"Maybe?

    I'd like the event to show the yellow PayPal box immediately and completely bypass the requirement to choose an attending option. But I'd still need the maximum available seat numbers to show (which currently show before clicking "Yes"/"No"/"Maybe), as well as the number of seats left, as shown in the yellow PayPal box.

    So, can we take out "You haven't paid for this event" completely and instead replace that with the total tickets available, which is 12 (as currently shown alongside "Yes"/"No"/"Maybe screen beforehand). Ans then under that, follow with the line "11 tickets left" (although really, that should say 12 until a ticket has actually been purchased).

    And how can we centralise everything in that yellow box?

    Look forward to hearing from you.

  • Vinod Dalvi

    Hi @Mark,

    How can we completely eliminate the attending options, i.e. the need for clicking "Yes"/"No"/"Maybe?

    .wpmudevevents-buttons {
    display: none;
    }

    Or you can just hide the "No"/"Maybe" buttons using the following CSS code.

    a.wpmudevevents-no-submit, input.wpmudevevents-no-submit,
    a.wpmudevevents-maybe-submit, input.wpmudevevents-maybe-submit{
    display: none;
    }

    What do you meant by completely eliminate the need for clicking these buttons?

    So, can we take out "You haven't paid for this event" completely and instead replace that with the total tickets available, which is 12 (as currently shown alongside "Yes"/"No"/"Maybe screen beforehand). Ans then under that, follow with the line "11 tickets left" (although really, that should say 12 until a ticket has actually been purchased).

    You will have to develop custom code to achieve this.

    Developing custom code for custom functionality is beyond the scope of support that we provide. See here https://premium.wpmudev.org/manuals/using-wpmu-dev/support-vs-custom-development/

    If you are not a programmer then you can consider hiring a developer from https://premium.wpmudev.org/wpmu-custom-development/ to develop it for you.

    And how can we centralise everything in that yellow box?

    You can center align the content in yellow box by using the following CSS code.

    #wpmudevevents-payment{
        text-align: center;
    }

    Regards,
    Vinod Dalvi

  • Mark Smarticle

    Hi Vinod,

    Thanks for your help.

    Regarding what I mean by "Completely eliminating the need for clicking the buttons," I was hoping that the yellow PayPal screen could be the very first thing you see, rather than the button(s) you have to click to say you're attending. Basically, can we simply bypass the button step of the process?

    If that isn't possible, can we just change the text on the button to say, "Attend this event"? I do quite like your solution of just having the single button, but...

    There is one issue I have with the button system, however. And I think this is a flaw. If the user does NOT complete the transaction but DID press the button before being redirected to the PayPal screen, the number of attendees still decreases by one even though the ticket hasn't been bought! Can this be resolved so that the only way the number of attendees decreases is if they actually fulfil their PayPal payment?

    Thanks again,
    Mark

  • Patrick

    Hi again @Mark Hare

    I hope you're having a great day!

    If the user does NOT complete the transaction but DID press the button before being redirected to the PayPal screen, the number of attendees still decreases by one even though the ticket hasn't been bought

    That is actually by design, and is reliant on the cookie set in the user's browser. This is an especially nice bit of UX for those hesitant users who click stuff, but then take some time to think about it. Then come back and complete the payment process.

    If that wasn't the case, their hesitation could cost them their place in line for a very popular event, or one with a very limited attendance.

  • Mark Smarticle

    I agree it's a good function for the situation you mentioned, but it's not so good if someone stays on the fence and never purchases, because the place remains empty, so...

    If we can't (ideally) eliminate the step where the user has to press the "I'm Attending" button...

    1) How do we change the words “I’m Attending” on the button to “Attend This Event"?

    2) There are too many steps in the subsequent payment process. We do not want users to be forced to register at all—not via Facebook, not via Twitter, not via Google, not even via WordPress. We just want the user to be instantly redirected to PayPal itself when they hit that PayPal button.

    If that can’t work with your built in system, how can I completely eliminate YOUR PayPal button along with the “I’m Attending” step, so that I can simply add my own payment button in its place?

  • Patrick

    Hi again @Mark Hare

    Terribly sorry for the delay in replying here; this one seems to fallen between the cracks somehow.

    Yes, you can customize the button text, but not directly in the plugin options. All text strings of this, and every, plugin we offer are fully translatable so you can create a custom language file for that; not to translate to a different language, simply to change the text that appears to something that better fits your use-case.

    The easiest way to do that is with a program like PoEdit: http://poedit.net

    See the Using Translations section of this page for more:
    https://premium.wpmudev.org/manuals/using-wpmu-dev/translations/

    I've also just now realized that there is an addon that may help in your setup: RSVP status auto-reset

    What that does is simply checks for any unpaid reservations (after clicking I'm Attending & not completing the payment process), and either sets the user to "No", or deletes the user record from the event.

    Would that help in this scenario?

  • Mark Smarticle

    Yep, I'd already sorted the 'RSVP status auto-reset'.

    I've also enabled the 'RSVP with email address' hoping that it can override the convoluted login process. However, this still isn't working properly and it's making me wanna throw myself off a tall building!!!

    Now, when I click "Attend this event," an email field pops up, along with a REPEAT of the words "Attend this event" on yet another button. The field and the box don't line up, plus the button is a random grey colour, so it really doesn't look very professional. Furthermore, when I add my email address and click the second "Attend this event" button, NOTHING happens. It does NOT redirect me to the PayPal screen at all?!? This will not suffice, so...

    If I explain the exact requirements of the user experience, hopefully you can help me make it happen.

    BEST CASE SCENARIO

    1. User arrives on event page, which shows there are 12 seats left.
    2. User clicks "Attend this event".
    3. PayPal screen appears.
    4. User chooses how many tickets they require (and available seats counter reflects that... although it will reset after an hour if they don't purchase).
    5. User pays for event (and available seats counter reflects that).
    6. User leaves happy, knowing what they have paid for.

    SECOND BEST CASE SCENARIO

    1. User arrives on event page, which shows there are 12 seats left.
    2. User clicks "Attend this event".
    3. User is required to fill out email address ONLY!
    4. PayPal screen appears.
    5. User chooses how many tickets they require (and available seats counter reflects that... although it will reset after an hour if they don't purchase).
    6. User pays for event (and available seats counter reflects that).
    7. User leaves happy, knowing what they have paid for.

    WORST CASE SCENARIO

    We completely disable your entire checkout process and only use the Events+ plugin as a way to display the events. Then my client can simply add her own PayPal button and go through the (not-so-ideal) process of manually changing the post when the event sells out.

    Please be hasty with this response. She's losing her patience with me.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.