Support

Home Forums Event Espresso Premium Calendar CSS

Calendar CSS

Posted: August 26, 2013 at 5:26 am


aiact

August 26, 2013 at 5:26 am

Good morning,

I need to restyle the base calendar and using firebug I created my list of custom style, but when paste them into the themes custom style sheet nothing changes. I tried scanning through the old posts couldn’t come up with the answer.

Thanks in advance for you help.


Tony

  • Support Staff

August 26, 2013 at 7:23 am

Hi Jan,

The Calendar uses Themeroller for styling. You can create your own themeroller styles following the guide here

https://eventespresso.com/wiki/how-to-create-custom-themeroller-styles/

You can also disable the themetroller styles under Event Espresso -> Template Settings. You’ll see Stylesheet Options. Set ‘Use Themeroller Style Sheets’ to No and save settings.

Themeroller is used in more than just the calendar so this may effect other parts of the site.


aiact

August 26, 2013 at 11:01 am

This is a bit confusing as it does not have the calendar as an element to style to see the effects. The style sheets for the calendar are quite specific.

I don’t understand why I’ve been able to change css styling on other parts of event expresso including category color and the rollover popup window on the calendar by editing the custom CSS style sheet.

Using firebug these are the styles I need to change. Can I just slip them in somewhere?

.ui-widget-header {
    background: none repeat scroll 0 0 #BBBBBB;
    border: 1px solid #AAAAAA;
    color: #222222;
    font-weight: bold;
}

.fc-grid th {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
}

.fc-grid .fc-day-number {
    background-color: #CCCCCC;
    color: #666666;
    float: right;
    font-size: 16px;
    padding: 0 1px 1px 2px;
    text-align: center;
    width: 96%;
}

.fc-border-separate th, .fc-border-separate td {
    border-width: 0;
}

.fc-border-separate th.fc-last, .fc-border-separate td.fc-last {
    border-right-width: 0;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    border: 3px solid #DC2C1F;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-bottom-left-radius: 0;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-top-left-radius: 0;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: none repeat scroll 0 0 #DC2C1F;
    border: 1px solid #FFFFFF;
    color: #555555;
    font-weight: normal;
}


Dean

August 27, 2013 at 6:18 am

Hi Jan,

Try a plugin called My Custom CSS, it makes adding CSS very easy. Also when I added your above code to that plugin it gave me a calendar like so http://d.pr/i/gqZq


aiact

August 28, 2013 at 10:54 am

Thanks Dean, I’ll try it. Is there any way I can change the little arrow navigation icons through the CSS?


aiact

August 28, 2013 at 11:07 am

Very strange. The calendar looks right on the link you sent, but when I place it in the Custom CSS field nothing happens?


aiact

August 28, 2013 at 11:12 am

When I pasted it into the beginning of the custom css it worked. Somethings amiss in my custom css. I’ll find it. Thanks.

Is there a problem with IE8. The calendar is coming up as a blank spot only in IE.


aiact

August 28, 2013 at 11:47 am

Alls good except the IE8 problem.


Dean

August 28, 2013 at 11:11 pm

Hi,

The calendar displays ok on IE8 for me – are you using an emulator or compatibility mode?

You may need to add a little CSS, for IE8 users (its in the works to fix)

.reg_now { background-color: #0d89b1; }


aiact

August 29, 2013 at 6:43 pm

Thanks Dean. She had it in compatibility mode.

I appreciate all of the help you guys have given. It’s hard managing all of the never ending puzzle pieces to this business. You guys go above and beyond what I’ve come to expect. So heart felt thanks to the team at Event Expresso. Keep up the great work.

I’m currently involved on a new project that will combine calendars, event management, event sales, membership and a store. I’m planning on using Event Expresso and Woocommerce for the store. Can you recommend a management plugin that that works well with EE? This is for a regional organization whose members are tourists, regional families and businesses, local volunteers, etc. Memberships will involve log-in, fundraising, newsletters, access to members programs tying to events and calendars to name a few functions on the list.

Best regards,

PHal51


Dean

August 30, 2013 at 3:42 am

Thank you! That is most appreciated!

Management in what way? Like a membership plugin? If so S2Member or Justin Tadlocks Members, both good but in different ways.

If you get some free time, please consider sharing your Event Espresso experience – https://eventespresso.com/about/help-us-help-you-how-to-share-event-espresso/

The support post ‘Calendar CSS’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso