Forums

slobjones

I need to style the WP (v2.6.3) calendar to fit my site layout.

Examining page source, I find these two tags:
<table id="wp-calendar">
<td class="pad">

But these don't go deep enough into the calendar to allow complete styling.

I understand that some of these functions are set in "include" functions, but I'm not sure which, if any, would allow users to edit the calendar style.

Can anyone help here?

Thanks.

ikthius

you can pick your calendars elements like:


wp-calendar>pad, 
{
    /*styling for only this calendar's pad */
}
wp-calendar>th
{
    /*style the header of the calendar*/
}
wp-calendar>tr
{
    /*style the row of the calendar*/
}
wp-calendar>td
{
    /*style the data of the calendar*/
}
wp-calendar>tfoot
{
    /*style the footer of the calendar*/
}
wp-calendar>td>a
{
    /*style the header of the calendar*/
}

here is my code for my wp calendar: amended


table#wp-calendar
{
	border:1px solid #cccccc;
}
tbody .pad
{
	background-color:#dddddd;
}
table#wp-calendar>tbody>tr>td>a
{
	font-weight:bold;
	/*color:#8796A5;
	color:#333333;*/
	font-size:16px;
	font-family:arial narrow, arial, garamond, palatino linotype, times new roman, bookman old style;
	color:#3c4a55;
}
thead>tr>th
{
	width:20px;
	height:20px;
	text-align:center;
	background-color:#cdd5de;
	border:1px solid #cccccc;
}
tbody>tr>td
{
	width:20px;
	height:20px;
	text-align:center;
	border:1px solid #cccccc;
}
tfoot>tr>td>a, tfoot>tr>td>a:link, tfoot>tr>td>a:visited, tfoot>tr>td>a:hover, tfoot>tr>td>a:active
{
	font-weight:bold;
	font-size:18px;
	height:20px;
	font-family:garamond, bookman old style, times new roman, arial narrow, arial;
	color:#5b7085;
	/*color:#3c4a55;*/
}
tfoot>tr>td#prev
{
	width:58px;
	height:20px;
	text-align:left;
	background-color:#ffffff;
}
tfoot>tr>td#next
{
	width:58px;
	height:20px;
	text-align:right;
	background-color:#ffffff;
}

I just wish I knew how to make the cells background fully fill in with colour if the cell has a link:
here is a link to the calendars page: http://www.pfs-ifa.co.uk/resources/wordpress/, the site is not fully live yet

slobjones

I just wish I knew how to make the cells background fully fill in with colour if the cell has a link

This is excellent, ikthius. Thanks very much.

The MW-Style Calendar plugin adds a "posts" class that styles the cells of any dates that contain posts. I'm not sure whether you're currently using a Calendar plugin or not, but this may do the trick for you:
http://www.meyerweb.com/eric/tools/word ... endar.html

ikthius

thanks slobjones, but reading what it will add and not add, I will just stick to this just now, as the client is very happy with it, although they not seen the extra styling, like days of week background colour, borders, and a light grey to cover the non gap days

slobjones

ikthius, check your calendar in IE, if you haven't already. Beyond the fact that IE squeezes the thing like an accordion (width styling may help with this), IE also ignores the tbody>tr>td styling.

As you can see, that means no width, height, text-align or border.

I used a simple td style and that works for the calendar body, but it also screws up the footer, leaving what appears to be a 1px box around the middle cell.

At the moment, the thing just doesn't display well in IE.

Any thoughts on how we can fix it?

ikthius

"slobjones" said:
ikthius, check your calendar in IE, if you haven't already. Beyond the fact that IE squeezes the thing like an accordion (width styling may help with this), IE also ignores the tbody>tr>td styling.

As you can see, that means no width, height, text-align or border.

I used a simple td style and that works for the calendar body, but it also screws up the footer, leaving what appears to be a 1px box around the middle cell.

At the moment, the thing just doesn't display well in IE.

Any thoughts on how we can fix it?

I checked out my wordpress calendar on FF IE8 & IE7, not checked IE6 yet and my calendar looks the same on all.

lets see your calendar/ codes

treehouse : what would you like to learn today?

Forums

Styling the WordPress calendar