Sakurairo主题修改首页排版间距

前言

在Sakurairo主题首页中的Display和Article模块中，模块名字和模块里面的内容间距太大，有些小伙伴会不太习惯，那这期就来和大家说说怎么改这些排版。

美化教程

说明：本次教程是基于改了模块标题的下划线和换行，如果不知道怎么改的或者不知道改的是哪儿的，参考以下文章。

Sakurairo主题修改下划线

2年前

02319

Display模块

在Display模块中，标题上下的距离太大了，那么这个CSS代码是写在style.css文件中大概在2446行中的h1.fes-title中和4786行中的h1::before样式中。

h1.fes-title {
  color: var(--theme-skin, #505050);
  font-size: 20px;
  font-weight: var(--global-font-weight, 400);
  padding-bottom: 10px;/*这个是Dispaly模块标题的内边距中的下边距 参考值：0px 或者注释掉*/
  padding-left: 3px;
  padding-right: 3px;
  margin-top: 70px;/*这里是新增的。负责控制Dispaly模块标题的外边距中的上边距 参考值：70px*/
  margin-bottom: 30px;/*这个是Display模块标题的外边距的下边距 参考值：14px*/
  text-underline-offset: 10px;
/*   text-decoration: underline wavy var(--exhibition_area_matching_color, #ffeeeB); *//*这里注释的是Display原本的波浪下划线*/
  transition: all 0.8s ease !important;
}
h1.fes-title {
  color: var(--theme-skin, #505050);
  font-size: 20px;
  font-weight: var(--global-font-weight, 400);
  padding-bottom: 10px;/*这个是Dispaly模块标题的内边距中的下边距 参考值：0px 或者注释掉*/
  padding-left: 3px;
  padding-right: 3px;
  margin-top: 70px;/*这里是新增的。负责控制Dispaly模块标题的外边距中的上边距 参考值：70px*/
  margin-bottom: 30px;/*这个是Display模块标题的外边距的下边距 参考值：14px*/
  text-underline-offset: 10px;
/*   text-decoration: underline wavy var(--exhibition_area_matching_color, #ffeeeB); *//*这里注释的是Display原本的波浪下划线*/
  transition: all 0.8s ease !important;
}
h1.fes-title {
  color: var(--theme-skin, #505050);
  font-size: 20px;
  font-weight: var(--global-font-weight, 400);
  padding-bottom: 10px;/*这个是Dispaly模块标题的内边距中的下边距 参考值：0px 或者注释掉*/
  padding-left: 3px;
  padding-right: 3px;
  margin-top: 70px;/*这里是新增的。负责控制Dispaly模块标题的外边距中的上边距 参考值：70px*/
  margin-bottom: 30px;/*这个是Display模块标题的外边距的下边距 参考值：14px*/
  text-underline-offset: 10px;
/*   text-decoration: underline wavy var(--exhibition_area_matching_color, #ffeeeB); *//*这里注释的是Display原本的波浪下划线*/
  transition: all 0.8s ease !important;
}

h1::before {
  display: block;
  content: " ";
  height: 80px;/*这里可以改Dispaly模块标题上面高度 参考值：40px*/
  margin-top: -80px;
  visibility: hidden;
}
h1::before {
  display: block;
  content: " ";
  height: 80px;/*这里可以改Dispaly模块标题上面高度 参考值：40px*/
  margin-top: -80px;
  visibility: hidden;
}
h1::before {
  display: block;
  content: " ";
  height: 80px;/*这里可以改Dispaly模块标题上面高度 参考值：40px*/
  margin-top: -80px;
  visibility: hidden;
}

Article模块

在Article模块中，标题的上下边距也很大，那么这个代码是写在style.css文件中大概在2458行中的h1.main-title中和4786行中的h1::before样式中。（注意：Display模块中的h1::before样式和Article模块中的h1::before样式是同一个样式，只改一次即可）

h1.main-title {
  color: var(--theme-skin, #505050);
  font-size: 20px;
  font-weight: var(--global-font-weight, 400);
  padding-bottom: 5px;/*这个是Article模块标题的内边距中的下边距 参考值：0px 或者注释掉*/
  padding-left: 3px;
  padding-right: 3px;
  margin-bottom: 30px;/*这个是Article模块标题的外边距的下边距 参考值：5px*/
  text-underline-offset: 10px;
/*   text-decoration: underline wavy var(--post_list_matching_color, #ffeeeB); *//*这里注释的是Article原本的波浪下划线*/
  transition: all 0.8s ease !important;
}
h1.main-title {
  color: var(--theme-skin, #505050);
  font-size: 20px;
  font-weight: var(--global-font-weight, 400);
  padding-bottom: 5px;/*这个是Article模块标题的内边距中的下边距 参考值：0px 或者注释掉*/
  padding-left: 3px;
  padding-right: 3px;
  margin-bottom: 30px;/*这个是Article模块标题的外边距的下边距 参考值：5px*/
  text-underline-offset: 10px;
/*   text-decoration: underline wavy var(--post_list_matching_color, #ffeeeB); *//*这里注释的是Article原本的波浪下划线*/
  transition: all 0.8s ease !important;
}
h1.main-title {
  color: var(--theme-skin, #505050);
  font-size: 20px;
  font-weight: var(--global-font-weight, 400);
  padding-bottom: 5px;/*这个是Article模块标题的内边距中的下边距 参考值：0px 或者注释掉*/
  padding-left: 3px;
  padding-right: 3px;
  margin-bottom: 30px;/*这个是Article模块标题的外边距的下边距 参考值：5px*/
  text-underline-offset: 10px;
/*   text-decoration: underline wavy var(--post_list_matching_color, #ffeeeB); *//*这里注释的是Article原本的波浪下划线*/
  transition: all 0.8s ease !important;
}

h1::before {
  display: block;
  content: " ";
  height: 80px;/*这里可以改Dispaly模块标题上面高度 参考值：40px*/
  margin-top: -80px;
  visibility: hidden;
}
h1::before {
  display: block;
  content: " ";
  height: 80px;/*这里可以改Dispaly模块标题上面高度 参考值：40px*/
  margin-top: -80px;
  visibility: hidden;
}
h1::before {
  display: block;
  content: " ";
  height: 80px;/*这里可以改Dispaly模块标题上面高度 参考值：40px*/
  margin-top: -80px;
  visibility: hidden;
}

效果图

教程到这里就结束了，有什么不懂的，请在下方评论。Thanks♪(･ω･)ﾉ