Add some flair to
your calendar plugin by enabling calendar
pictures. This setting will take the
medium event poster image for an event and add it to the
calendar.
To enable - go to SET UP > EVENTS
> EVENT SETTINGS and click on the GENERAL
SETTINGS icon. From the slide-out menu, select
the Calendar Picture checkbox and press
SAVE.
If you would like to make changes to
the design, you can edit the CSS on the
plugin. To edit CSS, go to SET UP > WHITE
LABLE > PLUGINS and then click on the CSS
icon on the plugin you want to modify.
CSS
.VBOCalendar .CalEventMulti { margin: 0 0 4px 0; } .VBOCalendar .CalEventMulti > .CalEventInfo > .CalendarName > .CalBGImage { margin: 0 0 3px -5px; width: 105%; } .VBOCalendar .CalEventMulti > .CalEventInfo > .CalendarName { padding: 0 0 0 5px; } .VBOCalendar .CalCellContent { padding: 27px 3px 5px 3px; height: inherit; width: 100% } .VBOCalendar .CalDayStatus { padding: 2px 2px 2px 3px; } .VBOCalendar .CalendarName { overflow: hidden; margin: 0 0 0 0; padding: 0 0 0 0; border-radius: 2px; color: #FFF; } .VBOCalendar .CalDayStatus { text-transform: uppercase; } /* List View */ .VBOCalendar .CalListHeader { font-size: 14px !important; font-weight: bold !important; text-align: center; } .VBOCalendar .CalListDayColumn { margin: 0 5px 5px 0; flex: 1; } .VBOCalendar .CalListEventColumn { margin: 0 0 5px 0; flex: 3; } .VBOCalendar .CalListCell { padding: 5px; background-color: #EEE; border-radius: 2px; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); } .VBOCalendar .CalListDay { font-size: 12px !important; font-weight: bold !important; } .VBOCalendar .CalListEvents { background-color: #EEE; } .VBOCalendar .OpaqueBG { padding: 1px 0 0 3px; background-color: rgba(0, 0, 0, 0.5); } .VBOCalendar .CalBGImage { overflow: hidden; display: block; margin: 0 0 0 0; width: 100%; height: 60px; border-bottom: 2px solid #efefef; }