WordPress 系统日历样式修改

      WordPress 系统日历样式修改已关闭评论

有时 WordPress 系统日历样式需要根据自己的想法进行简单的调整,WordPress 系统日历样式修改 可以用本文的方法,如果对系统自带日历样式不满意也可以装其他日历插件来改变

使用我的引荐链接购买特斯拉Tesla产品可获得积分,用于兑换超级充电里程、服饰精品、车辆配件等奖品,点击此处前往官方了解详情。

打开主题目录下的style.css文件,在任意位置加入如下所示代码,也可以在额外的CSS处添加,可根据需要进行选择调整,不一定全部都要

/*-----calendar-----*/
.widget_calendar h3 {
	display:none;
}
/*选择日历模块的宽度,如255px,100%表示自适应*/ 
#wp-calendar {
        width:100%;
}
/*日历边界宽度及颜色*/
#wp-calendar{
        border-collapse: collapse;
        border-spacing: 0;
        border: solid 1px #00FF00; 
}
/*当天日期背景色,以及前景色*/
#wp-calendar #today {
	background:#F5F9FE;
	color:#8DDB6B;
	font-weight:bold;
}
/*当天发表有文章的*/
#wp-calendar tbody a {
	font-weight:bold;
	color:#75C6E5;
}
 /*日历表头的设置,星期一。。等等*/
#wp-calendar thead{
        background: #AAAADD; 
}
/*日历表尾的设置*/
#wp-calendar tfoot{
        background: #AAAADD; 
}
/*这里是日历标题的年月样式,分别是字体,背景色,颜色,粗体,文字间隔,对其方式,填充*/ 
#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;
}
/*去掉表尾上一月和下一月*/
#wp-calendar tfoot{
   display: none;
}

另外,隐藏或去除 WordPress 系统日历中发布文章的日期归档链接,在网上找了很久也没有找到相关的资料,受网上另外一篇讲小工具添加 nofollow 属性的文章启发,单独成文一篇

本站颜色参考Apple配色 ~