Grow your CSS skills. Land your dream job.

Styling the WordPress calendar

  • # November 19, 2008 at 3:09 pm

    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.

    # November 19, 2008 at 3:48 pm

    you can pick your calendars elements like:

    Code:
    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

    Code:
    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

    # November 19, 2008 at 6:39 pm
    Quote:
    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

    # November 20, 2008 at 2:41 am

    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

    # November 25, 2008 at 4:38 am

    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?

    # November 25, 2008 at 1:59 pm
    "slobjones" wrote:
    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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".