WordPress侧边栏日历样式修改

大家都知道wordpress提供文字日历的功能,我们可以用很简单的几句代码或者小工具将日历调用到博客的侧边栏。但是默认的文字日历样子比较丑陋,很多人因为不喜欢日历的样子,都不愿意在侧边栏调用日历。那么我们可以修改wordpress博客的文章日历吗?可以让其变得美观一些,个性化一些吗?答案是肯定的

在侧边栏合适的地方添加如下代码,添加文章日历功能。

  • 日历

  • 当你把代码加入后,刷新一下就可以看到了(如果博客启用了缓存,请先清除缓存)。但是这样的日历很不好看的,下面我们就通过修改样式文件style.css来修改文章日历的样式,使其变得美观、个性化。

    在控制面板里选择外观→编辑,选择Style.css,将calendar部分的代码换成以下代码。首先我说明下,这个样式不是我原创的,原创者已经找不到了。但是我进行了来一些修改和注释,使其可以在除IE系列以外的大部分主流浏览器里显示出较好的效果。

    标题、星期、日期等都已经增加了圆角效果,分别是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;
    }
    /*下一个月的*/
    
    点赞