子比主题幻灯片加入搜索框
幻灯片搜索框
效果图：
幻灯片：
1.在 自定义小工具 → 首页-主内容上面 新增一个 Zibll 幻灯片(新) 小工具
2. 显示规则建议 仅在PC端显示，移动端效果不太理想
3. 删除 幻灯片链接与 叠加图层
4. 叠加文案设置：
幻灯片文案（幻灯片标题）：
<h3><b>搜索本站精品资源</b></h3> <h5><b>开通会员，本站所有高质量资源随心下载</b></h5>幻灯片简介：
<form method="get" id="searchform" action="?php echo esc_url( home_url() ) ?>"> <!--action 属性规定当提交表单时，向何处发送表单数据。?php echo esc_url( home_url() ) ?>--> <div class="container"> <div id="searchs"> <input type="text" placeholder="输入关键词搜索..." name="s" id="s" class="searchInput" autocomplete="off" /> <input class="n-button" type="submit" onclick="if(document.forms['search'].searchinput.value=='- Search -')document.forms['search'].searchinput.value='';" value="搜索" /> </div> </div> </form>显示位置设置为居中显示文案视差滚动：0%
幻灯片设置：
1. 幻灯片方向 设置为 上下切换
2. 关闭 循环切换、显示翻页按钮、显示指示器、自动播放
3. 切换动画设置为 3D方块
4.电脑端高度：266px
自定义css样式：
/*幻灯片搜索css样式*/
/*搜索按钮样式*/
.n-button {
top: 1px;
right: -6px;
width: 120px;
height: 42px;
border: 1px solid #ffffff14;
border-radius: 5px;
background: #504bcc;
cursor: pointer;
font-size: 16px;
color: #fff;
font-family: Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC,
Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial,
sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
/*搜索框样式*/
#searchs input[type="text"] {
overflow: hidden;
margin: 0 auto;
padding-left: 19px;
width: 600px;
height: 42px;
border: 1px solid #ffffff14;
border-radius: 4px;
background: rgb(255 255 255 / 62%);
box-shadow: none;
color: #757575;
font-size: 14px;
line-height: 32px;
font-family: Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC,
Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial,
sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
/*幻灯片3D方块切换动画阴影透明*/
.swiper-container-cube .swiper-cube-shadow {
background: #fff0 !important;
}卡片模式一排显示5篇文章
卡片模式一排显示5篇文章
1. 先将首页侧边栏关闭，并将布局宽度设置为1200px
子比主题设置→显示&布局→侧边栏设置→首页显示侧边栏→关闭→布局宽度：1200px
2. 将文章默认列表样式设置为卡片模式：
子比主题设置→文章&列表→文章列表→默认列表模式→卡片模式
3. 自定义css样式：
/*卡片模式一排显示5篇文章*/
@media (min-width: 992px){
.fluid-widget .card, .site-layout-1 .card {
width: calc(20% - 16px);
}
}首页布局宽度1500px
首页布局宽度1500px
自定义javascript代码：
//首页布局宽度1500px
$('body').append(location.pathname === '/' ? '<style>@media (min-width: 1500px) { main.container { width: 1500px; max-width: none; } }<style>': '')主题 LOGO 扫光
主题LOGO扫光
自定义css样式：
/* logo 扫光 */
.navbar-brand {
position:relative;
overflow:hidden;
margin:0px 0 0 0px;
}
.navbar-brand:before {
content:"";
position:absolute;
left:-665px;
top:-460px;
width:200px;
height:15px;
background-color:rgba(255,255,255,.5);
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
-webkit-animation:searchLights 6s ease-in 0s infinite;
-o-animation:searchLights 6s ease-in 0s infinite;
animation:searchLights 6s ease-in 0s infinite;
}
@-moz-keyframes searchLights {
50% {
left:-100px;
top:0;
}
65% {
left:120px;
top:100px;
}
}@keyframes searchLights {
40% {
left:-100px;
top:0;
}
60% {
left:120px;
top:100px;
}
80% {
left:-100px;
top:0px;
}
}导航栏标题字体加粗
导航栏字体加粗
自定义css样式：
/*导航栏字体加粗*/
ul.nav {font-weight: 700;}用户头像呼吸光环+鼠标悬停旋转放大
用户头像呼吸光环+鼠标悬停旋转放大
自定义css样式：
/*头像呼吸光环和鼠标悬停旋转放大*/
.avatar {
border-radius:50%;
animation:light 4s ease-in-out infinite;
transition:0.5s;
}
.avatar:hover {
transform:scale(1.15) rotate(720deg);
}
@keyframes light {
0% {
box-shadow:0 0 4px #f00;
}
25% {
box-shadow:0 0 16px #0f0;
}
50% {
box-shadow:0 0 4px #00f;
}
75% {
box-shadow:0 0 16px #0f0;
}
100% {
box-shadow:0 0 4px #f00;
}
}首页文章列表悬停上浮开始
首页文章列表悬浮
自定义css样式：
/*首页文章列表悬停上浮*/
@media screen and (min-width:980px) {
.tab-content .posts-item:not(article) {
transition:all 0.3s;
}
.tab-content .posts-item:not(article):hover {
transform:translateY(-10px);
box-shadow:0 8px 10px rgba(255,112,173,0.35);
}
}主题支付模块加背景
主题支付模块加背景
zibll\zibpay\functions\zibpay-post.php文件第741行
$html = '<div class="zib-widget pay-box ' . $order_type_class . '" id="posts-pay">';改为
$html = '<div class="zib-widget pay-box ' . $order_type_class . '" id="posts-pay" style="background: linear-gradient(#f5f8fa00, #f5f8fa61), url('.zib_post_thumbnail('', 'fit-cover', true, null).');background-size: cover;background-position-y: center;">';夜间模式默认原黑色背景：（自定义css样式）
/*支付模块夜间模式原背景*/
.dark-theme #posts-pay {
background: none !important;
}网站添加图片背景
网站添加图片背景
自定义css样式：
/*网站日间主题模式图片背景*/
body {
background-image: url(http://2.5ciyuan.cn/wp-content/uploads/2022/08/indexbg.png);
background-repeat: repeat;
background-attachment: fixed;
background-position: center center;
}
/*网站夜间主题模式图片背景*/
.dark-theme {
background-position-x: center;
background-position-y: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-image: url("/**图片背景地址**/");
background-size: cover;
}添加文章更新或过期失效提示
侧边栏HTML卡片小工具
侧边栏HTML卡片小工具
网站后台 → 外观 → 小工具 → 添加一个 自定义HTML 的小工具
样式一：
HTML代码：
<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="http://2.5ciyuan.cn/newposts" target="_blank" rel="noopener"><img title="2.5次元" src="http://2.5ciyuan.cn/wp-content/uploads/2022/08/1435033980773.jpg" alt="图片" style="border-radius:5px;" /></a>
<a class="blog_link" href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=757604673@qq.com" target="_blank" style="background-image: linear-gradient(to right, #99CCCC, #FFCC99)" rel="noopener">发送邮件</a>
<a class="cms_link" href="http://2.5ciyuan.cn/newposts" target="_blank" style="background-image: linear-gradient(to right, #FF9999,#996699)" rel="noopener">点击投稿</a>
<a class="grid_link" href="http://2.5ciyuan.cn/gywm" target="_blank" style="background-image: linear-gradient(to right,#339933, #9933CC)" rel="noopener">关于我们</a>
</div>
<div>
<hr>
</div>样式二：
HTML代码：
<a class="ads" href="https://a7a7.net/" target="阿七工具" style="border-radius:5px;">
<h4>阿七的小工具</h4>
<h5>阿七推荐，安全有保障</h5>
<span class="ads-btn ads-btn-outline">立即进入</span></a>
<style>
.ads {
display:block;
padding:40px 15px;
text-align:center;
color:#fff!important;
background:#ff5719;
background-image:-webkit-linear-gradient(135deg,#bbafe7,#5368d9);
background-image:linear-gradient(135deg,#bbafe7,#5368d9)
}
.ads h4 {
margin:0;
font-size:22px;
font-weight:bold
}
.ads h5 {
margin:10px 0 0;
font-size:14px;
font-weight:bold
}
.ads.ads-btn {
margin-top:20px;
font-weight:bold
}
.ads.ads-btn:hover {
color:#ff5719
}
.ads-btn {
display:inline-block;
font-weight:normal;
margin-top:10px;
color:#666;
text-align:center;
vertical-align:top;
user-select:none;
border:none;
padding:0 36px;
line-height:38px;
font-size:14px;
border-radius:10px;
outline:0;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out
}
.ads-btn:hover,.btn:focus,.btn.focus {
outline:0;
text-decoration:none
}
.ads-btn:active,.btn.active {
outline:0;
box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)
}
.ads-btn-outline {
line-height:36px;
color:#fff;
background-color:transparent;
border:1px solid#fff
}
.ads-btn-outline:hover,.btn-outline:focus,.btn-outline.focus {
color:#343a3c;
background-color:#fff
}
</style>样式三：（滚动播报）
HTML代码：
<section id="custom_html-2" class="widget_text widget widget_custom_html mar16-b">
<meta charset="utf-8">
<!--<p align="center" class="widget-title l1 box-header">欢迎访问阿七博客</p>-->
<div class="textwidget custom-html-widget">
<aside id="php_text-8"
class="widget php_text wow fadeInUp" data-wow-delay="0.3s">
<div class="textwidget widget-text">
<style type="text/css">#container-box-1{color:#526372;text-transform:uppercase;width:100%;font-size:16px;
line-height:50px;text-align:center}#flip-box-1{overflow:hidden;height:50px}#flip-box-1 div{height:50px}#flip-box-1>div>div{color:#fff;display:inline-block;text-align:center;height:50px;width:100%}#flip-box-1
div:first-child{animation:show 8s linear infinite}.flip-box-1-1{background-color:#FF7E40}.flip-box-1-2{background-color:#C166FF}.flip-box-1-3{background-color:#737373}.flip-box-1-4{background-color:#4ec7f3}
.flip-box-1-5{background-color:#42c58a}.flip-box-1-6{background-color:#F1617D}@keyframes
show{0%{margin-top:-300px}5%{margin-top:-250px}16.666%{margin-top:-250px}21.666%{margin-top:-200px}33.332%{margin-top:-200px}38.332%{margin-top:-150px}49.998%{margin-top:-150px}54.998%{margin-top:-100px}66.664%{margin-top:-100px}71.664%{margin-top:-50px}83.33%{margin-top:-50px}88.33%{margin-top:0px}99.996%{margin-top:0px}100%{margin-top:300px}}</style><div id="container-box-1">
<div class="container-box-1-1">坚持每天来逛逛，会让你</div>
<div id="flip-box-1"><div><div class="flip-box-1-1">生活也美好了！</div>
</div><div><div class="flip-box-1-2">心情也舒畅了！</div></div>
<div><div class="flip-box-1-3">走路也有劲了！</div></div><div>
<div class="flip-box-1-4">腿也不痛了！</div></div>
<div><div class="flip-box-1-5">腰也不酸了！</div></div>
<div><div class="flip-box-1-6">工作也轻松了！</div></div>
</div><div class="container-box-1-2">你好我也好，不要忘记哦!</div></div></div>
<div class="clear"></div>
</aside></div>
</section>样式四：（日期+一言）
HTML代码：
<style>
.wiui-rqyy-demo {
width: 100%;
height: 180px;
position: relative;
}
.wiui-rqyy-item {
width: 100%;
height: 100%;
padding: 5px;
box-sizing: border-box;
color: white;
text-align: center;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
cursor: pointer;
background-image: url(https://img.lizll.com/img/202206111947797.png);
}
.wiui-rqyy-date {
font-family: Arial, Helvetica, sans-serif;
}
.wiui-rqyy-day {
font-size: 2.5rem;
font-weight: 700;
}
.wiui-rqyy-month {
font-weight: 700;
font-size: 2rem;
}
.wiui-rqyy-month::before {
content: "/";
padding-right: 2px;
}
.wiui-rqyy-text {
position: absolute;
width: 90%;
height: auto;
line-height: 30px;
font-family: "宋体";
font-size: 1.5rem;
font-weight: 700;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.wiiui-rqyy-yy::after {
display: inline-block;
content: "_";
animation: fadeInHX 1s;
animation-iteration-count: infinite;
}
@keyframes fadeInHX {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.wiui-rqyy-btn {
display: inline-block;
font-family: "新宋体";
font-weight: 700;
position: absolute;
right: 0;
bottom: 0;
margin: 10px;
}
#wiui-yybtn {
width: 100%;
position: relative;
}
#wiui-yybtn:hover {
color: #e99896;
}
#wiui-yybtn:hover > .wiui-rqyy-msg {
visibility: unset;
}
.wiui-rqyy-icon {
font-size: 18px;
}
.wiui-rqyy-msg {
visibility: hidden;
font-size: 10px;
color: #9784a0;
position: absolute;
padding: 5px;
top: -5px;
left: -60px;
border-radius: 2px;
background: white;
transition: all 0.2s;
}
.wiui-rqyy-msg::after {
content: " ";
display: inline-block;
width: 9px;
height: 9px;
background: white;
position: absolute;
top: 10px;
transform: rotate(45deg);
border-radius: 2px;
}
</style>
<div class="wiui-rqyy-demo">
<div class="wiui-rqyy-item">
<div class="wiui-rqyy-date">
<span class="wiui-rqyy-day">-</span>
<span class="wiui-rqyy-month">-</span>
</div>
<div class="wiui-rqyy-text">
<span class="wiiui-rqyy-yy">加载中...</span>
</div>
<div class="wiui-rqyy-btn">
<div id="wiui-yybtn">
<span class="wiui-rqyy-msg">换一句</span>
<i class="fa fa-dot-circle-o wiui-rqyy-icon" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<script>
$(function () {
var myDate = new Date();
var mon = myDate.getMonth() + 1;
var day = myDate.getDate();
var newMon = mon < 10 ? "0" + mon : mon;
var newDay = day < 10 ? "0" + day : day;
var rqyyLock = true;
var randRYY = parseInt(Math.random() * 10);
$(".wiui-rqyy-item").css(
"background-image",
"url(https://img.lizll.com/rqyy-imgs/rqyy-bg-" + randRYY + ".png)"
);
$(".wiui-rqyy-day").html(newDay);
$(".wiui-rqyy-month").html(newMon);
$.extend({
yyAjax: function () {
$.ajax({
// 链接
url: "https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json",
// 请求方法
type: "GET",
// 成功返回
dataType: "json",
success: function (e) {
rqyyLock = false;
var yiyanList = e.text.split("");
var newYY = "";
var yyIndex = 0;
var timer = setInterval(function () {
newYY += yiyanList[yyIndex];
yyIndex++;
if (yyIndex >= yiyanList.length) {
clearInterval(timer);
rqyyLock = true;
}
$(".wiiui-rqyy-yy").html(newYY);
}, 150);
}
});
}
});
$.yyAjax();
$("#wiui-yybtn").click(function () {
if (!rqyyLock) return;
$.yyAjax();
});
});
$(".wiui-rqyy-demo").parent().parent().css({
padding: "0",
overflow: "hidden"
});
</script>FPS帧率显示
FPS帧率显示
自定义javascript代码：
// FPS帧
$('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></div>');
var showFPS = (function(){
var requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000/60);
};
var e,pe,pid,fps,last,offset,step,appendFps;
fps = 0;
last = Date.now();
step = function(){
offset = Date.now() - last;
fps += 1;
if( offset >= 1000 ){
last += offset;
appendFps(fps);
fps = 0;
}
requestAnimationFrame( step );
};
appendFps = function(fps){
console.log(fps+'FPS');
$('#fps').html(fps+'FPS');
};
step();
})();网站左侧联系站长按钮
网站左侧联系站长按钮
自定义头部HTML代码：
<a href="//wpa.qq.com/msgrd?v=3&uin=757604673&site=qq&menu=yes" target="_blank" class="contact-help main-shadow" style="font-weight:700;" />联系站长</a><style>.contact-help{position: fixed; z-index: 101; left: 0; top: calc(50% - 30px); margin-top: -36px; width: 28px; height: 72px; transition: all .3s; font-size: 12px;background: var(--main-bg-color);border-radius: 0 5px 5px 0; padding: 8px 7px; line-height: 14px;}@media screen and (max-width: 768px){.contact-help{display:none;}}</style>