子比美化合集

子比美化合集

016714

全屏水印

全网站通用，并非只有子比主题有效

20240530171702778-image

js代码如下

$(document).ready(function() {
       var watermark_txt = "爱折腾" + getDate();
       watermark({"watermarl_element":"watermark-wrapper", "watermark_txt":watermark_txt});
    });
    function watermark(settings) {
        //默认设置
        var defaultSettings={
            watermarl_element:"body",
            watermark_txt:"",
            watermark_x:10,//水印起始位置x轴坐标
            watermark_y:10,//水印起始位置Y轴坐标
            watermark_rows:2000,//水印行数
            watermark_cols:2000,//水印列数
            watermark_x_space:50,//水印x轴间隔
            watermark_y_space:50,//水印y轴间隔
            watermark_color:'#d7d7d7',//水印字体颜色
            watermark_alpha:0.3,//水印透明度
            watermark_fontsize:'15px',//水印字体大小
            watermark_font:'思源黑体',//水印字体
            watermark_width:500,//水印宽度
            watermark_height:50,//水印长度
            watermark_angle:15//水印倾斜度数
        };
        //采用配置项替换默认值，作用类似jquery.extend
        if(arguments.length===1&&typeof arguments[0] ==="object" ) {
            var src=arguments[0]||{};
            for(key in src) {
                if(src[key]&&defaultSettings[key]&&src[key]===defaultSettings[key]){
                    continue;
                } else if(src[key]){
                    defaultSettings[key]=src[key];
                }
            }
        }
        var oTemp = document.createDocumentFragment();
        var maskElement=document.getElementById(defaultSettings.watermarl_element) || document.body;
        //获取页面最大宽度
        var page_width = Math.max(maskElement.scrollWidth,maskElement.clientWidth);
        //获取页面最大高度
        var page_height = Math.max(maskElement.scrollHeight,maskElement.clientHeight,maskElement.scrollTop);
        //水印数量自适应元素区域尺寸
        defaultSettings.watermark_cols=Math.ceil(page_width/(defaultSettings.watermark_x_space+defaultSettings.watermark_width));
        defaultSettings.watermark_rows=Math.ceil(page_height/(defaultSettings.watermark_y_space+defaultSettings.watermark_height));
        var x;
        var y;
        for (var i = 0; i < defaultSettings.watermark_rows; i++) {
            y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
            for (var j = 0; j < defaultSettings.watermark_cols; j++) {
                x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;
                var mask_div = document.createElement('div');
                mask_div.id = 'mask_div' + i + j;
                mask_div.className = 'mask_div';
                //mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
                mask_div.innerHTML=(defaultSettings.watermark_txt);
                //设置水印div倾斜显示
                mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                mask_div.style.visibility = "";
                mask_div.style.position = "absolute";
                mask_div.style.left = x + 'px';
                mask_div.style.top = y + 'px';
                mask_div.style.overflow = "hidden";
                mask_div.style.zIndex = "1029"; // 9999
                // pointer-events:none  让水印不遮挡页面的点击事件
                mask_div.style.pointerEvents='none';
                // 设置边框
                // mask_div.style.border="solid #eee 1px";
                // 兼容IE9以下的透明度设置
                mask_div.style.filter="alpha(opacity=50)";
                mask_div.style.opacity = defaultSettings.watermark_alpha;
                mask_div.style.fontSize = defaultSettings.watermark_fontsize;
                mask_div.style.fontFamily = defaultSettings.watermark_font;
                mask_div.style.color = defaultSettings.watermark_color;
                mask_div.style.textAlign = "center";
                mask_div.style.width = defaultSettings.watermark_width + 'px';
                mask_div.style.height = defaultSettings.watermark_height + 'px';
                mask_div.style.display = "block";
                oTemp.appendChild(mask_div);
            };
        };
        maskElement.appendChild(oTemp);
    }
    function getDate() {
        var d = new Date();
        var year = d.getFullYear() >= 10 ? d.getFullYear() : ('0'+d.getFullYear());
        var month = d.getMonth()+1 >= 10 ? d.getMonth()+1 : ('0'+d.getMonth()+1);
        var day = d.getDate() >= 10 ? d.getDate() : ('0'+d.getDate());
        var hour = d.getHours() >= 10 ? d.getHours() : ('0'+d.getHours());
        var minute = d.getMinutes() >= 10 ? d.getMinutes() : ('0'+d.getMinutes());
        var second = d.getSeconds() >= 10 ? d.getSeconds() : ('0'+d.getSeconds());
        return year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
    }

自定义一个背景文字声明介绍的样式

给子比主题文章下面加一个文章介绍的背景样式代码，不仅可以在文章，看自己喜欢哪个地方就加到哪里！

20240530173343467-image

子比主题修改文章资源付费类型文字转为图标样式

找到文件路径：themes\zibll\inc\functions\zib-posts-list.php第390行添加如下代码：

$svg = '<symbol id="icon-points" viewBox="0 0 1024 1024">
<path d="M419.886252 370.432927c119.605022 0 243.995044-26.302516 318.706976-76.460106v91.304594h69.207683V185.366307C807.800911 65.18189 607.999688 0.289697 420.006126 0.289697S32.091467 65.18189 32.091467 185.366307v545.629859c0 120.184417 199.801223 185.076609 387.794785 185.07661V846.984967c-197.463666 0-318.706976-67.579385-318.706976-115.978811V566.977553c74.711932 50.037714 198.992069 76.460105 318.706976 76.460105v-69.217673c-197.463666 0-318.706976-67.569395-318.706976-115.968822V294.102686c74.711932 50.027725 199.111944 76.330241 318.706976 76.330241z m0-301.045432c197.473655 0 318.706976 67.579385 318.706976 115.978812 0 48.399426-121.24331 115.978811-318.706976 115.978811s-318.706976-67.579385-318.706976-115.978811c0.00999-48.399426 121.363185-115.978811 318.706976-115.978812z m310.056015 338.925849c-171.740545 0-261.536715 66.060971-261.536714 131.29281v350.623625c0 65.231838 89.906055 131.292809 261.536714 131.29281 170.461881 0 260.128186-65.121953 261.526725-129.894271h0.119875V539.616143c-0.119875-65.241827-89.906055-131.302799-261.6466-131.302799z m0 69.097799c126.967329 0 192.438916 43.604437 192.438917 62.195011s-65.471587 62.195011-192.438917 62.195011-192.438916-43.604437-192.438916-62.195011 65.471587-62.195011 192.438916-62.195011z m0 475.013648c-126.967329 0-192.438916-43.604437-192.438916-62.195012v-83.712527c43.844186 23.855073 108.26687 39.758456 192.438916 39.758456 84.172047 0 148.474855-15.893393 192.438917-39.758456v83.712527c0 18.590574-65.471587 62.195011-192.438917 62.195012z m0-175.366756c-126.967329 0-192.438916-43.614426-192.438916-62.195011v-83.712527c43.844186 23.855073 108.26687 39.748466 192.438916 39.748466 84.172047 0 148.474855-15.893393 192.438917-39.748466v83.712527c0 18.580585-65.471587 62.195011-192.438917 62.195011z m0 0"></path></symbol>';

第394行代码是

<span class=”em09 ml3″>’ . $mark . ‘</span>

调用的代码是（把394行修改成下面这段）：

<svg class="icon"><use xlink:href="#icon-points"></use></svg>

给多功能搜索组件的搜索图标添加一个显眼包的背景样式

20240530182456810-image

css代码

@media screen and (min-width: 850px)
{.header-slider-search .line-form .icon
  {color:#fff;}.header-slider-search .line-form .icon{color:#fff;background-color:var(--theme-color);border-radius:0 50px 50px 0;cursor:pointer;padding:15px;display:block;height:52px;width:100px;padding-right:4px;line-height:0;margin-right:-26px;border:none;position:absolute;right:0;top:-14px;}.line-form:hover{box-shadow:0 2px 30px 0 #fff;}.filter-blur .header-slider-card .zib-widget,.filter-blur .header-slider-search .line-form{overflow:hidden;}}ul li .list-img a .avatar-lg img.avatarbox_Miniimgbox {display: none;}

子比主题美化 – 二次元悬浮菜单按钮

20240531150446355-image

function内添加代码

// 二次元悬浮按钮
function adjust_footer_buttons_based_on_device() {
    if (vxras_pz('acg_float_right')) { // 判断是否开启二次元悬浮按钮
        if (wp_is_mobile()) {
            // 对于手机用户，确保原版按钮不被移除
            remove_action('wp_footer', 'acg_float_right');
            add_action('wp_footer', 'zib_float_right');
        } else {
            // 对于PC用户，移除自带悬浮按钮，确保使用二次元悬浮按钮
            remove_action('wp_footer', 'zib_float_right');
            add_action('wp_footer', 'acg_float_right');
        }
    }
}
add_action('init', 'adjust_footer_buttons_based_on_device');
//二次元按钮代码
function acg_float_right(){if (vxras_pz('acg_float_right')) { ?>
<div class="mi-acgtop">
  <div class="mi-acgtop-main">
    <!---->
    <ul class="mi-acgtop-list">
      <li class="item pay-vip">
        <a href="javascript:;">开通会员</a>
      </li>
      <li class="item">
        <a href="/user">个人中心</a>
      </li>
      <li class="item bar-mission">
        <?php echo zib_get_user_checkin_btn('' ,'今日签到', '签到过了');
        ?>
      </li>
      <li class="item">
        <a href="javascript:;" class="toggle-theme">日夜切换</a>
      </li>
      <li class="item">
        <b class="bar-mark" style="display: none;">0</b>
        <a href="/message/news">消息中心</a>
      </li>
      <li class="item main-search-btn">
        <a href="javascript:;">快速搜索</a>
      </li>
      <li class="item">
        <a data-class="full-sm" mobile-bottom="true" data-remote="https://www.vxras.com/wp-admin/admin-ajax.php?action=private_window_modal&receive_user=1"href="javascript:;" data-toggle="RefreshModal">在线客服</a>
      </li>
    </ul>
    <div class="connect">
      <div class="line">
      </div>
    </div>
    <div class="round-list">
      <div class="item float-btn qrcode-btn hover-show service-wechat">
        <span>
          <i class="fa fa-qrcode" style="font-size: 35px;margin: 3px;">
          </i>
      <div class="hover-show-con dropdown-menu">
          <div class="qrcode" data-size="100">
          </div>
          <div class="mt6 px12 muted-color">在手机上浏览此页面</div>
      </div>
        </span>
      </div>
        <a style="--this-color:#fc6976;" class="float-btn ontop fade" data-toggle="tooltip" data-placement="left" title="" href="javascript:(scrollTo());" data-original-title="返回顶部">
      <div id="return-top" class="item item-icon">
      <i class="fa fa-angle-up em12">
      </i>
      </div>
    </a>
    </div>
    <div class="cat">
    </div>
  </div>
</div>
<?php }}
add_action('wp_footer', 'acg_float_right');

css样式

/*二次元侧边栏*/
.bar-item-desc.bar-qrcode-box li{margin-bottom:10px;border:none;box-sizing:border-box;padding:24px 12px 14px;border-radius:8px;background:url(/wp-content/themes/vxras/img/bg-cat-main-code.png) no-repeat 50%;-webkit-background-size:100% 100%;-moz-background-size:100% 100%;background-size:100% 100%;}.mi-acgtop .mi-acgtop-main{position:fixed;z-index:50;left:auto;margin-top:-211px;right:20px;bottom:36px;width:56px;padding-top:36px;}.mi-acgtop .mi-acgtop-main .mi-acgtop-list{position:relative;z-index:52;height:auto;width:56px;-webkit-border-radius:28px;-moz-border-radius:28px;border-radius:28px;background-color:#ffffff;-webkit-box-shadow:0 0 6px 0 #FFD1D8;-moz-box-shadow:0 0 6px 0 #FFD1D8;box-shadow:0 0 6px 0 #FFD1D8;color: #121212;}.mi-acgtop .mi-acgtop-main .mi-acgtop-list .item.active,.mi-acgtop .mi-acgtop-main .mi-acgtop-list .item:hover{color:var(--theme-color);}.mi-acgtop .mi-acgtop-main .mi-acgtop-list .item{position:relative;display:block;height:56px;width:56px;cursor:pointer;}.mi-acgtop .mi-acgtop-main .mi-acgtop-list .item.active:before,.mi-acgtop .mi-acgtop-main .mi-acgtop-list .item:hover:before{background-color:#FFF4F4;}.mi-acgtop .mi-acgtop-main .mi-acgtop-list .item:before{content:"";position:absolute;z-index:53;left:4px;top:4px;height:48px;width:48px;-webkit-border-radius:24px;-moz-border-radius:24px;border-radius:24px;}.mi-acgtop .mi-acgtop-main .mi-acgtop-list .item span,.mi-acgtop .mi-acgtop-main .mi-acgtop-list .item a{position:relative;z-index:54;display:block;height:56px;width:56px;border:12px solid transparent;font-size:12px;color:#666666;text-align:center;letter-spacing:1px;color:inherit;display:-webkit-box;-webkit-line-clamp:2;word-wrap:break-word;word-break:break-all;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;}.mi-acgtop .mi-acgtop-main .connect{position:relative;z-index:51;display:block;height:6px;margin:0 auto;}.mi-acgtop .mi-acgtop-main .connect .line{position:absolute;left:50%;top:-3px;height:12px;width:24px;border-style:solid;border-color:#FFD1D8;border-width:0 3px;margin-left:-12px;background-color:rgba(252,105,118,0.10);-webkit-box-shadow:0 0 6px 0 #FFD1D8;-moz-box-shadow:0 0 6px 0 #FFD1D8;box-shadow:0 0 6px 0 #FFD1D8;}.mi-acgtop .mi-acgtop-main .round-list{position:relative;z-index:52;display:block;height:auto;width:56px;margin:0 auto;}.mi-acgtop .mi-acgtop-main .round-list .item:hover{color:var(--theme-color);-webkit-box-shadow:0 0 6px 0 #FFB5C3;-moz-box-shadow:0 0 6px 0 #FFB5C3;box-shadow:0 0 6px 0 #FFB5C3;}.mi-acgtop .mi-acgtop-main .round-list .item.item-icon{font-size:32px;line-height:40px;}.mi-acgtop .mi-acgtop-main .round-list .item{position:relative;display:block;height:56px;width:56px;padding:8px 4px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;margin-bottom:8px;font-size:14px;line-height:20px;text-align:center;color:#FFD1D8;background-color:#ffffff;-webkit-box-shadow:0 0 6px 0 #FFD1D8;-moz-box-shadow:0 0 6px 0 #FFD1D8;box-shadow:0 0 6px 0 #FFD1D8;cursor:pointer;}.mi-acgtop .mi-acgtop-main .round-list .item a{color:inherit;}.mi-acgtop .mi-acgtop-main .round-list .item-hover{position:absolute;left:50%;top:50%;display:none;height:0;width:0;}.mi-acgtop .mi-acgtop-main .round-list .float-qr-code .pic{display:block;height:96px;width:96px;margin:0 auto;}.mi-acgtop .mi-acgtop-main .round-list .float-qr-code .text{height:18px;font-size:12px;color:#666666;line-height:18px;text-align:center;}.mi-acgtop .mi-acgtop-main .cat{position:absolute;z-index:52;left:50%;top:0;height:40px;width:40px;margin-left:-20px;background:url(/wp-content/themes/vxras/img/cat-stand2.png) no-repeat 50%;-webkit-background-size:40px 40px;-moz-background-size:40px 40px;background-size:40px 40px;}.mi-acgtop-main .bar-item:hover .bar-item-desc{display:block;border:0;padding-right:20px;}.mi-acgtop-main .bar-item i{font-size:30px;}.round-list i.b2-rocket-2-line{font-size:30px;}.mi-newtop i{font-size:25px;}.mi-acgtop .bar-qrcode-box li:first-child{visibility:hidden;}.mi-acgtop .floater-sidebar-button:hover:after,.mi-acgtop .floater-sidebar-button:hover:before{display:block;}.mi-acgtop-list .floater-sidebar-button:before{content:attr(data-name);width:92px;height:44px;position:absolute;left:-112px;top:2px;background:#fff;box-shadow:0 2px 6px rgba(82,141,229,.2);border-radius:6px;display:block;color:#323e54;font-size:14px;font-weight:500;line-height:44px;text-align:center;display:none;}.mi-acgtop-list .floater-sidebar-button:after{content:"";width:10px;height:10px;position:absolute;left:-25px;top:50%;margin-top:-5px;background:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:2px;display:none;box-shadow:4px -4px 2px 0 rgba(82,141,229,.05);}

 

© 版权声明
分享是一种美德，转载请保留原链接 资源来源于网络，请自行辨别，请勿上当受骗
THE END
工具插件
喜欢就支持一下吧
点赞14 分享
而安的头像-折腾博客钻石会员
一个漂亮简介的导航安装教程-折腾博客
一个漂亮简介的导航安装教程
一个漂亮简介的导航安装教程
1年前 381
2024年知识付费站课堂付费课程网课合集大全【13000+个链接】-折腾博客
2024年知识付费站课堂付费课程网课合集大全【13000+个链接】
2024年知识付费站课堂付费课程网课合集大全【13000+个链接】
1年前 301
电子翻页画册源码-折腾博客
电子翻页画册源码
电子翻页画册源码
1年前 294
Chevereto v4.0.7 私有图床系统-折腾博客
Chevereto v4.0.7 私有图床系统
Chevereto v4.0.7 私有图床系统
9个月前 213
adobe全家桶-折腾博客
adobe全家桶
adobe全家桶
1年前 206
FileBird – WordPress 媒体库文件夹和文件管理器-折腾博客
FileBird – WordPress 媒体库文件夹和文件管理器
FileBird – WordPress 媒体库文件夹和文件管理器
1年前 175
相关推荐
FileBird – WordPress 媒体库文件夹和文件管理器-折腾博客
FileBird – WordPress 媒体库文件夹和文件管理器
FileBird – WordPress 媒体库文件夹和文件管理器
1年前 175
单独下载页面添加免责声明提示弹窗-折腾博客
单独下载页面添加免责声明提示弹窗
单独下载页面添加免责声明提示弹窗
1年前 171
子比美化合集-折腾博客
子比美化合集
子比美化合集
1年前 167
betterdocs 知识库文档插件-折腾博客
betterdocs 知识库文档插件
betterdocs 知识库文档插件
1年前 167
ACG美化插件-折腾博客
ACG美化插件
ACG美化插件
1年前 165
子比主题美化插件-折腾博客
子比主题美化插件
子比主题美化插件
1年前 160
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
表情
[aoman][baiyan][bishi][bizui][cahan][ciya][dabing][daku][deyi][doge][fadai][fanu][fendou][ganga][guzhang][haixiu][hanxiao][zuohengheng][zhuakuang][zhouma][zhemo][zhayanjian][zaijian][yun][youhengheng][yiwen][yinxian][xu][xieyanxiao][xiaoku][xiaojiujie][xia][wunai][wozuimei][weixiao][weiqu][tuosai][tu][touxiao][tiaopi][shui][se][saorao][qiudale][qinqin][qiaoda][piezui][penxue][nanguo][liulei][liuhan][lenghan][leiben][kun][kuaikule][ku][koubi][kelian][keai][jingya][jingxi][jingkong][jie][huaixiao][haqian][aini][OK][qiang][quantou][shengli][woshou][gouyin][baoquan][aixin][bangbangtang][xiaoyanger][xigua][hexie][pijiu][lanqiu][juhua][hecai][haobang][caidao][baojin][chi][dan][kulou][shuai][shouqiang][yangtuo][youling]

    暂无评论内容

默认头像
知识付费电子画册插件导航字体预览源码子比美化子比更好的弹窗子比插件图库图床wordpressAdobe