Styling the Group Events page differently

Hi - Question for the Events+ plugin. On this group events page: http://www.healthcomspringboard.org/groups/photo-speaks/group-events/

I wanted to know if there was a way to style this differently (e.g. list of events vs the calendar view or maybe only one month vs the side by side) and if there was a way to remove one of the prev/next controls (they are on the top and the bottom.)

I thought there might be a way to do this via settings, but I'm not finding it.

I also wanted to style the "Add event' link to make it look more like a button (and stand out more.)

Thanks,
Marla

  • Jack Kitterhing

    Hi there Marla,

    Hope you're well today and thanks for your question.

    Out of the box in events > settings, you can override the default view and change it to a list or calendar view :slight_smile:

    For the next/previous buttons, unfortunately the top section and the bottom section with those has the same class, so we could remove both, but not one, would that still work at all?

    For the add event link, so I can see this and provide some css, can you grant me support access please via the WPMU DEV dashboard > support > support access and click "Grant Access".

    Thanks!

    Kind Regards
    Jack.

  • Michael Bissett

    Hey @Marla,

    You can send me the access information by using our contact form here:

    https://premium.wpmudev.org/contact/

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

    Please include the following:

    - Mark to my attention - ATTN: Michael Bissett
    - A link back to this thread
    - And of course, the admin access details :slight_smile:

    Thanks! :slight_smile:

    Regards,
    Michael

  • Michael Bissett

    Hey @Marla, hope you're doing well. :slight_smile:

    Doesn't appear to be a way to configure the display out of the box, code changes would have to be made in order to modify this (the function that is used to display the events+ code on the group events page is in \events-and-bookings\lib\plugins\eab-buddypress-group_events.php in line 303, line 316 being the part that loads the calendar in particular).

    But, it does appear to be a one month calendar already, so if that would work, it's all set to do that.

    As for the prev/next controls, and the Add event button, I've cooked up the following code for you, with a couple of extras:

    #item-body > p + .eab-bp-group_events-navigation {
        display: none;
    }
    
    /* To turn the "Add Event" link into a button */
    
    #item-body > h3 + p {
        margin-top: 20px;
    }
    
    #item-body > h3 + p > a {
        padding: 5px 8px;
        background: #f05a29;
        color: white;
        border-radius: 5px;
        border: 1px solid #f05a29;
    }
    
    #item-body > h3 + p > a:hover {
        padding: 5px 8px;
        background: white;
        color: #f05a29;
        border-radius: 5px;
        border: 1px solid #ccc;
    }
    
    /* To make the Prev/Next links into buttons :) */
    
    .eab-bp-group_events-navigation-prev > a {
        padding: 5px 8px;
        background: #f05a29;
        color: white;
        border-radius: 5px;
        border: 1px solid #f05a29;
    }
    
    .eab-bp-group_events-navigation-next > a {
        padding: 5px 8px;
        background: #f05a29;
        color: white;
        border-radius: 5px;
        border: 1px solid #f05a29;
    }
    
    .eab-bp-group_events-navigation-prev > a:hover {
        padding: 5px 8px;
        background: white;
        color: #f05a29;
        border-radius: 5px;
        border: 1px solid #ccc;
    }
    
    .eab-bp-group_events-navigation-next > a:hover {
        padding: 5px 8px;
        background: white;
        color: #f05a29;
        border-radius: 5px;
        border: 1px solid #ccc;
    }
    
    /* Remove this last one if you're wanting the day names to show up at the bottom as well */
    
    .eab-monthly_calendar tfoot {
        display: none;
    }

    Let me know if you need further assistance please. :slight_smile:

    Regards,
    Michael

    (Edited to add this mention:

    Insert the code into a plugin like this:

    https://wordpress.org/plugins/simple-custom-css/

    And it'll add the code to the page)