Ripro主题美化-列表页

先看一下美化前后的效果对比

右上角增加装饰点,文章块增加点击效果

修改方法:

增加装饰点的修改方法:修改文件inc/theme-functions.php

<?php endif;

        if ( $categories && $options['category'] ) : ?>
//大约在115行-118行左右,修改成下面的格式
<?php endif; ?>
        <i class="title-iconse float-rightse"></i>';
        <?php
        if ( $categories && $options['category'] ) : ?>

增加装饰点样式及文章块点击效果样式:主题设置-顶部设置-自定义css代码,增加如下代码后保存设置

title-iconse {
    height: 8px;
    width: 8px;
    background: #fd4b4b;
    padding: 0;
    display: inline-block;
    border-radius: 50%;
    line-height: 0;
    position: relative;
    -webkit-transition: ease-in-out .25s;
    transition: ease-in-out .25s;
    margin: 0 10px;
}
.float-rightse {
    float: right;
    position: absolute;
    right: 30px;
}
.title-iconse:before {
    content: " ";
    height: 8px;
    width: 8px;
    background: #ffd12a;
    border-radius: 50%;
    margin-left: 15px;
    position: absolute;
    display: block;
    -webkit-transition: ease-in-out .25s;
    transition: ease-in-out .25s;
}
.title-iconse:after {
    content: " ";
    height: 8px;
    width: 8px;
    background: #79f52a;
    border-radius: 50%;
    margin-left: 30px;
    position: absolute;
    display: block;
    -webkit-transition: ease-in-out .25s;
    transition: ease-in-out .25s;
}
.post-list:hover {
    -webkit-box-shadow: 0 34px 20px -24px rgba(136,161,206,0.3);
    box-shadow: 0 34px 20px -24px rgba(136,161,206,0.3);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -ms-transform: translateY(-5px);
}

37主题网 » Ripro主题美化-列表页

发表评论

提供最优质的资源集合

立即查看 了解详情