Support

Home Forums Event Espresso Premium Calendar colours

Calendar colours

Posted: June 26, 2020 at 8:48 am


SteveMBragg

June 26, 2020 at 8:48 am

How do I change the calendar colours?

Currently the day headers in the monthly view are white background grey text. I want to change that.

Also how do I change the blue background on the “Upcoming” “button”

Thanks

Steve B


Tony

  • Support Staff

June 29, 2020 at 3:50 am

Hi Steve,

Currently the day headers in the monthly view are white background grey text. I want to change that.

You’ll need to add your own CSS to change the styling to whatever you prefer, for example:

#espresso_calendar:not(.ui-widget).calendar_fullsize .fc-button {
    background: red;
    color: white;
}

Will change the headers to be red with white text.

Then:

#espresso_calendar:not(.ui-widget) .fc-state-active, 
#espresso_calendar:not(.ui-widget) .fc-state-hover, 
#espresso_calendar:not(.ui-widget) .fc-state-hover .fc-text-arrow {
    color: yellow !important;
}

Will change the colour of the ‘active’ tab and any hover to use yellow text.

You’ll obviously need to change those to suit and then add the above to Appearance -> Customize -> Additional CSS on your site.

Also how do I change the blue background on the “Upcoming” “button”

We don’t have an ‘Upcoming’ button but I’m guessing you mean the status banner, here: https://monosnap.com/file/PDHDFMOVWdMbrlFgoekapnZnQrHFrQ

if so you can use something like this:

.ee-status.event-active-status-DTU {
    background: red;
}


SteveMBragg

June 30, 2020 at 1:11 pm

Hi

The code you have given does not change the headers colour. What it does it change the background of the top navigation butons.

Which I would actually prefer anyway to have black background and white text and maybe the month button to be yellow text.

What I want to do is have the row with the days of the week with a different colour background and white text. You code does not do this.

Can you help please. So I need two pieces:-

Code for the row with days of the week.
Code for the navigation buttons.

Thanks

Steve


Tony

  • Support Staff

June 30, 2020 at 1:24 pm

My apologies, I misunderstand what you were looking for.

To change the day headers, use something like:

.fc-day-header {
    background: red;
    color: white;
}

The code for the navigation buttons I’ve already provided, you just need to change the colours to suit:

#espresso_calendar:not(.ui-widget).calendar_fullsize .fc-button {
    background: black;
    color: white;
}
#espresso_calendar:not(.ui-widget) .fc-state-active, 
#espresso_calendar:not(.ui-widget) .fc-state-hover, 
#espresso_calendar:not(.ui-widget) .fc-state-hover .fc-text-arrow {
    color: yellow !important;
}


SteveMBragg

June 30, 2020 at 1:29 pm

Thanks

You are using colour names instead of hex. As I am using special colours in places how do insert hex colours as I have tried replacing “yellow” with #ffffff as a test and it does not work.

Thanks

Steve


Tony

  • Support Staff

June 30, 2020 at 4:36 pm

Yeah I’m just using colour names to just give simple examples but changing for hex is pretty much the same:

#espresso_calendar:not(.ui-widget) .fc-state-active, 
#espresso_calendar:not(.ui-widget) .fc-state-hover, 
#espresso_calendar:not(.ui-widget) .fc-state-hover .fc-text-arrow {
    color: #fff !important;
}

Works fine for me:

https://monosnap.com/file/VLvWeGuJ3kii6Ce8lSTOLx6t8tjegN

Note #fff is the same as #ffffff.

The !important is important here as you need to override the default styles, which also use !important, so you want your styles loading after those AND using !important to override them.

You must be logged in to reply to this support post. Sign In or Register for an Account

Support forum for Event Espresso 3 and Event Espresso 4.
Documentation for EE3 and EE4
Documentation for Event Espresso 3 Documentation for Event Espresso 4

Status: publish

Updated by  Tony 3 months ago ago

Topic Tags

Notifications

This topic is: not resolved
Do NOT follow this link or you will be banned from the site!
[gravityform id=80 title=false description=false ajax=false]
<div class='gf_browser_unknown gform_wrapper' id='gform_wrapper_80' ><form method='post' enctype='multipart/form-data' id='gform_80' action='/topic/calendar-colours-2/'> <div class='gform_body'><ul id='gform_fields_80' class='gform_fields top_label form_sublabel_below description_below'><li id='field_80_1' class='gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' for='input_80_1' >First name<span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_text'><input name='input_1' id='input_80_1' type='text' value='' class='medium' aria-required="true" aria-invalid="false" /></div></li><li id='field_80_2' class='gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' for='input_80_2' >Email address<span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_email'> <input name='input_2' id='input_80_2' type='email' value='' class='medium' aria-required="true" aria-invalid="false" /> </div></li><li id='field_80_3' class='gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' >GDPR Agreement<span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_checkbox'><ul class='gfield_checkbox' id='input_80_3'><li class='gchoice_80_3_1'> <input name='input_3.1' type='checkbox' value='I consent to have this website store my submitted information so they can respond to my inquiry.' id='choice_80_3_1' /> <label for='choice_80_3_1' id='label_80_3_1'>I consent to have this website store my submitted information so they can respond to my inquiry.</label> </li></ul></div></li><li id='field_80_4' class='gfield gform_validation_container field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' for='input_80_4' >Email</label><div class='ginput_container'><input name='input_4' id='input_80_4' type='text' value='' autocomplete='off'/></div><div class='gfield_description' id='gfield_description_80_4'>This field is for validation purposes and should be left unchanged.</div></li> </ul></div> <div class='gform_footer top_label'> <input type='submit' id='gform_submit_button_80' class='gform_button button' value='Download Now' onclick='if(window["gf_submitting_80"]){return false;} if( !jQuery("#gform_80")[0].checkValidity || jQuery("#gform_80")[0].checkValidity()){window["gf_submitting_80"]=true;} ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_80"]){return false;} if( !jQuery("#gform_80")[0].checkValidity || jQuery("#gform_80")[0].checkValidity()){window["gf_submitting_80"]=true;} jQuery("#gform_80").trigger("submit",[true]); }' /> <input type='hidden' class='gform_hidden' name='is_submit_80' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='80' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_80' value='WyJbXSIsIjBiNjdjZjkyMDUzOWUxOWY5Y2NiZjIwMzM4YjA1Mjk4Il0=' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_80' id='gform_target_page_number_80' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_80' id='gform_source_page_number_80' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> </form> </div><script type='text/javascript'> jQuery(document).bind('gform_post_render', function(event, formId, currentPage){if(formId == 80) {} } );jQuery(document).bind('gform_post_conditional_logic', function(event, formId, fields, isInit){} );</script><script type='text/javascript'> jQuery(document).ready(function(){jQuery(document).trigger('gform_post_render', [80, 1]) } ); </script>
[i]
[i]