关于Twenty Nineteen主题的修整打磨

说也强迫症没办法,看着不舒服就改,自己又不会做主题,慢慢完善,到自己满意, 使用过程中再看吧。

Twenty Nineteen主题整体不错,就是原版偏左,看着不舒服,做了以下调整。

  • 整体居中显示
  • 导航菜单缩小为小圆点
  • 背景颜色修改(改为#fdfcf8,近似#fff,但比#fff有温度)
  • 评论框大小至100%
  • entry-footer 内容修改
  • 页脚稍微调整,加入To top按钮

记录一下:

Twenty Nineteen

.entry .entry-content > *, .entry .entry-summary > *, .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *, .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * {
    max-width: calc(10 * (100vw / 12) - 28px);
}

body{width: 58em;margin: 0 auto;font-size: 0.9767em;background-color: #fdfcf8;}

.entry .entry-content p {color: #4f4f4f;}

.entry .entry-footer {
    max-width: calc(10 * (100vw / 12) - 28px);}

.entry .entry-content > *, .entry .entry-summary > *, .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *, .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * {margin: 10px 0;}

.site-header {padding: 2rem 0;}

.entry {margin-top: calc(4 * 1rem);}

body:after {position:fixed;right:15px;bottom:15px;content: "\I love lily";font-family: Comic Sans MS, Microsoft Yahei,Courier New, "Verdana";font-size: 60%;font-weight: bold;color: #444;}

.comments-area {
    max-width: calc(10 * (100vw / 12) - 28px);}

.post-navigation .nav-links .nav-previous, .post-navigation .nav-links .nav-next {
    min-width: calc(60% - 2 * 1rem);}

.entry{
background-color: #fdfcf8;}

.comment {list-style: decimal;}

#colophon .site-info {
    border-top: 1px solid #ccc;
	padding-top: 20px;}

.main-navigation {
    margin-top: 0.05rem;
    float:right;}

.site-logo {
    margin-top: -1em;}

Neve

body:after {position:fixed;right:5px;bottom:140px;content: "\I love lily";font-family: Comic Sans MS, Microsoft Yahei,Courier New, "Verdana";font-size: 70%;font-weight: bold;color: #4f4f4f;
transform: rotate(-90deg);}

body, .site-title {
    font-size: 19px;
	line-height: 1.9;}

.footer--row .footer--row-inner, .footer--row .footer--row-inner .container .row {margin: 0 auto 1.3em;}

.layout-grid .content > * {
	margin: 0;}

#content .container .col, #content .container-fluid .col {
    max-width: 100%;}

.layout-grid .content .nv-meta-list {margin-top: 0;}

.container {padding-right: 0px;
	padding-left: 0px;}

#comments ol {list-style: decimal;}

input[type="color"], input[type="date"], input[type="datetime-local"], input[type="datetime"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], textarea {
    font-size: 19px;
	border: 1px solid #ccc;}

.nv-meta-list {
	padding-bottom: 0;}

.neve-main {
    border-top: 1px solid #ccc;}

Twenty Twenty

body:after {position:fixed;right:5px;bottom:160px;content: "\I love lily";font-family: Comic Sans MS, Microsoft Yahei,Courier New, "Verdana";font-size: 65%;font-weight: bold;color: #3f3f3f;transform: rotate(-90deg);}

body, .entry-title a, :root .has-primary-color {color: #3f3f3f;}

.post-inner {
    padding-top: 3rem;}

.entry-content > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {max-width: 88rem;}.section-inner.medium {max-width: 88rem;}.wp-block-separator.is-style-wide {max-width: 88rem;
    width: 88rem;}

.section-inner {max-width: 88rem;}

.entry-content {font-size: 1.9rem;}

.singular .entry-header {padding: 2rem 0;}

h1, .heading-size-1 {font-size: 4rem;}

h2.entry-title {font-size: 4rem;}

body:not(.singular) main > article:first-of-type {padding: 3rem 0 0;}

.archive-header {padding: 3rem 0;}

hr {margin: 5rem auto;}.pagination-single {
margin-top: 5rem;}

13 Comments

Add yours

  1. 以后升级又需要调整哦

  2. 一直对代码恐惧

  3. 字体是不是有点大了,

  4. 感觉评论这里输入验证码的框框也要改改,哈哈哈。

    • 这个太长了,跟主题评论框同长度,但是目前还没找到方法,缩短了,评论框也缩短了~~

  5. 修改之后舒服多了

  6. WP的年份主题耐看

  7. 害,

    我最近升级了操作系统、PHP,也升级了wp系统,原来本就bug百出的主题现在bug更多了,想换了

    又没看到特别喜欢的,

发表评论

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

Captcha Code


TOP ↑