Customize colors using shortcode

[salty]

Hi I’ve configured Events Cal Pro within the admin dashboard, but when using shortcode to display the current week’s schedule on my client’s homepage, it isn’t using the colors I’ve set in the settings. Is there a way to edit colors when using shortcodes on a regular page?

I’ve attached screenshots of the regular Events page (displaying full calendar) as well as the section on the home page using shortcode. You can see the main calendar page is styled with green accent colors and a mostly white calendar (matching site style and making the cal legible). But if you look at the home page screenshot, you can see it doesn’t match the styling I’ve set in the plugin settings, doesn’t match site style and is difficult to read.

Any assistance is greatly appreciated.

Thank you kindly,
Chris

[Courtney]

Hey Chris

Here’s a few CSS tips to get you started on modifying this:

1. We generally don’t recommend that you change the theme or plugin’s CSS files directly, as they will be overwritten. To avoid this, follow the steps outlined in Themer’s Guide
2. Use overriding CSS files, or add CSS to your site using Appearance » Customize » Additional CSS.
3. Use !important before a semicolon to override every css rule. It’s a brute force method, but works for quick fixes.
4. Please check out this Customizing WordPress #2 – Using Chrome Developers Tools YouTube video in addition to our Using Chrome Developer Tools tutorial on how to easily make changes using CSS.

Is there anything else I can help you with?

Thanks
Courtney 🙂

[salty]

Thanks for the reply.

So there is no way to use shortcode and have the calendar display based on the color settings already saved in the Event’s Settings dashboard? I was hoping for a more straightforward method of implementing various calendar instances throughout the website besides the /events page full calendar view.

The shortcodes are a convenient and simple way to add my events to pages, but if I can’t easily style them, they’re difficult to read and don’t match my site’s branding. That said I’ll continue looking at the various pages you provided links to. I was just hoping for a shortcode solution.

Thanks again.

• This reply was modified 6 years ago by salty.

[Courtney]

Hey Chris

We don’t have a simple way to get at that outside of what the WordPress Customizer can do. Appearance » Customize » The Events Calendar.

Much of how the shortcode displays is really without much styling. We rely on your theme defaults. While this works well with most themes, it doesn’t seem to look quite right with your theme.

If you are able to get this started, I can check in to help with any hard spots.

Let me know how it goes.

Thanks
Courtney 🙂

[salty]

Thanks Courtney I’ll see what I can do. As a side note, I’m using Avada theme.

I used the WP customizer to style the default event page, but those settings don’t seem to carry over to the shortcodes.

My hope was to show either current week or current day schedules on the home page, and then provide a button to link users to the full calendar to view everything.

-Christopher Derry

[Courtney]

Gotcha Christopher

Do check back as you get this going. I’m not sure that I’ve seen other shortcodes work with Customizer. That would be a great way for users to get the look they want. If you think that is something you would like as a feature I encourage you to visit our User Voice Page and either upvote an existing request or make a new request there.

You can suggest it it http://tribe.uservoice.com.

Thanks
Courtney 🙂

[salty]

I posted the suggestion on the uservoice page, and also voted up other comments posted by other users requesting similar functionality. It appears many of us require a simple way to make our various calendar instances match the styling of our sites.

Cheers,
Chris

[Courtney]

Thanks Chris! We will let you know if we implement this.

Courtney

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts