Need help resizing mini-calendar widget

[Jim]

Hey guys.

I know this topic has been troubled extensively, and I think I have found every piece of documentation and forum topic about this, but no matter what I do, I cannot seem to fix the width of the mini-calendar widget. It always exceeds the right column.

Here is a link to the url if you would please take a look at it…

http://www.lakecumberland.com/

I have really tried every outlet I could find on my own before posting here. Any help is appreciated. Thanks.

[George]

Hey Jim,

Thanks for reaching out—sorry to hear about all of the troubles you’ve been having here.

I would like to note that we can only provide limited help with design-related questions, especially ones like this where, after taking a look at your site, your theme is dictating most of the relevant styles…

…that being said, try out adding some CSS like this to the bottom of your theme’s style.css file:


.tribe-mini-calendar-grid-wrapper .tribe-mini-calendar {
width: 89% !important;
}

Cheers!
George

[Jim]

That did the trick George! THANK YOU! THANK YOU! THANK YOU!

You can see where it’s much better now….

http://www.lakecumberland.com/

Now I just have to figure out how to change the colors. If you could provide a quick link to the info on that, I would be most grateful.

Also, can you see where the month isn’t in align with the arrows? Any hint on that?

Regards,

Jim

• This reply was modified 10 years ago by Jim.

[George]

Excellent!

As for your other questions, I unfortunately don’t have any hints for these issues. 🙁 To learn to change the colors, 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 width/colors/etc you want to change.

As an example of that, here’s some CSS to fix the month/arrows alignment:


.tribe-mini-calendar-nav .tribe-mini-calendar-nav-link {
padding: 0 5px 5px !important;
}

.tribe-mini-calendar-nav td > div {
padding-top: 5px !important;
}


All I did for that was use Firebug and hover over the month title to see what styles were causing the odd layout, then the above CSS overwrites those specific styles.

I’ll let you take the reins from here but wish you the best of luck with further refinement of your design.

Cheers,
George

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts