Editing the Calendar Widget
Below is a description of how I edited the CSS for the Calendar Widget on my site. My site uses the three column layout and my calendar is in the right column at the very top (http://www.sundaybrunchwow.com) . I will be leaving the specific classes assigned to these divisions out unless a particular division doesn’t have an id. I am by no means a programmer or very knowledgeable about these things but thought I would share how I modified the CSS for one of my widgets. I’m sure there are easier ways to handle this and if you know how or can answer the questions at the end of this description, please feel free to reply.
The nested location of the content areas in this three column layout is as follows.
'<body>
'<div id=”global_wrap”>
'<div id=”content_wrap”>
'<div id=”content”>
Inside this division is where you would find the content areas arranged by columns (left, right, and center). My Calendar is in the right hand column and is the first widget displayed. So, continue drilling down in the nested code.
'<div id=”content”> //previous step
'<aside id=”right”>
'<div id=”right-widget-column”>
'<div id=”widg_col_3”>
'<div id=”widgdisplay_4862770”>
My calendar widget ID appears to be “widgdisplay_4862770” but I am unsure if other sites would have the same id or if that id is individually generated and assigned. I wanted my widget to have an overall different color so I used the following in my custom CSS.
#widgdisplay_4862770
{background-color: #fffff0;}
Within this division you will find several more nested divisions. The first division relates to the wording at the top of the widget (you can think “title”).
'<div id=”widgdisplay_4862770”> //previous step
'<div id=”widgetContainer widgetFrame widg_1”>
'<div class=”widgetMenuTopCenter widg_drag_handle”>
'<div class=”widgetMenuTopLeft”>
'<div class=”widgetMenuTopRight”>
'<div class=”contentTitle”>
I wanted the word “Calendar” to be a bigger font, different color, and centered. So, in the custom CSS I wrote the following code.
#widgdisplay_4862770 .contentTitle
{font-size: 14pt; text-align: center; color: #000066;}
The rest of the widget is located in the following nested elements.
'<div id=”widgetContainer widgetFrame widg_1”> //previous step
'<div class=”menuBody widg_drag_handle”>
'<div class=”menuContrastBox”>
'<div id=”calendarWidgetFrame”>
'<div class=”widget_cal_itenerary”>
'<div class=”widget_action_footer”>
Within the itinerary class you will find the event header and events.
'<div class=”widget_cal_itenerary”> //previous step
'<div class=”widg_cal_groups”>
'<div class=”cal_event_header”>
'<div class=”widg_raid_events”>
'<div class=”cal_event_date_header”>
'<div class=”cal_event”>
To format the event header I used the following.
#calendarWidgetFrame .cal_event_header
{text-align: center; color: #995C00; font-weight: bold; background-color: transparent; font-style: italic; font-size: 13pt; text-decoration: underline;}
To format the event dates I used the following.
.cal_event_date_header
{font-size: 12pt; font-weight: bold; color: #000066;}
To format the event time and title I used the following.
.cal_event
{font-size: 10pt; text-decoration: none; padding-left: 10px; color: #003300;}
In the footer section you will find the link that takes you to the actual calendar. I formatted it in the following way.
#widgdisplay_4862770 .widget_action_footer
{font-size: 10pt; text-align:center;}
Final thoughts, plans, and questions.
I will be converting some of the formatting I listed above to the entire website. It does appear that many of the classes above are actually defined for all or most widgets.
At the moment, the only question I have is how to modify the line (or border) between the widget header (i.e., “Calendar” title) and the event title (i.e., “Raids” title)?
