子比主题美化教程(备忘录)

1589613
  • CSS代码：
/*文章列表样式*/
@media screen and (min-width: 768px){.posts-item .item-thumbnail{width: 100%; height: 300px;}/*.posts-item .item-heading{text-align: center;}*/.posts-item .item-body{margin-top: 15px; width: calc(100% - 20px - 20px);}}
  • 上面该样式只有电脑、平板显示（即>768px的显示），若需要手机或者全部显示，请用下面代码：
/*文章列表样式*/
.posts-item .item-thumbnail{width: 100%; height: 300px;}/*.posts-item .item-heading{text-align: center;}*/.posts-item .item-body{margin-top: 15px; width: calc(100% - 20px - 20px);}
  • 本站正在使用的CSS样式：
/*文章列表样式*/
@media screen and (min-width: 768px){.posts-item{padding: 10px;}/*.posts-item .item-heading{font-size: 22px;}*/.posts-item .item-thumbnail{width: 100%; height: 300px;}/*.posts-item .item-heading{text-align: center;}*/.posts-item .item-body{margin-top: 15px; width: 100%;margin-left: 0px;}}
  • 在后台—》外观—》小工具—》首页-底部全宽度，自定义HTML添加下面代码即可。
<div id="wiiuii" style="box-shadow: 0 0 10px var(--main-shadow);">
<section class="buy-container">
  <div class="buy-box">
    <div class="slogan">
      <h3>梦境学习站</h3>
      <p>欢迎光临小站！</p>
    </div>
    <ul class="actions">
      <li>
        <a href="http://wpa.qq.com/msgrd?v=3&uin=361080778&site=qq&menu=yes" target="_blank" class="buy-button primary" rel="noopener noreferrer">联系站长</a>
      </li>
      <li>
        <a href="https://blog.godgy.xyz/links" target="_blank" class="demo-button" rel="noopener noreferrer">友链通道</a>
      </li>
    </ul>
  </div>
  <span class="tips"><div id="go-fav">更多精彩文章，按<span>Ctrl</span>+<span>D</span>收藏本站！</div></span>
  </section>
  </div>
<style type="text/css">
.buy-container{color: #ccc; padding: 60px 40px 50px 40px;margin: 0 auto; background: rgb(224,32,140); /*下述两行代码为兼容浏览器用，建议同步修改，亦可删除（不建议）*/background: -moz-linear-gradient(left, rgb(160,32,240) 0%, rgb(0,191,255) 100%);background: -webkit-linear-gradient(left, rgb(160,32,240) 0%,rgb(0,191,255) 100%); /*请更改此行代码，颜色为rgb模式*/background: linear-gradient(to right, rgb(160,32,240) 0%, rgb(0,191,255) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0208c', endColorstr='#fa6400',GradientType=1 );/*-webkit-border-radius: 8px;-moz-border-radius: 8px;-o-border-radius: 8px;border-radius: 8px;*/border-radius: var(--main-radius);}.buy-container .buy-box{display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; max-width: 900px; margin: 0 auto;}@media screen and (max-width: 700px){.buy-container .buy-box{display: block; text-align: center;}.buy-container .buy-box .slogan{margin-bottom: 30px;}}.buy-container .buy-box .slogan h3{color: #fff;font-size: 26px;margin: 0 0 10px 0;}@media screen and (max-width: 800px){.buy-container .buy-box .slogan h3{font-size: 24px;}}@media screen and (max-width: 500px){.buy-container .buy-box .slogan h3{font-size: 20px;}}@media screen and (max-width: 400px){.buy-container .buy-box .slogan h3{font-size: 18px;}}.buy-container .buy-box .slogan p{color: #fff;font-size: 14px;font-weight: bold;margin: 10px 0;}.buy-container .buy-box .actions{display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center;list-style-type: none;margin: 0;padding: 0;}@media screen and (max-width: 700px){.buy-container .buy-box .actions{-webkit-box-pack: justify; justify-content: center;}}.buy-container .buy-box .actions li{margin: 0;}.buy-container .buy-box .actions li:last-child{margin-left: 10px;}.buy-container .buy-box .actions li a{position: relative;color: #fff !important;font-size: 14px;font-weight: bold; line-height: 1;text-decoration: none;padding: 10px 20px;background-color: rgba(255, 255, 255, .1);-webkit-border-radius: 4px;-moz-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;-webkit-transition: .2s;-moz-transition: .2s;-o-transition: .2s;transition: .2s;}.buy-container .buy-box .actions li a:hover{-webkit-transform: translateY(-2px);-moz-transform: translateY(-2px);-o-transform: translateY(-2px);transform: translateY(-2px); -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -o-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);opacity: 1 !important;}@media screen and (max-width: 330px){.buy-container .buy-box .actions li a{font-size: 12px;}}.buy-container .buy-box .actions li a:not(.primary):before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;-webkit-box-shadow: inset 0 0 0 1px currentColor;-moz-box-shadow: inset 0 0 0 1px currentColor;-o-box-shadow: inset 0 0 0 1px currentColor;box-shadow: inset 0 0 0 1px currentColor;-webkit-border-radius: 4px;-moz-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;-khtml-opacity: .3;-moz-opacity: .3;opacity: .3;}.buy-container .buy-box .actions li a:after{display: none;}.buy-container .buy-box .actions li a.primary{color: #ff3b30 !important;background-color: #fff;}.buy-container .tips{border-top: 1px solid rgba(255, 255, 255, .1);display: block;color: #fff;font-size: 12px;text-align: center; max-width: 900px;margin: 30px auto 0 auto;padding-top: 30px;}@media screen and (max-width: 768px){.buy-container {padding: 30px 40px 30px 40px;}}#go-fav{width:100%; height:100%; line-height:30px; text-align:center; font-size:14px; font-weight:700; color:rgba(255, 255, 255, 1);}#go-fav span{padding:5px 10px; background:#f0e7e2; border-radius:8px; color:#202020; margin:0 5px;}
</style>
<script>
document.getElementById("wiiuii").parentNode.parentNode.style.padding=0;
</script>
  • 自己在弹窗内容里面添加代码即可。
<html>
    <body>
<!--文本-->
<a href="https://www.wiiuii.cn/" target="_blank"  title="梦境学习站">
    <img style="display: inline-block; width: 100%; max-width: 100%; height: auto;border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;" src="https://img.wiiuii.cn/WP-TUTU/%E9%A6%96%E9%A1%B5%E5%85%AC%E5%91%8A%E5%9B%BE/ttvvg.gif">
</a>
        <div class="text_body" style="padding-bottom: 30px;">
            <div class="text" id="container" style="font-weight:bold;">
                欢迎光临寒舍！还在使用本站《子比主题添加底部统计信息模块小工具》文章中修改版的小伙伴，出现“用户总数”不显示的，请更新一下PHP代码，我已经更新PHP代码在文章中了。另外所有教程的图片链接，请自行下载上传到本地或者上传其他图床，谢谢啦。
            </div>
        </div>
<!--文本结束-->
<script type="text/javascript">
var text = $("#container").text().trim();
        $("#container").html("");
        for(var i = 0;i < text.length;i++){
            $("#container").append("<span>"+text[i]+"</span>")
        }
        var s = 0;
        var tim = setInterval(function(){
            $("#container span").eq(s++).css("color",getColor()).show();
            if(s == text.length){
                clearInterval(tim)
            }
        }, 100)
        function getColor(){
            return "rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
        }
        </script>
    </body>
</html>
  • CSS代码：
 /*字体样式一*/
@font-face{font-family:"wiiuii";src:url(https://uploader.shimo.im/f/adjzRQKK4rMhqM7T.ttf);}
*{font-family:"wiiuii"}
/*全站字体美化*/
@font-face{
font-family: 'moe';
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.ttf');
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.otf');
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.dfont');
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.eot');
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.svg');
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.woff');
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.woff2');
}
body{
font-family:'moe';
}
.enlighter-default .enlighter{max-height:400px;overflow-y:auto !important;}.lazyloading:not(.swiper-lazy-loaded){opacity: 0;}@media (max-width:640px) {
    .meta-right .meta-view{
      display: unset !important;
    }
  }
  • 注：（非常重要）font-family是自定义字体名称（自己修改），url这是字体文件的地址（自己修改），*这是全局显示。
  • 上面两个代码用一个即可。
  • 小工具代码：
<div id="wiiuii1">
  <img src="https://www.wiiuii.cn/api/ip-label" class="post-cover-img-more ls-is-cached lazyloaded" data-src="https://www.wiiuii.cn/api/ip-label" alt="no pic now" style="/*border-radius:5px;*/border-radius: var(--main-radius);box-shadow: 0 0 10px var(--main-shadow);"><script>document.getElementById("wiiuii1").parentNode.parentNode.style.padding=0;</script></div>
  • 小工具代码：
<style type="text/css">
#update_version img{margin:0px 0 15px }#update_version a{width:30%;height:35px;border-radius:3px;text-align:center;line-height:35px;font-size:9pt;color:#fff;font-weight: 700;}.blog_link{background-color:#2ba9fa}.blog_link,.cms_link{float:left;margin-right:5%}.cms_link{background-color:#ff6969}.grid_link{float:left;background-color:#70c041}
</style>
<div id="update_version">
<a href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=361080778@qq.com" target="_blank" rel="noopener"><img title="梦境学习站" src="https://img.wiiuii.cn/WP-TUTU/WP%E6%96%87%E7%AB%A0%E9%85%8D%E5%9B%BE/%E5%9C%A8%E7%BA%BF145555.gif" alt="图片" style="border-radius:5px;" /></a>
<a class="blog_link" href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=1431258805@qq.com" target="_blank" style="background-image: linear-gradient(to right, #99CCCC, #FFCC99)"  rel="noopener">发送邮件</a>
<a class="cms_link" href="https://www.wiiuii.cn/newposts" target="_blank" style="background-image: linear-gradient(to right, #FF9999,#996699)"  rel="noopener">点击投稿</a>
<a class="grid_link" href="https://www.wiiuii.cn/about_me" target="_blank" style="background-image: linear-gradient(to right,#339933, #9933CC)"  rel="noopener">关于我们</a>
</div>
<div>
  <hr>
<a href="https://www.xxx.cn/tougao" target="_blank" rel="noopener">点击在线投稿</a>
  <br>
投稿邮箱：<b>361080778@qq.com</b>
  <br>
交流 QQ：<b><a href="https://www.wiiuii.cn" target="_blank" rel="noopener">553951349</a></b>
</div>
  • HTML代码：
<!--开始-->
                <style>
                .but-download>.but,.but-download>span{min-width: 200px;padding: .5em;margin-top: 10px;}.pay-extra-hide{background: var(--muted-border-color);display: block;margin: 10px;padding: 20px;color: var(--muted-color);border-radius: 4px;}
                .panel:hover{border: 1px solid #FF6666;}/*框颜色背景色*/
                .panel{margin-bottom: 10px; background-color: #fff; border: 1px solid #268df7; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05);}
                .panel-heading{padding: 10px 15px;border-bottom: 1px solid #268df7;border-top-left-radius: 3px;border-top-right-radius: 3px;color: #0000FF;background-color: #99CCFF;}/*边框部分颜色*/
                .panel-heading h3{margin-top: 0;margin-bottom: 0;font-size: 14px;color: #0000FF;font-family: inherit;font-weight: 500;line-height: 1.1;}
                .panel-body .help li{line-height:25px;font-size:14px;color: #000;}
                .panel-body .help li em{font-style:normal;background: #FFFFCC;padding:5px;border-radius:4px;color: #FF3399;}
                .panel-body .shengming{line-height:25px;font-size:14px;color:#C33;}
                </style>
                <div class="panel">
                     <div class="panel-heading">
                          <h3>下载说明</h3>
                     </div>
                     <div class="panel-body">
                      <ul class="help">
                        <li>1.梦境学习站所提供的压缩包若无特别说明，解压密码均为<em>godgy.xyz</em>;</li>
                        <li>2.下载后文件若为压缩包格式，请安装7Z软件或者其它压缩软件进行解压;</li>
                      <li>3.文件比较大的时候，建议使用下载工具进行下载，浏览器下载有时候会自动中断，导致下载错误;</li>
                      <li>4.资源可能会由于内容问题被和谐，导致下载链接不可用，遇到此问题，请到文章页面进行反馈，以便小站及时进行更新;</li>
                      <li>5.其他下载问题请自行搜索教程，这里不一一讲解。</li>
                      </ul>
                     </div>
                     </div>
                     <div class="panel">
                     <div class="panel-heading">
                       <h3>站长声明</h3>
                     </div>
                     <div class="panel-body">
                      <span class="shengming">本站大部分下载资源收集于网络，只做学习和交流使用，版权归原作者所有，若为付费资源，请在下载后24小时之内自觉删除，若作商业用途，请到原网站购买，由于未及时购买和付费发生的侵权行为，与本站无关。本站发布的内容若侵犯到您的权益，请联系本站删除，我们将及时处理！</span>
                     </div>
                    </div>
                <!--结束-->
  • 添加说明（注意）：主题目录zibll/pages/download.php,在合适的位置添加上面的即可，大概是在115行位置添加（我的在115行添加，不知道新版有没有变化）。
  • CSS代码：
/*手机侧边栏背景图片*/
@media (max-width: 767px){
.mobile-navbar.show,.mobile-navbar.left{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
  background-image:linear-gradient(rgba(255, 255,255,0),rgba(255,255,255, 0.3)),url(https://img.wiiuii.cn/img/20200829145305_5a9ac.jpg);}
  .mobile-nav-widget .box-body {
    background: var(--muted-border-color) !important;}
}
  • CSS代码：
/*幻灯片上一张、下一张按钮样式*/
.swiper-button-next, .swiper-button-prev{height: 70px !important;}.swiper-button-prev{border-top-right-radius: 8px;border-bottom-right-radius: 8px;}.swiper-button-next{border-top-left-radius: 8px;border-bottom-left-radius: 8px;}

1、网站管理后台 —> 主题设置 —> 文章&列表 —> 文章页  —> 文章页 在文章内容后-插入内容 ，把下面的 php 代码复制粘贴到里面即可。

2、此代码理论上适用所有主题，只需要在合适的地方添加上代码就行

3、代码中的图片我托管在 unicloud，可直接引用，部分的文字可修改成自己的

<center><span style="color: #ef0c7e;; font-size: 15px"><strong>------本页内容已结束，喜欢请分享------</strong></span></span><br /></center>
<br />
<h3 class="wp-block-zibllblock-biaoti title-theme"><strong>感谢您的来访，获取更多精彩文章请收藏本站。</strong></h3>
<a href="https://xmamx.com" target="_blank"  title="更多精彩文章，请关注“梦境学习站”">
    <img style="display: inline-block; width: 100%; max-width: 100%; height: auto;border-radius: 9px;  -webkit-border-radius: 9px; -moz-border-radius: 9px;" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f7f3f46c-2ca3-4514-81d9-6144e0e5180f/672a4dbf-0a10-4f08-aa37-6baa52c00c46.png">
</a>

效果图

图片[1]-子比主题美化教程(备忘录)-梦境学习站

1 2 3 4 5

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。

© 版权声明
文章版权声明 1、本网站名称：梦境学习站
2、本站永久网址：https://blog.godgy.xyz
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ361080778进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END
子比美化wordpress
# wordpress美化# wordpress
喜欢就支持一下吧
点赞13 分享
小梦同学的头像-梦境学习站钻石会员
实时直播换脸deepfacelive软件使用教程(2023.01.21更新)-梦境学习站
实时直播换脸deepfacelive软件使用教程(2023.01.21更新)
实时直播换脸deepfacelive软件使用教程(2023.01.21更新)
2年前 2.1W+
【必看】DFL官方使用说明-梦境学习站
【必看】DFL官方使用说明
【必看】DFL官方使用说明
2年前 1763
【老鸟进阶】练就超清Src素材的必要事项-梦境学习站
【老鸟进阶】练就超清Src素材的必要事项
【老鸟进阶】练就超清Src素材的必要事项
2年前 1761
【新手入门】deepfacelab的电脑配置要求-梦境学习站
【新手入门】deepfacelab的电脑配置要求
【新手入门】deepfacelab的电脑配置要求
2年前 1490
【老鸟进阶】deepfacelab合成参数详解-梦境学习站
【老鸟进阶】deepfacelab合成参数详解
【老鸟进阶】deepfacelab合成参数详解
2年前 1037
基于Cloudflare搭建自己的GitHub加速站 一步解决GitHub访问问题！-梦境学习站
基于Cloudflare搭建自己的GitHub加速站 一步解决GitHub访问问题！
基于Cloudflare搭建自己的GitHub加速站 一步解决GitHub访问问题！
2年前 1000
相关推荐
子比主题美化教程(备忘录)-梦境学习站
子比主题美化教程(备忘录)
子比主题美化教程(备忘录)
2年前 5896
网站常用的一些懒加载loading动态加载图-梦境学习站
网站常用的一些懒加载loading动态加载图
网站常用的一些懒加载loading动态加载图
2年前 617
网站点击彩色效果-梦境学习站
网站点击彩色效果
网站点击彩色效果
2年前 484
WordPress添加回到顶部悬挂猫咪-梦境学习站
WordPress添加回到顶部悬挂猫咪
WordPress添加回到顶部悬挂猫咪
2年前 344
WordPress侧边栏信息统计小工具-梦境学习站
WordPress侧边栏信息统计小工具
WordPress侧边栏信息统计小工具
2年前 312
WordPress添加滚动播报小工具-梦境学习站
WordPress添加滚动播报小工具
WordPress添加滚动播报小工具
2年前 274
评论 共1条
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
表情
[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]
代码

请输入代码：

确认
图片

换一句
     ——更多教程，关注小梦同学——

天气预报

点击在线投稿
投稿邮箱：361080778@qq.com
交流 QQ：361080778
标签云
集合锁优化运行时数据区虚拟手机号花生壳自动构建腾讯美图网页图片加载网页代码网速优化网易IP网云穿线程池类加载器碧蓝航线短信接码平台百度收录环球影城游戏账号