Mini calendar pop up size

[Irene]

Hi,
Is there a way to change the size of the little pop up balloon with the events on the small grid calendar?

[Rob]

Hi Irene. I know we designed that to be a lightweight little tool so there may not be much customization doable, but let me check with our dev just to make sure. Give me a day or two to get you a response on this.

[Jonah]

Hi Irene,

I assume you mean the Calendar widget and yes you can completely customize the look of this but it’s going to take some CSS skills.

I’m going to add this to the list of tutorials that we’re planning on creating but for now I’ll go through some basics.

1. You’ll first want to create your own copy of the events.css stylesheet so next time you update you don’t lose your changes. To do this just create a copy of ‘plugins/the-events-calendar/resources/events.css’ and place into an ‘events’ folder in your theme directory. So if you’re theme is in a folder ‘my-theme’ you would add the events folder so you would have ‘my-theme/events’.

2. Then you’ll want to focus on the Sidebar Calendar styles which can be found around line 436 in events.css – in particular look at line 472 for .tribe-events-calendar-widget .tribe-events-tooltip – that is the CSS selector for the wrapper of the tooltip.

3. There are a lot of things you could do with the styling and it depends on your particular design and CSS skills for what you can accomplish but the skies the limit. As an example if you wanted to add a light grey background to the tooltip you could add:

.tribe-events-calendar-widget .tribe-events-tooltip {
width:100px;
left:0;
text-align:left;
padding:5px 10px;
background: #efefef;
}

That should give you a pretty good start but keep an eye out in the near future for tutorials on this type of thing.

Regards,
Jonah

[Rona]

Question from a non-techie: In Thesis Theme, which (probably like others) includes custom files for css and php that are sustained during updates, could css changes for the widget be stored in the custom css file?

[Rob]

That’s a good question, Rona. I’m not sure myself but Jonah should know…I’ll get him to respond directly.

[Jonah]

Hi Rona,

The short answer to your question is yes. You can style the widget from any CSS file you want including the custom.css file in Thesis. Basically what it comes down to is specificity which I would highly recommend reading up on to get a little more educated on what it means. Here is one good article, but there’s plenty of others: http://css-tricks.com/855-specifics-on-css-specificity/

Basically, CSS rules are applied first by order and then by score based on selectors used to determine what is applied. The score is determined by specificity.

So for example, CSS placed inline in markup like:


< a href="#" style="font-size: 16px;" >My Link< /a >


Has the highest specificity and will trump any other CSS referenced for this link unless you use the overriding !important rule at the end of your CSS declaration.

So, what I’m try to explain (and maybe not doing the best job of it) is that even though you have all the default styles set by the plugin, you can easily override any of these in your own stylesheet by taking advantage of the specificity scoring.

So let’s take an actual example from the events.css stylesheet:

From line 253 about:

.tribe-events-calendar .tribe-events-tooltip {
border:1px solid #666;
position:absolute;
z-index:1001;
bottom:30px;
left:3px;
width:320px;
background-color:#f9f9f9;
color:#333;
line-height:1.4;
}

So say you wanted to use a different background color and apply it in your own stylesheet without messing with events.css

By the rules of specificity, ID selectors score higher than class selectors so you could simply prefix the same declaration with an ID of an element further up the page, like a container or wrapper or some sorts like so:

#wrapper .tribe-events-calendar .tribe-events-tooltip {
background-color:red;
}

By just placing an ID selector before the two classes, the specificity rules will score this declaration higher and make the background red.

I hope that helps, but let us know if you have any other questions.

Regards,
Jonah

[Author]

Posts