Twenty Ten Post Calendar Icon

post calendarAdding a post calendar icon to the Twenty Ten WordPress theme to display the publish-date is a simple task, that only requires adding a little code to the loop.php and style.css files. We are going to style the Calendar with pure CSS, instead of using a background image.

The Code for Loop.php

1
2
3
4
<div class="calendar">
    <span class="month"><?php the_time("M", get_option(‘date_format’)); ?></span>
    <span class="day"><?php the_time("d", get_option(‘date_format’)); ?></span>
</div><!– calendar –>

So first we are going to open up the editor under the Appearance tab and click on the loop.php template, then we are going to scroll about half way down the page till we see the Aside format and we are going to paste the code above right after the “entry-content” div.

aside calendarThen we are going to scroll down the page a little bit more until you see “How to display all other posts.” and we are going to paste the code right above the “entry-title”. So the that title will display in-line with our calendar icon.

all-other-post-calendar

Now we can update the file and open up the stylesheet (style.css).

The Code for style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/* Post Calendar
————————————————————– */

.calendar {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    background: #ebebeb;
    border: 1px solid #555555;
    font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
    float: left;
    margin-right: 20px;
    width: 41px;
    height: 47px;
    font-size: 12px;
}
.calendar > span {
    display: block;
}
.calendar > .month {
    -moz-border-top-left-radius: 3px;
    -moz-border-top-right-radius: 3px;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: #53A4E6;
    border-bottom: 1px solid #555555;
    font-weight: bold;
    padding: 0 2px 0 2px;
    text-align: center;
    color: #ffffff;
    line-height: 1.5;
}
.calendar > .day {
    -moz-border-bottom-left-radius: 3px;
    -moz-border-botton-right-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    background: #f6f6f6;
    padding: 2px 0 2px 0;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color: #000000;
    line-height: 1.3;
}
.entry-title {
       clear: right;
}

Now we can copy and Paste the CSS above into our stylesheet ( style.css ) somewhere in the middle, I put mine down toward the bottom right before   /*=Print Style*/.  And thats it we are all done, you can now style it how you like changing the colors and removing the radius and shadows if you like, you can also style it with a background-image.

Twentyten post calendar

5 Responses to Twenty Ten Post Calendar Icon

  1. imsuperaff@hotmail.com says:

    This is amazing. Thank you for your code. I like it. I have now the current date. It helps to people to know what is the date for the day and will remember it.

  2. Great tip, thanks. Now … any idea how to remove the default “Posted on” line?

  3. […] Ten Post Calendar Icon 发布在 2011 年 9 月 18 日 by yoursafTwenty Ten Post Calendar Icon 分类: WordPress 发表评论 评论 (0) 引用 (0) […]

  4. […] fra internett, blant annet Easyslider for å lage lysbildeeffekten i galleriene, en snutt herfra for å vise kalenderbladet ved siden av nye innlegg. Og på Morguefile finner du bilder du kan […]