本篇教程主要实现Joe主题侧边栏卡片mac风格,具体的效果可以查看博客文章侧边栏,欢迎访问,该博客将持续更新,开发博客也将同步更新(由于博客较忙,更新不定时)。

修改图标

首先,找到public/aside.php文件,全局搜索<span class="line"></span>并替换成如下内容

1
<span class="mac_icon"></span>

当然,你也可以找到原有的关于这个的样式,然后更改成下面添加的样式。

添加样式

在自定义文件中,添加如下样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.mac_icon {
content: " ";
position: absolute;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #fc625d !important;
width: 11px;
height: 11px;
-webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
float: right;
right: 55px;
top: 17px
}

如果你还想在其他地方添加改图标样式,只需要加入<span class="mac_icon"></span>即可。

予星辰博客将持续更新,可以关注下噢,欢迎添加友链。