分类
life

Twenty Thirteen 修改

起初接触WordPress就是因为其强大的功能和易于扩展的特性,其丰富的模板资源和插件资源是深深吸引我的源泉。 老喜欢折腾各种主题,但是其他主题折腾两天就感觉各种不适应,最后发现只有用官方默认的主题了,然后用自己微薄的CSS知识加上各路大师的指引终于修改成这个自己中意的样子…

修改头部背景图片大小使其填充满浏览器窗口
修改文件custom-header.php
修改background-size: 1600px auto;
为background-size: cover auto;
顺便记录background-size:属性的使用
用于设置背景图片的大小 5个可用属性
auto;该属性下背景图片为原本图片尺寸的大小
100px 50px;该属性下背景图片为设置像素尺寸的大小
90% 80%;该属性下背景图片为设置的容器内的百分比的尺寸大小
cover;该属性下背景图片为设置的等比扩展填满整个容器的尺寸大小
contain;该属性下背景图片为设置的等比缩小来适应包含容器的尺寸大小

网站标题和描述 居中 引用360加速的谷歌字体库
在样式表中 4.1 – Site Header 目录下 添加

.site-title,.site-description{text-align:center;font-family: Arial, sans-serif;}

这里如果标题和描述要分别使用字体 就将标题和描述标签分开单独使用
首先在谷歌字体库选好字体 然后再header部分引用要用的字体 讲谷歌域名googleapis换成360的useso

<link href=’//fonts.useso.com/css?family=Righteous|Open+Sans’ rel=’stylesheet’ type=’text/css’/>

这里是一个引用链接一次载入两个字体 字体名称之间用|隔开 没有空格. 在引用字体的时候对于字体名称中有空格的,需用+符号来代替空格, 样式表中引用字体的时候需还原回空格.
在css中使用:

site-title{text-align:center;font-family: Righteous, sans-serif;}
.site-description{text-align:center;font-family: Open Sans, sans-serif;}

这里sans-serif是后备字体 这样做是为了以防万一

修改个别文章形式的背景颜色
在样式表中  * 5.5 Post Formats 目录下
修改每种文章形式下的
background-color: #f7f5e7; 属性更改颜色
我这里将音频 图像 链接 聊天文章形式进行了修改
音频文章形式 例

/* Audio */
.format-audio {background-color: #1ea061;}
聊天为#EC7068图像为#eadaa6链接为#c84941

注 这里如果要将后台撰写新文章时的背景颜色同步更改 需修改主题文件CSS/editor-style.css里的对应颜色   修改editor-style.css的时候 从下往上看 方便更改

修改网站构架 导航栏宽度为100% 使其充满整个浏览器
样式表 * 3.0 Basic Structure目录下

.site {max-width: 1600px;} 修改为max-width: 100%;

除头部的网站整体宽度
样式表* 4.2 Navigation目录下

/* Navbar */
.navbar {max-width: 1600px;}修改为max-width: 100%

导航栏宽度

修改底部颜色
版权部分* 7.0 Footer目录下 背景颜色修改为

.site-footer {background-color: #262829;}
小工具部分* 7.0 Footer目录下 背景颜色修改为

.site-footer .sidebar-container {background-color: #2f3233;}

文章标题居中
样式表 * 5.1 Entry Header 目录下添加

.entry-header {
text-align:center
}

“Twenty Thirteen 修改”上的10条回复

发表评论

电子邮件地址不会被公开。