Minicalendar shortcode vs widget generated code and CSS: formatting behavior

[Riccardo]

After using the minicalendar widget I have applied styles using CSS, and the overall design is fine. Then I have tried to replace the minicalendar widget using the shortcode, however the layout is completely spoiled. Is this by design? I suspect that the code (and styles) generated by the two are different.. Can you confirm?

[George]

Hey Riccardo,

Sorry to hear about this!

There are definitely some differences in the output of both things, but there should mostly be parity in their output and thus the styles should mostly be applicable to both things.

We cannot help with customizations, so I won’t be able to take a super-close and specific look here, but can you post your custom CSS into a Gist at http://gist.github.com? Then, share a link to that Gist in your reply and I will take a look at it and test it out.

Also, in your reply can you please post your site’s System Information? Here’s how → https://theeventscalendar.com/knowledgebase/sharing-sys-info/

Cheers!
George

[Riccardo]

Thank you George for chiming in! I wonder why there was a choice to generate differente outputs for the soma object assuming the outcome should be the same! Is there any reason for this?

Here’s thi Gist: https://gist.github.com/anonymous/7bd25bb2c6cf857ce1befa74fd59bfa9

[George]

Hey Riccardo,

There is only a minute difference in the HTML output, but if your CSS uses selectors in a way that unfortunately targets these minute differences, then the CSS won’t apply.

However, I found that adjusting your CSS slightly resolved the issue.

All I had to change was the first two style rules.

To start with, you had this:


/** Change the background colour of the grid header area */
.tribe_mini_calendar_widget thead,
.tribe_mini_calendar_widget .tribe-mini-calendar-nav td {
background: #82a344;
border: none;
}

/** Change the colour scheme of the days of the week */
.tribe_mini_calendar_widget .tribe-mini-calendar-dayofweek {
background: #9ac150 /* rgb(255, 182, 6)*/;
color: white;
padding: 3px;
}


I changed this to target the grid wrapper generally, which exists in both types of output, and it worked well for me:


/** Change the background colour of the grid header area */
.tribe-mini-calendar-grid-wrapper thead,
.tribe-mini-calendar-grid-wrapper .tribe-mini-calendar-nav td {
background: #82a344;
border: none;
}

/** Change the colour scheme of the days of the week */
.tribe-mini-calendar-grid-wrapper .tribe-mini-calendar-dayofweek {
background: #9ac150 /* rgb(255, 182, 6)*/;
color: white;
padding: 3px;
}

Your list styles worked fine in both cases for me as-is, so I did not change those.

Another possible hindrance here is that I noticed your opening comment in the CSS is not valid, which could be breaking the CSS file in a some way. To clarify, you have this:

******************** THE EVENTS CALENDAR ***********************************/

But there is no “/” character at the beginning of the comment before the “*” characters, which is required for CSS comments:

/******************** THE EVENTS CALENDAR ***********************************/

☝️ That might seem like a very slight difference, but it matters!

---

I hope these changes help, Riccardo. You will have to take the reins any further CSS modification and tweaking, but hopefully this information is useful. One more tip that should help is that 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 CSS you want to modify, so you can figure out the best CSS selectors to use for any specific item on your pages.

Best of luck with your site!
George

[Riccardo]

Thanks

[George]

Sure thing!

Best of luck with your project. 😀

— George

[Author]

Posts