咸鱼绅士 - 全网单机游戏中文整合资源网
咸鱼绅士 - 全网单机游戏中文整合资源网

子比主题美化 – 用户中心新增功能按钮美化

前言

各位憨憨宝们,我又来了。每天闲的没事,自己网上整合一些代码写了个用户中心添加按钮部分美化,代码里面都有注释,其他的如有运行报错或写法错误的话请谅解,话不多说代码在下面。

原文

子比主题美化 – 用户中心自定义按钮及内容插件

子比主题美化-给子比侧边加一个人生倒计时

效果图

20240921233858629-20240921153858241899

20240921233858806-20240921153858354593

教程

首先我们把下面的文件下载一下添加在你的网站后台插件里面,一共分了俩个步骤,看那个方便用哪个就行,都一样的。

文件

步骤一

文件下载好后 去你的宝塔后台 找到你的网站路径  /wp-content/plugins 插件路径直接丢进去解压就可以了

步骤二

WP后台 - 插件 - 安装新插件   把这个压缩包上传就可以了

以上步骤操作那个都可以,安装好后我们在插件里面启用 6ke自定义按钮

步骤三

然后上面的插件安装好了之后启动,再去宝塔后台找到这个路径  /wp-content/themes/zibll/pages 把上面 RSDJSHTML源码 里面的文件解压到这个目录即可

最后步骤

然后我们去启动好的插件 6ke自定义按钮 按照下面的代码跟截图对照添加进去就可以的了

截图

20240921235141163-20240921155141827199

代码

按钮名称

倒计时

按钮图标

<svg t="1726931731077" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2751" width="200" height="200"><path d="M128 85.333h768v85.334H128V85.333z m0 768h768v85.334H128v-85.334z" p-id="2752"></path><path d="M405.333 682.667h213.334V768H405.333v-85.333z" fill="#0078FF" p-id="2753"></path><path d="M213.333 128A42.667 42.667 0 0 1 256 85.333h512A42.667 42.667 0 0 1 810.667 128v192a42.667 42.667 0 0 1-8.982 26.197L672.725 512l128.96 165.803A42.667 42.667 0 0 1 810.667 704v192A42.667 42.667 0 0 1 768 938.667H256A42.667 42.667 0 0 1 213.333 896V704a42.667 42.667 0 0 1 8.982-26.197L351.275 512l-128.96-165.803A42.667 42.667 0 0 1 213.333 320V128z m85.334 42.667v134.698l140.352 180.438a42.667 42.667 0 0 1 0 52.394L298.667 718.635v134.698h426.666V718.635L584.981 538.197a42.667 42.667 0 0 1 0-52.394l140.352-180.438V170.667H298.667z" p-id="2754"></path><path d="M478.315 442.197l-74.667-96 67.37-52.394L512 346.496l40.981-52.693 67.371 52.394-74.667 96a42.667 42.667 0 0 1-67.37 0z" fill="#0078FF" p-id="2755"></path></svg>

内容

<style>
.iframe-container {/* 倒计时HTML居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40vh; /* 使容器的高度等于视口高度 */
}
.iframe-container iframe {
    border: none; /* 移除边框 */
    width: 50%; /* 或者其他适合的宽度 */
    height: 80%; /* 或者其他适合的高度 */
}
.center-flex {/* div a 居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}
    </style>
<body>
<!--div居中-->
<div class="center-flex">
  <h2 class="item-heading"><a >人生倒计时</a></h2>
</div>
<!----------------------------------------------------->

<!--倒计时HTML居中-->
<div class="iframe-container">
    <iframe src="/wp-content/themes/zibll/pages/RSDJS.html"></iframe>
</div>
<!----------------------------------------------------->


</body>

以上所需代码以及全部文件下载地址

修改或替换代码前一定要备份下源代码,替换后关闭文件代码编辑框后不可逆转回去

注意:替换前一定要备份下源代码 修改代码有风险 切记一定要备份一下在修改的!!!

© 版权声明
THE END
喜欢就支持一下吧
点赞11 分享

选择适合您的会员

从免费到顶配 总有一款适合你

免费

普通用户

免费畅玩 基础体验 开启游戏之旅

0
  • 基础内容浏览
  • 每日资源下载次数(2)
30天

钻石会员

尊贵特权 顶配体验 纵享全站资源

68
128
  • 基础内容浏览
  • 尊享10%推广返利
  • 部分资源折扣购买
  • 部分内容免费阅读
  • 会员用户专属群聊
  • 每日资源下载次数(∞)
专业支持7*12小时客服服务
安心购买购买资源永久可看/下载
持续更新定期高质量资源更新
内容质量大作齐全定期更新

所有方案均享客服服务,助您快速解决问题与反馈