分类
More

调整WordPress主题CSS

因为没找到特别合适的WordPress主题,当前我使用的是新版WordPress预装的twentytwenty,比较简洁,但是各地地方需要通过CSS自定义调整。

现在已经不用去修改主题style.css文件,利用系统内建的CSS编辑器就能在线编辑,还能实时预览效果。最适合我这种不懂CSS的人,可以边瞎猜探索边修改。一旦改错了直接删除即可,不用事前备份style.css,相当方便。

系统内建的CSS编辑器可以在WordPress后台“外观-自定义-额外的CSS”访问。在里面添加相应的代码,优先于style.css发挥作用。

以下是我修改的地方:

1.调整Logo大小:max-height的值(最大高度,如果logo原图尺寸过小,可以尝试把max-height变成height)

/* Site Logo */
.site-logo img {
max-height: 20rem;
margin: 0 auto;
width: auto;
}

2.调整首页显示文章标题的大小:font-size的值

/* Post Title */
h2.entry-title {
margin: 0;
font-size: 3em;
}

3.调整小工具内容的字体:font-size的值

/* Widgets */
.widget-content {
font-size: 3rem;
}

4.调整文章和标题间的距离:padding-top和padding的值

/* Post Head */
.post-inner {
padding-top: 3rem;
}
/* Post Archive */
body:not(.singular) main > article:first-of-type {
padding: 5rem 0 0;
}

5.头部右上角的固定菜单字体大小:font-size值是大小

/* Primary Menu */
ul.primary-menu {
display: flex;
font-size: 2.2rem;
font-weight: 500;
letter-spacing: -0.0277em;
flex-wrap: wrap;
justify-content: flex-end;
margin: -0.8rem 0 0 -1.6rem;
}

6.修改文章页面标题大小和标题与正文的间距:修改font-size和padding的值

/* Post Header */
h1,
.heading-size-1 {
font-size: 5rem;
}
.singular .entry-header {
padding: 3rem 0;
}

就修改了这么多。自己做个记录,顺便贴出来,没准会对别人也有帮助。另外,我是个CSS零基础的,纯靠自己反复尝试。如果有错误,也欢迎指正。

发表评论

电子邮件地址不会被公开。 必填项已用*标注