Calendar Changes for Events+

I was talking to a support rep on support chat, but we got disconnected from chat and then I was put in a queue :slight_frown:

I am trying to achieve this look

We were just starting to do the css changes and thats when it disconnected. I was wondering if anyone could help me achieve anything as near as possible to this?

I think the guy I was chatting to was Sanjif?

Thanks so much for all of your help so far.

Matt

  • Predrag Dubajic

    Hey Matt,

    Hope you're doing well :slight_smile:

    Having that exact look would require quite some changes since the HTML structure is not the same but having something close to it isn't that complex and below CSS code should do the trick:

    .Eab_CalendarUpcoming_Widget {
        background: #fff;
    }
    
    .Eab_CalendarUpcoming_Widget thead tr th {
        font-weight: bold;
        padding: 10px 0;
    }
    
    .Eab_CalendarUpcoming_Widget tbody tr td {
        background: #c7c7c7;
        box-shadow: 0px 0px 0px 2px #fdfdfd inset;
        padding: 2px 0;
        text-align: center;
    }
    
    .Eab_CalendarUpcoming_Widget tbody tr td p,
    .Eab_CalendarUpcoming_Widget tbody tr td p a,
    .Eab_CalendarUpcoming_Widget tbody tr td p a:hover {
    	font-family: Helvetica;
    	line-height: 1.7em
    }
    
    .Eab_CalendarUpcoming_Widget tbody tr td.no-left-border,
    .Eab_CalendarUpcoming_Widget tbody tr td.no-right-border {
        background: #fff;
    }
    
    .Eab_CalendarUpcoming_Widget tbody tr td.eab-has_events,
    .Eab_CalendarUpcoming_Widget tbody tr td.eab-has_events p a {
        background: #cd1719!important;
        color: #fff!important;
    }
    
    .Eab_CalendarUpcoming_Widget tbody tr:last-of-type td {
        background: #cd1719;
        box-shadow: none;
    }
    
    .Eab_CalendarUpcoming_Widget tbody tr:last-of-type td a {
        color: #fff;
        font-family: Helvetica;
        line-height: 2em;
    }

    Best regards,
    Predrag

  • Predrag Dubajic

    Hi Matt,

    Huh, that heigh was different when I was adding the code in browser, not sure why it's showing differently now, so let's try with these changes to previous code:
    First, add width in this part:

    .Eab_CalendarUpcoming_Widget thead tr th {
        font-weight: bold;
        padding: 10px 0;
        width: 14.2%; /* <--- THIS IS NEW */
    }

    Add margin here:

    .Eab_CalendarUpcoming_Widget tbody tr td p,
    .Eab_CalendarUpcoming_Widget tbody tr td p a,
    .Eab_CalendarUpcoming_Widget tbody tr td p a:hover {
    	font-family: Helvetica;
    	line-height: 1.7em
    	margin: 0; /* <--- THIS IS NEW */
    }

    And adjust the padding here:

    .Eab_CalendarUpcoming_Widget tbody tr td {
        background: #c7c7c7;
        box-shadow: 0px 0px 0px 2px #fdfdfd inset;
        padding: 4px 0; /* <--- THIS IS CHANGED */
        text-align: center;
    }

    Let us know how it goes :slight_smile:

    Best regards,
    Predrag

  • Matthew Hartnet

    That would be my fault it changed, i deleted what I had already done.. :disappointed: sorry

    its all aligned up nicely, however the height is still off. Here is the current code I have:

    .Eab_CalendarUpcoming_Widget {
        background: #fff;
    }
    
    .Eab_CalendarUpcoming_Widget thead tr th {
        font-weight: bold;
        padding: 10px 0;
    }
    
    .Eab_CalendarUpcoming_Widget tbody tr td {
        background: #c7c7c7;
        box-shadow: 0px 0px 0px 2px #fdfdfd inset;
        padding: 2px 0;
        text-align: center;
    }
    
    .Eab_CalendarUpcoming_Widget tbody tr td p,
    .Eab_CalendarUpcoming_Widget tbody tr td p a,
    .Eab_CalendarUpcoming_Widget tbody tr td p a:hover {
    	font-family: Helvetica;
    	line-height: 1.7em
    }
    
    .Eab_CalendarUpcoming_Widget tbody tr td.no-left-border,
    .Eab_CalendarUpcoming_Widget tbody tr td.no-right-border {
        background: #fff;
    }
    
    .Eab_CalendarUpcoming_Widget tbody tr td.eab-has_events,
    .Eab_CalendarUpcoming_Widget tbody tr td.eab-has_events p a {
        background: #cd1719!important;
        color: #fff!important;
    }
    
    .Eab_CalendarUpcoming_Widget tbody tr:last-of-type td {
        background: #cd1719;
        box-shadow: none;
    }
    
    .Eab_CalendarUpcoming_Widget tbody tr:last-of-type td a {
        color: #fff;
        font-family: Helvetica;
        line-height: 2em;
    }
    .Eab_CalendarUpcoming_Widget thead tr th {
        font-weight: bold;
        padding: 10px 0;
        width: 14.2%; /* <--- THIS IS NEW */
    }
    .Eab_CalendarUpcoming_Widget tbody tr td p,
    .Eab_CalendarUpcoming_Widget tbody tr td p a,
    .Eab_CalendarUpcoming_Widget tbody tr td p a:hover {
    	font-family: Helvetica;
    	line-height: 1.7em
    	margin: 0; /* <--- THIS IS NEW */
    }
    .Eab_CalendarUpcoming_Widget tbody tr td {
        background: #c7c7c7;
        box-shadow: 0px 0px 0px 2px #fdfdfd inset;
        padding: 4px 0; /* <--- THIS IS CHANGED */
        text-align: center;
    }

    Im getting an error on the CSS here -->>

    It also seems to have broken the CSS I have already created :disappointed:

    thanks

    Matt

    ****EDIT****

    I found a missing ; so added it in. All CSS now works but back to original Question :slight_smile:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.