WordPress的小工具选项中有个日历样式,但其形态不够好看,各种样式间没什么差别,甚至连今天都不知道是几号。为了便于使用,我们可以修改其样式。当然也可以用日历插件,但速度和兼容性可能是个问题,所以还是建议直接改它的CSS代码的好。
打开主题下面的style.css文件,在任意位置加入如下所示代码(可自行参照修改):
/*-----calendar-----*/ .widget_calendar h3 { display:none; } #wp-calendar { /*选择日历模块的宽度,如255px,100%表示自适应*/ 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; }
上面的代码间可以互相参考修改,颜色值也是可以修改的,十六进制颜色值,样式:color: #RRGGBB。当然也可以为星期六、星期天单独加上颜色,过程稍微复杂一些,可以G下。
保存style.css,刷新网页,就能看到效果了。我修改后的日历如下图所示。大家也可以根据自己的喜欢来自定义css代码。
欢迎转载,转载请注明出处:蔓草札记 » 修改WordPress的默认日历样式