本教程适用于Rizhuti-V2主题和Ripro-v2,其他主题仅供参考,演示以Rizhuti-V2为例,下面就来看看具体的主题美化教程

Rizhuti-V2美化教程
Rizhuti-V2美化教程-给小工具添加MAC样式的圆点

1.打开“rizhuti-v2-child/child-style.css”添加如下样式

/*MAC圆点美化样式*/
.title-iconse {
    height: 8px;
    width: 8px;
    background: #fd4b4b;
    padding: 0px;
    display: inline-block;
    border-radius: 50%;
    line-height: 0;
    position: relative;
    -webkit-transition: ease-in-out 0.25s;
    transition: ease-in-out 0.25s;
    margin: 0 5px;
}

.float-rightse {
    float: right;
    position: absolute;
    right: 20px;
}

.title-iconse:before {
    content: " ";
    height: 8px;
    width: 8px;
    background: #ffd12a;
    border-radius: 50%;
    margin-left: 10px;
    position: absolute;
    display: block;
    -webkit-transition: ease-in-out 0.25s;
    transition: ease-in-out 0.25s;
}

.title-iconse:after {
    content: " ";
    height: 8px;
    width: 8px;
    background: #79f52a;
    border-radius: 50%;
    margin-left: 20px;
    position: absolute;
    display: block;
    -webkit-transition: ease-in-out 0.25s;
    transition: ease-in-out 0.25s;
}
/*去掉原主题的标题前的圆点*/
.widget-title:before {
height: 0px;
width: 0px;
}

2.打开主题根目录下的“functions.php”文件,搜索 <h5 class=”widget-title”> 在此后面添加如下代码:

<i class="title-iconse float-rightse"></i>

注意:演示教程是以Rizhuti-V2子主题为例的,如果是Ripro-v2主题 文件结构也是一样的,更多主题美化教程请关注360模板吧!

发表评论

后才能评论