Colour

[Rob Bennett]

I am on WooThemes Canvas (which you seem to have an issue with judging by the forums – lucky me). Each individual event pulls through the theme. The small calendar in the sidebar (the reason for me upgrading to PRO) remains a dishwater gray colour. I just want to change the colour!!! Does it get more basic than that?

Please please please can you point me in the direction of the CSS required to change the colour so that it doesn’t look so awfully gray!

I DO NOT want to have to go into file manager and prat around creating new files (no other plugin requires me to do this).

Thanks
Rob

[George]

Hey Rob!

We can definitely help out here – can you share a link specifically to a page on your site where we can see this dishwater-gray sidebar widget in person? We’ll be able to recommend a specific solution from there.

And two other quick notes – first, in regards to the Canvas theme, The Events Calendar and its add-ons do actually work quite well with the theme. There are, however, occasionally some specific bugs with specific features, or with combinations of the theme and custom code, etc. In other words, the Canvas theme and The Events Calendar plugin are both well-made WordPress software, so the number of conflicts about it on the forums are related more to the widespread use of both products than to some inherent lack of compatibility…

Apologies for verbosity there, but just wanted to shed some light on that note about Canvas Theme and assure you that it is a solid theme that is very compatible with The Events Calendar.

Finally, in terms of not having to edit files and do all sorts of stuff to fix this, I totally get not wanting to have to jump through hoops to fix this; fortunately, it’s fairly simple, I promise! Once we see your widget in person, I’ll recommend some CSS code to fix it. All you have to do is then Copy it, and then go to Appearance > Editor in your wp-admin, choose the style.css file and scroll all the way to the bottom of the file, and then Paste in the CSS I shared with you. Then you click “save”, and that’s it! 🙂

I hope this information helps – let me know if it does. And let us know a specific page on your site where we can see the gray widget – I’ll recommend a fix promptly thereafter.

Sincerely,
George

[Rob Bennett]

This reply is private.

[George]

Hey Rob,

Thanks for the update here – I’m sorry to say that we unfortunately are not allowed to log into customer sites for any reason, so the best option is unfortunately to wait here until you’re ready to temporarily active your site. I can then take a quick look and let you know when I’ve done so, so that you can immediately re-activate your Maintenance Mode.

Is this possible? Keep me posted on things and let me know if your site is temporarily live, I will act quick to keep it out of the public’s eye as much as possible 🙂

Thank you,
George

[Rob Bennett]

This reply is private.

[George]

Hey @Rob,

As long as we’re not accessing the wp-admin area of your site, we can indeed log in and take a look. I appreciate you creating a login for us to do so, and I’ve used it to log in and see your homepage directly.

This is how I found your Mini Calendar widget when I first logged in:

To change the colors, the thing to keep in mind is that the Mini Calendar is really just a jazzed-up HTML table element. Are you familiar with the “table” element in HTML?

Regardless of your familiarity, the key is just to work through the table item by item and tweaking things along the way. Before sharing some examples, I cannot recommend a free tool like Firebug if you use FireFox, or the Developer Tools for either Safari or Chrome enough here – we don’t offer support for customizations, technically, so I won’t be able to field many if any follow-up question related to specific style tweaks, but if you have one of these free tools you probably won’t need me anyways! They all have an “Inspector” tool that lets you mouse over an element whose CSS you want to change, and then it shows you exactly what CSS you’d need to change on your site to achieve the desired effect. This is exactly what I did in responding to your question here, as follows:

To customize the Mini Calendar appearance, head to the bottom of your theme’s style.css file and add your custom CSS there. Let’s get started!

I: Changing the Header Background Color

Let’s make the calendar header background the blue that you are using elsewhere on your site. Here’s the CSS to do that:


.tribe-mini-calendar thead {
background: #00aeef !important;
}


II: Changing the “Day of Weeks” Background Color

Next, let’s make the “day of the week” headers have the rich purple-like color you’re using in your site header; we’ll also change the font for these items to White to match this color better:

.tribe-mini-calendar-dayofweek {
background: #7d1a8e !important;
color: #fff !important;
}


III: Changing the “No Events” Calendar Dates Text

These are the squares in the calendar where there are no events; e.g. by default these have a white background and gray text, with no dot in them. Let’s keep the white background, but make the text the same rich color used above:


.tribe-mini-calendar-no-event {
color: #7d1a8e !important;
}


IV: Changing the “Current Day” Highlight Colors

Finally, for now, we will change the colors of the day on the calendar that represents the “current” day – by default, this has the dishwater gray background color you mentioned earlier, but the follwoing CSS will change it to use similar coloring as the “Awards” link in your site’s nav bar:


.tribe-events-present .tribe-mini-calendar-no-event {
background: #ec008c !important;
color: #fff !important;
}


V: Bringing it All Together

When all of the CSS above is added to the bottom of your theme’s style.css file, the Calendar Widget should look something like this:

It might not be exactly what you’re looking for, but should hopefully a) be a bit better than the default gray coloring and b) give you some great example code to get started on your own refined customizations.

Take this example code, use the developer tools I recommended above, and keep good backups of all custom code like this, and you should be set – have fun playing around with these customizations on your site!

Cheers,
George

[Rob Bennett]

Ho George

You are a superstar!!! I hope you’re boss is reading this because you deserve a medal – this would have taken me hours and hours to solve. It already looks way better and with your clear and concise explanations I am very confident I can make changes if necessary in the future.

I only wish all widget providers were as knowledgeable, helpful and patient as you!!

Thanks again

Rob

[Rob Bennett]

Hi George

You solved one problem on for me to create another. I have changed the layout slightly and ditched the sidebar. The calendar was the correct size in the sidebar but is now too large. Do you have some CSS to dictate the height and width of the calendar?

Thanks
Rob

[George]

I don’t have any more CSS for now Rob, I’m sorry for that – we offer no support for theme and design questions, so unfortunately I’ll have to close up this issue for now.

If you need to write custom CSS on your site, definitely check out a [free!] tool like Firebug if you use FireFox, or the Developer Tools for either Safari or Chrome. They have “Inspector” tools that let you zoom right over the element whose styles you want to customize; you can then just copy and paste the CSS from there and tweak the values to your liking.

Best of luck with your customizations!

George

[Author]

Posts