|
Atanasis
Owner
Joined: 22 May 2004
Posts: 4284
Location: The Net
|
|
|
 |
|
 |
|
 Posted: Mon Jul 10, 2006 7:17 pm Post subject: Customizing the look of your Archives Calendar |
 |
|
|
 |
|
 |
|
|
|
|
In this tutorial will be explained in details how you can customize the look and feel of your archives calendar with simple CSS knowledge.
As explained already the %%CALENDAR%% variable in your template is replaced by a whole calendar. In order to customize your calendar to look the way you want it, you need bit of CSS knowledge. The calendar is drawed from Blogs Organizer with predefined CSS classes for all its elements, so basically in order to customize the calendar you need to define the attributes and settings of these css clasess in your template css stylesheet and your calendar will use them.
List with the predefined CSS classes:
cal_table - this css class refers to the whole calendar table.
cal_td_back - this css class refers to the column having the link to browse back the archives, right on top at the calendar table.
cal_link_back - this css class refers to the link for browsing the archives back.
cal_td_forward - this css class refers to the column having the link to browse forward the archives, right on top at the calendar table.
cal_link_forward - this css class refers to the link for browsing the archives forward.
cal_td_header - this css class refers to the top middle header calendar column, saying the month and year of the current archives displayed.
cal_td_week - this css class refers to the columns having the week days displayed.
cal_day - this css class refers to the columns having the month's days displayed in the calendar.
cal_day_ev - this css class refers to the columns having the month's days displayed in the calendar, but exactly the day's that have archives.
cal_link - this css class refers to the links for the archives of a certain day from the calendar.
Note that the days that have archived posts are being displayed as links only!
Example CSS Stylesheet:
Belo you will find sample css class definitions you can add to your css stylesheet, in order to customize the calendar look.
Example 1) Customizing the columns having the day numbers:
.cal_day { background-color: #ffffff; color: #000000; font: 11px arial;}
In this example we made the calendar day columns with white background and the days displayed with black color, size 11px, font Arial.
Example 2) Customizing the columns having the day numbers which have archives:
.cal_day_ev { background-color: yellow;}
In this example we made the days that have archives to be with yellow background.
You can use any css style attributes in order to customize any of the calendar predefined css classes..
_________________
Thanks,
Kaktusan
 |
|
|
|
|
|
|
