CSS help in Upfront/Events+

Im wanting to make the font Montserrat almost site wide.

i cant work out how to change the text style for 3 areas:

1) text under upfront calendar - when a date is selected (all 14px with bold title)
2) text in both Events CPT and (3) Directory CPT (main data) 14px

I also need to hide the black line under the main menu, when you hover over "THINGS TO DO".

Also, if possible... in each of the "THINGS TO DO" category pages, there is a big void between the banner ad and the top of the listed events. Ive tried to do some CSS for that but was never succeeding.

If you could help me with these areas that would be great as.. I'm almost there! :smiley:

Support granted.

Thanks

Matt

  • Katya Tsihotska

    Hi Matthew Hartnet

    Hope you're having a wonderful day!

    1) text under upfront calendar - when a date is selected (all 14px with bold title)

    You can try to add the following CSS to the Global CSS Presset

    /* text under upfront calendar - when a date is selected (title)*/
    div#wpmudevevents-upcoming_calendar_widget-shelf .wpmudevevents-upcoming_calendar_widget-event {
        font-size: 14px;
        font-weight: bold;
        font-family: Montserrat;
    }
    
    /* text under upfront calendar - when a date is selected (date)*/
    div#wpmudevevents-upcoming_calendar_widget-shelf .wpmudevevents-upcoming_calendar_widget-event span {
        font-weight: normal;
    }

    You also can change font-size or add your own styles there.

    2) text in both Events CPT and (3) Directory CPT (main data) 14px

    You can set this with the main Typography settings. Open Upfront Editor, go to the Theme Settings -> Typography and set styles for each text element, mostly this should be Paragraph (P).

    I also need to hide the black line under the main menu, when you hover over "THINGS TO DO".

    Try to add the following CSS to the Global CSS as well:

    nav#ubermenu-main-3-default-2 ul li:after {
        border: none !important;
    }

    Also, if possible... in each of the "THINGS TO DO" category pages, there is a big void between the banner ad and the top of the listed events. Ive tried to do some CSS for that but was never succeeding.

    You can use the following CSS to decrease the empty space below the banner ad:

    div#upfront-region-container-main-content-area .upfront-region-container-bg {
    	overflow: hidden;
    }
    div#upfront-region-container-main-content-area .upfront-region-container-bg .upfront-grid-layout {
    	margin-top: -20px;
    }

    Also I've been asked to remove all text from this image if thats cool. I tried css before but it didn't work

    Try to use the following CSS to adjust this:

    #wpmudevevents-wrapper hr, .wpmudevevents-content #wpmudevevents-contentheader, .wpmudevevents-content #wpmudevevents-contentmeta {
        display: none !important;
    }

    If you have any additional questions please let us know, we always are happy to help.

    Kind regards,
    Katya

  • Matthew Hartnet

    Excellent, all perfect. however

    Also, if possible... in each of the "THINGS TO DO" category pages, there is a big void between the banner ad and the top of the listed events. Ive tried to do some CSS for that but was never succeeding.

    It breaks the front page.

    The problem is from the content views plugin, it seems to have a massive gap above that i cant seem to shift.

    Also, after changing client has asked for colour to be same as global. cant work that out, tried this?

    div#wpmudevevents-upcoming_calendar_widget-shelf .wpmudevevents-upcoming_calendar_widget-event {
        font-size: 14px;
        font-weight: bold;
        color: #cd1719;
        font-family: Montserrat;
    }

    Kind regards

    Matt

  • Katya Tsihotska

    Hi Matthew Hartnet

    Hope you're fine!

    It breaks the front page.

    The problem is from the content views plugin, it seems to have a massive gap above that i cant seem to shift.

    Try to use the following code, it shouldn't effect on the homepage:

    .pt-cv-page .pt-cv-2-col.col-md-12.col-sm-12.col-xs-12 {
        margin-top: -15px;
        padding-top: 0 !important;
    }
    .upfront #module-1509376146497-1939 #uwidget-object-1509376146496-1759 {
    	padding-top: 0;
    }

    Also, after changing client has asked for colour to be same as global. cant work that out, tried this?

    This happens because of another CSS rule is overridden that. Try to use the following CSS instead:

    div#wpmudevevents-upcoming_calendar_widget-shelf .wpmudevevents-upcoming_calendar_widget-event, #wpmudevevents-upcoming_calendar_widget-shelf .wpmudevevents-upcoming_calendar_widget-event.music {
        font-size: 14px;
        font-weight: bold;
        color: #cd1719!important;
        font-family: Montserrat;
    }

    Hope this helps.

    Kind regards,
    Katya

  • Katya Tsihotska

    Hi Matthew Hartnet

    How are you? :slight_smile:

    I'm sorry, I haven't looked so far (I mean at the next month's events), there is another CSS that overrides style for events from Shows category. I suppose that there could be such CSS for all events categories as well. Try to replace my previous CSS. I mean this one:

    div#wpmudevevents-upcoming_calendar_widget-shelf .wpmudevevents-upcoming_calendar_widget-event, #wpmudevevents-upcoming_calendar_widget-shelf .wpmudevevents-upcoming_calendar_widget-event.music {
        font-size: 14px;
        font-weight: bold;
        color: #cd1719!important;
        font-family: Montserrat;
    }

    with the following:

    #upfront-region-sidebar div#wpmudevevents-upcoming_calendar_widget-shelf .wpmudevevents-upcoming_calendar_widget-event {
        font-size: 14px;
        font-weight: bold;
        color: #cd1719!important;
        font-family: Montserrat;
    }

    This one should work for all categories, even if there are any specific style rules for particular categories.

    Hope this time everything will work fine :slight_smile:

    Kind regards,
    Katya