Sakurairo主题修改下划线

前言

在很多时候我们会看见文字下面会有一些下划线，Sakurairo主题也不例外，这期就来说说Sakurairo主题中文字添加、修改和删除下划线。

美化教程

聚焦区域的css代码大概在style.css文件的2449行。

h1.fes-title {
  color: var(--theme-skin, #505050);
  font-size: 20px;
  font-weight: var(--global-font-weight, 400);
  padding-bottom: 10px;
  padding-left: 3px;
  padding-right: 3px;
  margin-bottom: 30px;
  text-underline-offset: 10px;
  text-decoration: underline wavy var(--exhibition_area_matching_color, #ffeeeB); /*修改这一行，如果不需要就将这行注释掉或者删除*/
  transition: all 0.8s ease !important;
}

可能有些小伙伴觉得文字前面的图标和文字不在同一行不好看，那么这个代码大概在feature_v2.php文件的12行。

<h1 class="fes-title"> <i class="<?php echo iro_opt('exhibition_area_icon', 'fa-solid fa-laptop'); ?>" aria-hidden="true"></i> <br> <?php echo iro_opt('exhibition_area_title', '展示'); ?> </h1>
<!--将代码里面的<br>删除即可-->
<!--修改后的代码为-->
<h1 class="fes-title"> <i class="<?php echo iro_opt('exhibition_area_icon', 'fa-solid fa-laptop'); ?>" aria-hidden="true"></i> <?php echo iro_opt('exhibition_area_title', '展示'); ?> </h1>

文章区域的css代码大概在style.css文件的2462行。

h1.main-title {
  color: var(--theme-skin, #505050);
  font-size: 20px;
  font-weight: var(--global-font-weight, 400);
  padding-bottom: 10px;
  padding-left: 3px;
  padding-right: 3px;
  margin-bottom: 30px;
  text-underline-offset: 10px;
  text-decoration: underline wavy var(--post_list_matching_color, #ffeeeB);/*同样修改这一行，如果不需要就将这行注释掉或者删除*/
  transition: all 0.8s ease !important;
}

解决图标和文字不在同一行的代码在index.php文件的50行。

<h1 class="main-title"> <i class="<?php echo iro_opt('post_area_icon', 'fa-regular fa-bookmark'); ?>" aria-hidden="true"></i><br><?php echo iro_opt('post_area_title', '文章'); ?> </h1>
<!--将代码里面的<br>删除即可-->
<!--修改后的代码为-->
<h1 class="main-title"> <i class="<?php echo iro_opt('post_area_icon', 'fa-regular fa-bookmark'); ?>" aria-hidden="true"></i> <?php echo iro_opt('post_area_title', '文章'); ?> </h1>

友情链接页面的卡片标题下划线css代码大概在style.css文件的2014行。

span.sitename {
  font-size: 20px;
  margin-top: 84px;
  margin-left: 8px;
  margin-right: 8px;
  color: #505050;
  padding-bottom: 10px;
  display: block;
  -webkit-transition: all .3s;
  transition: all .3s;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--global-font-weight);
  text-underline-offset: 10px;
  text-decoration: underline wavy var(--friend-link-title, #ffeeeB);/*同样修改这一行，如果不需要就将这行注释掉或者删除*/
}

文章页面标题的css代码大概在sakura.css文件的106行。

h1.entry-title {
    font-size: 24px;
    font-weight: 300;
    text-decoration: underline red;/*添加这行就可以给文章标题加上一个下划线，可根据需求自行修改样式*/
}

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