Hi,

Here is a bit of background about my implementation: I wanted the calendar to be seen all over the site so I put the $CalendarWidget onto the sidebar. I wanted it to fit the sidebar so I edited the CSS of the CalendarWidget but to no avail, it did not work.

The weird thing is, in the real even calendar page, the Calendar Widget has been resized to my specifications. But the widget on the main sidebar does not change at all.

Calendar Widget on Sidebar: http://sumilao.inting.org/
Calendar Widget on Event Calendar: http://sumilao.inting.org/events

I don't know what to do. Is anyone familiar with this problem? Thanks! :)

*bump*

still hoping for some answers :)

thanks!

I had a look at your website. The problem results from your css.

The calendar on all sites with class "Page" is bigger, because you defined a bigger font-size (11px).
Whereas on the "CalendarEvent" or "Calendar" sites, you define a font-size of 10px.

In your themes/blackcandy/typography.css you define (line 170):

.typography table {
border-collapse:collapse;
color:#666666;
font-size:11px;
}

This font size is used on all pages that have the class "Page".
This is because this overrides the font-size you defined in your calendar_widget.css. This has to do with CSS specifity.

On pages with the class "CalendarEvent" or "Calendar" this default font-size is overriden by this declaration in event_calendar/css/calendar_widget.css on line 85:

div.dp-popup {
font-family:arial,sans-serif;
font-size:10px;
line-height:1.2em;
}

The simple fix for your problem: Just add "!important" to the font-size declaration in calendar_widget.css. This gives the CSS rule the highest specifity and overrides all aother declarations:

div.dp-popup {
font-family:arial,sans-serif;
font-size:10px !important;
line-height:1.2em;
}

Thanks for pointing out the problem! Although, there were further things I needed to change in order to make it fit the sidebar but what you pointed out opened my eyes in making in fit. Thanks so much silverseba! :)