文章
文章
柒比贰PRO主题美化教程_合集
柒比贰PRO主题美化教程_合集

柒比贰PRO主题美化教程_合集

2024-10-15 技术教程 0 编辑
最后更新 ： 2024 年 10 月 20 日
标签 ：
暂无标签

注意：本站大部分内容均收集于网络!若内容侵犯到您的权益请联系我们！

一、显示PC版文章头部作者信息

柒比贰PRO主题美化教程_合集

显示代码：

.post-user-info {
    display: flex;
}

二、自定义用户等级颜色代码

柒比贰PRO主题美化教程_合集

美化代码：

找规律，lv0 – lv8的颜色都不同，可以自定义，一个是文字颜色一个是LV等级颜色没有重复。

.lv-icon.b2-lv0 i {
    background-color: rgb(199 194 194);
}

.lv-icon.b2-lv1 i {
        background-color: #ff9400;
}
.lv-icon.b2-lv1 b {
    color: #ff9400;
}

.lv-icon.b2-lv2 i {
    background-color: #ff9400;
}
.lv-icon.b2-lv2 b {
    color: #ff9400;
}

.lv-icon.b2-lv3 i {
    background-color: #ff3a55;
}
.lv-icon.b2-lv3 b {
    color: #ff3a55;
}

.lv-icon.b2-lv4 i {
    background-color: #ff3a55;
}
.lv-icon.b2-lv4 b {
    color: #ff3a55;
}

.lv-icon.b2-lv5 i {
    background-color: #de00ff;
}
.lv-icon.b2-lv5 b {
    color: #de00ff;
}

.lv-icon.b2-lv6 i {
    background-color: #de00ff;
}
.lv-icon.b2-lv6 b {
    color: #de00ff;
}

.lv-icon.b2-lv7 i {
    background-color: #ff0000;
}
.lv-icon.b2-lv7 b {
    color: #ff0000;
}

.lv-icon.b2-lv8 i {
    background-color: #3478f7;
}
.lv-icon.b2-lv8 b {
    color: #3478f7;
}

圈子内等级美化代码：

.author-vip{
    height: 18px;
    line-height: 18px;
    padding: 0;
    padding-left: 20px;
}

.topic-author-info-left .b2-lv1{
        background-color: #ff9400;
        height: 18px;
    line-height: 18px;
}

.topic-author-info-left .b2-lv2{
        background-color: #ff9400;
        height: 18px;
    line-height: 18px;
}


.topic-author-info-left .b2-lv3{
        background-color: #ff3a55;
        height: 18px;
    line-height: 18px;
}

.topic-author-info-left .b2-lv4{
        background-color: #ff3a55;
        height: 18px;
    line-height: 18px;
}


.topic-author-info-left .b2-lv5{
        background-color: #de00ff;
        height: 18px;
    line-height: 18px;
}

.topic-author-info-left .b2-lv6{
        background-color: #de00ff;
        height: 18px;
    line-height: 18px;
}


.topic-author-info-left .b2-lv7{
        background-color: #ff0000;
        height: 18px;
    line-height: 18px;
}

.topic-author-info-left .b2-lv8{
        background-color: #3478f7;
        height: 18px;
    line-height: 18px;
}

三、会员等级美化与自定义标识

柒比贰PRO主题美化教程_合集

文字美化代码：

只放了两种等级的代码，需要更多的 自行添加

.lv-icon.b2-vip0 b {
    color: #607a87 !important;
    background: linear-gradient(90.34deg, #e8eff0 0.27%, #e8eff0 99.7%);
    padding: 0 5px;
    border-radius: 3px;
}

.lv-icon.b2-vip1 b {
    color: #6C4A20 !important;
    background: linear-gradient(90.34deg, #FFD2A2 0.27%, #FFE2C2 99.7%);
    padding: 0 5px;
    border-radius: 3px;
}

增加图标代码：

只放了两种等级的代码，需要更多的 自行添加

/*会员标志*/
 .lv-icon.user-vip {
   height: 18px;
   line-height: 18px;
    padding: 0;
    padding-left: 20px;
} 

/*用户侧边栏面板显示问题*/
.user-w-lv {
    display: flex;
    height: 22px;
    flex-wrap: wrap;
}

.b2-vip0{
    background-image: url(图标地址1);
    background-repeat: no-repeat;
    background-size: contain;
}



.b2-vip1{
    background-image: url(图标地址2);
    background-repeat: no-repeat;
    background-size: contain;
}

四、文章加载更多BUTTON美化

柒比贰PRO主题美化教程_合集

代码：

颜色可自定义

.post-list .load-more .post-load-button:hover {
    transform: translateY(-3px);
}
.post-list .load-more .post-load-button {
    width: auto;
    border: 0;
    transition: all .3s;
    padding: 12px 40px;
    font-size: 15px;
    letter-spacing: .5px;
    background-color: var(--primary-color);
    background-image: -webkit-gradient(linear, left top, right top, from(#006eff), to(#13adff));
    background-image: -webkit-linear-gradient(left, #006eff, #13adff);
    background-image: -o-linear-gradient(left, #006eff 0, #13adff 100%);
    background-image: linear-gradient( 
90deg, #006eff, #13adff);
    -webkit-box-shadow: 0 5px 10px 0 rgb(16 110 253 / 30%);
    box-shadow: 0 5px 10px 0 rgb(16 110 253 / 30%);
    color: #fff!important;
}

 

五、网站夜间模式

柒比贰PRO主题美化教程_合集

网站footer.php引入css文件

css下载 https://img.ahap.cn/file/ahap/CSS/b2/quyl.css

js:

(function(){
    if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
        if(new Date().getHours() > 20 || new Date().getHours() < 6){
            document.body.classList.add('night');
            document.cookie = "night=1;path=/";
            $(".logo img").attr("src","https://img.ahap.cn/logo/logo.svg");
        }else{
            document.body.classList.remove('night');
            document.cookie = "night=0;path=/";
            $(".logo img").attr("src","https://img.ahap.cn/logo/logo.svg");
        }
    }else{
        var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
        if(night == '0'){
            document.body.classList.remove('night');
            $(".logo img").attr("src","https://img.ahap.cn/logo/logo.svg");
        }else if(night == '1'){
            document.body.classList.add('night');
            $(".logo img").attr("src","https://img.ahap.cn/logo/logo.svg");
        }
    }
})();

function switchNightMode(){
    var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
    if(night == '0'){
        document.body.classList.add('night');
        document.cookie = "night=1;path=/";
        $(".logo img").attr("src","https://img.ahap.cn/logo/logo.svg");
    }else{
        document.body.classList.remove('night');
        document.cookie = "night=0;path=/";
        $(".logo img").attr("src","https://img.ahap.cn/logo/logo.svg");
    }
}

按钮切换，按钮代码：

六、7b2主题打赏按钮自定义颜色

柒比贰PRO主题美化教程_合集

css代码：

#TA-con{/*修改按钮颜色*/
    background-color: #3478F7;
}
#TA-con:hover {/*修改按钮颜色——鼠标移动至按钮*/
    background-color: #3478F7;
}
#orange-mask path{/*修改动态的条颜色*/
    stroke: #f7ed34;
}
#mask path{/*修改条颜色 —— 长条*/
    stroke: rgb(52 120 247);
}
#mask ellipse{/*修改条颜色 —— 点*/
    fill: rgb(52 120 247);
}
#mask rect{/*修改条颜色 —— 短条*/
    fill: rgb(52 120 247);
}

七、弹窗登录美化

柒比贰PRO主题美化教程_合集
js代码：

有子主题就放在child.js文件中

$(function(){
/*弹窗登录效果*/
$("#login-box .login-box-content").addClass("b2-radius");
$('.login-box-content').prepend('<div class="aibk_com_login">'+
'<div class="wxlogin-sidebar">'+
'<div>'+
'<h3>大叔资源</h3>'+
'<p>优质内容分享网站 - dashuzy.com</p>'+
'</div>'+
 
'</div>'+
'</div>'
);
})

如果没有子主题可以在网站根目录自己建一个dl.js文件，在主题目录footer.php文件中底的 <？php wp_footer（） ; ？> 上面填写即可

<script src="/dl.js"></script>

引入jquery

主题根目录functions.php文件中插入下方代码:

//引入登录弹窗JS
wp_enqueue_script( 'b2-jquery','//img.ahap.cn/file/ahap/jquery.min.js', array(), null , false );

jquery.min.js文件可以自己下载到服务器

css样式代码：

代码中的图片自行替换我的是375 × 500 像素

.login-box-content {
    margin-top: 0;
    width: auto;
    display: flex;
    position: relative;
    background: #fff;
    min-width: 750px;
}
.aibk_com_login {
    width: 50%;
    position: relative;
    background: url(//img.ahap.cn/file/ahap/dl.png);
    background-size: cover;
    background-position: center 0;
}
.login-box-content .login-box-top {
    width: 50%;
    padding: 30px 30px 25px;
}
.wxlogin-sidebar {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.8) 100%);
}
.wxlogin-sidebar h3{
    color: #fff;
    font-size: 18px;
    margin-bottom: 10px;
}
.wxlogin-sidebar p{
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}
.wxlogin-sidebar>div {
    padding: 30px;
}


@media screen and (max-width: 768px){
.aibk_com_login {
    display: none;
}
.login-box-content{
 min-width: auto;
}
.login-box-content .login-box-top{
    width: 100%;
}
}

八、自定义 暂无相关结果 图标

柒比贰PRO主题美化教程_合集

子主题根目录functions.php文件中插入下方代码:

define('B2_EMPTY','<div class="empty-page"><div class="e404-page-icon">“我是svg代码”</div><p>'.__('暂无相关结果','b2').'</p></div>');

svg代码可以使用阿里巴巴矢量图

柒比贰PRO主题美化教程_合集

九、首页区块 – banner

柒比贰PRO主题美化教程_合集

自行下载html代码->首页banner

static文件放到网站目录，复制demo-po.html文件里面的代码放到 B2主题设置->模块管理->首页->添加新模块-> 调用内容为自定义，放入html代码，注意<!–载入CSS样式–>和<!–载入JS–>中的文件路径

十、个人中心美化css

柒比贰PRO主题美化教程_合集

解决简介不居中的问题

注：没有认证字样、没有头像处的V认证图标，此css仅美化图中上半部分

/*个人中心*/
.author .author-header {
    margin-top: -20px;
}
.user-panel {
    display: block;
}
.user-panel .avatar {
    margin: 0 auto;
    border-radius: 50%;
}
.user-panel-info {
    text-align: center;
    padding-top: 20px;
    padding-left: 0px;
}
.user-panel-info div{
    margin: 0 auto;
}
.user-panel-info p {
    background: rgba(0,0,0,0);
    margin-right: auto!important;
}

.mask-wrapper {
    height: 270px;
    line-height: 1;
    margin: 0 auto;
    padding: 0;
}

.editor-avatar {
    display: flex;
    align-items: center;
    flex-flow: column;
    height: 100%;
    position: absolute;
    width: 100%;
    justify-content: center;
    background: rgba(41,44,47,.4);
    color: #fff;
    font-size: 20px;
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
    border-radius: 75px;
}
.user-cover-button {
    position: absolute;
    top: 30px;
    right: 20px;
}
.user-panel-info h1 span {
    margin-right: 0;
}
@media screen and (max-width: 768px){
.mask-wrapper {
    height: 150px;
}
.user-panel .avatar {
    width: 100px;
    height: 100px;
    max-width: 100px;
    min-width: 100px;
    cursor: pointer;
    border: 5px solid #ffffff;
    position: relative;
    z-index: 4;
}
}

.vip-current {
    border: initial;
}
.entry-content p > a:hover {
    text-decoration: none!important;
}

 

声明：
1.本站大部分内容均收集于网络!若内容若侵犯到您的权益，请发送邮件至：admin@dashuzy.com，我们将第一时间处理！
2.资源所需价格并非资源售卖价格，是收集、整理、编辑详情以及本站运营的适当补贴，并且本站不提供任何免费技术支持
3.所有资源仅限于参考和学习，版权归原作者所有，更多请阅读网站声明。

给TA打赏
共{{data.count}}人
人已打赏
技术教程

2024如何解密QQ音乐/网易云音乐/酷狗音乐下载的VIP歌曲,转换格式到车载设备播放

2024-10-1 5:13:49

技术教程

记录又拍云CDN的一些WordPress问题笔记

2024-10-18 21:59:46

0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯
blank

解锁会员权限

开通会员

解锁海量优质VIP资源

立刻开通

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
客服

  • 扫码打开当前页

返回顶部