wordpress的功能真是太强大了， 凡云阁建站基本上都是用的这个程序，虽然此程序偏向于博客建设，但只要有合适的模版，企业网站的制作，一点都不困难。
    今天， 凡云阁与你一起来看看wordpress其自带日历样式是怎样修改的。

    wordpress自带的日历样式非常简单，但我们是可以修改其样式的，让其更加美观！

     首先要让日历在侧边栏显示出来，有两种方法，
     第一种：如果主题小工具里有日历，直接添加就行了。
     第二种：在侧边栏文件中将下列代码添加进去，

 <li>
<h2>日历</h2>
<div>
<?php get_calendar(); ?>
</div>
</li>

     当你把代码加入后，刷新一下就可以看到了（如果博客启用了缓存，请先清除缓存）。

    将日历显示出来后，我们就可以通过修改样式文件style.css来修改文章日历的样式，使其变得美观、个性化。

    样式文件style.css下载到本地用DW编辑，当然，你也可以在网站中直接修改。
标题、星期、日期等都已经增加了圆角效果，分别是5px、3px、2px，下面的注释很详细，你可以根据需要修改或者移除，各个部分的颜色以及其对应的位置我都已经详细标出，如果你不作任何修改，最终样式就与我的差不多。

/*-----calendar-----*/
.widget_calendar h3 {
        display:none;
}
#wp-calendar {
    width:100%;
}
/*选择日历模块的宽度，如255px，100%表示自适应*/
#wp-calendar #today {
        background:#F5F9FE;
        color:#8DDB6B;
        font-weight:bold;
}
/*当天日期背景色，以及前景色*/
#wp-calendar tbody a {
        font-weight:bold;
        color:#75C6E5;
}
/*当天发表有文章的*/
#wp-calendar caption {
        font:14px 'Microsoft Yahei',arial,SimSun,sans-serif;
        background:#F1F6FC;
        color:#75C6E5;
font-weight:bold;
        letter-spacing:-0.05em;
        text-align:center;
        padding:5px 0 5px 0;
        -moz-border-radius:5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
}
/*这里是标题的年月样式，分别是字体，背景色，颜色，粗体，文字间隔，对其方式，填充*/
#wp-calendar th,#wp-calendar td {
        text-align:center;
}
/*日期的对齐方式*/
#wp-calendar tbody td {
        border:1px solid #E9F0F4;
        -moz-border-radius:2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
}
/*日历单天的边框*/
#wp-calendar tbody td.pad {
        border:0 none;
}
#wp-calendar th {
        -moz-border-radius:3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        background:#BFDCE7;
        color:#fff;
}
/*星期的背景色前景色*/
#wp-calendar td#prev {
        text-align:left;
        padding-top:5px;
}
/*上一个月的*/
#wp-calendar td#next {
        text-align:right;
        padding-top:5px;
}
/*下一个月的*/

上面代码可以保存在style.css文件中的任何位置，但我建议保存在结尾处，将修改后的style.css文件上传到主题文件夹中替换原文件，然后刷新网页，就能看到修改后的效果了。 凡云阁就是用这个样式修改的。

本文固定链接: http://www.fanyun.ltd/773.html | 凡云阁