Koilee · 好运锦鲤主题的一些美化设置
文章最后更新时间:2021年11月01日已超过453天没有更新。
喜欢此主题,如需购买主题可以点击链接购买Z-BlogPHP开运锦鲤 主题版权归李洋博客所有
分类名称右侧new图标
在主题设置-全局设置,自定义css粘贴,其中(3)是指左起第三个,设置后如下图,
PS:/zb_users/upload/img/icon_new.png 为图标文件存放路径
ul.nav-pills>li:nth-of-type(4) a:after {content: '';background: url(/zb_users/upload/img/icon_new.png) no-repeat;width: 26px;height: 14px;background-size: contain;display: inline-block;vertical-align: middle;margin-left: 5px;}
去掉侧栏栏目的三角图标
.single-post:before,.sidebar_widget:before {position:absolute;top:0;left:0;content:'';height:0;width:0;display:block;border:16px transparent solid;border-bottom-width:0;border-left-width:0;z-index:10;}
去掉站长推荐/热门文章模块的三角图标
ul#tab li.tabhover:before {position:absolute;top:0;left:0;content:'';height:0;width:0;display:block;border:16px transparent solid;border-bottom-width:0;border-left-width:0;z-index:10;}
ul#tab li.tabhover:last-child:before {right:0;border:16px transparent solid;border-bottom-width:0;border-right-width:0;left:auto;}
美化H1,H2标签 ,效果图如下
.entry h1,.entry h2 {border-top-width: 1px;border-left: 4px;border-bottom-width: 1px;border-top-style: dashed;border-bottom-style: dashed;border-top-color: #CCC;border-bottom-color: #CCC;margin-top: 15px;margin-bottom: 15px;padding-top: 4px;padding-bottom: 4px;text-indent:2em;background: #ffffff;}
.entry h1,.entry h2,.entry h3,.entry h4,.entry h5,.entry h6 {margin-bottom:18px;background-image: linear-gradient(to right, #f0f0f0 , #f8f9fa);color:#333;border: 1px dashed #c6c6c6;padding:5px;padding-left:10px;margin:20px 0;border-top-left-radius:2px;border-bottom-left-radius:2px;font-weight:bold;}
更多H1,H2标签样式
.entry h1,.entry h2,.entry h3,.entry h4,.entry h5 {border-top-width: 1px;border-bottom-width: 1px;border-top-style: dashed;border-bottom-style: dashed;margin-top: 20px;padding-top: 6px;border-left:4px solid #4693e9;border-right: 4px solid #4693e9;}
去掉代码模块前面的灰色竖线
.entry pre.prism-line-numbers{border-left: 6px;}
项目介绍模块设置教程
首先找到左侧菜单,模块管理,点击新建模块
设置名称(可自定义)文件名和ID“divproject”不可更改,设置如图:
类型选择“UL”,正文内容如下(部分名称和链接自己修改):
<li class="divproject-ebox divproject-01"> <h4>网站建设</h4> <p>关于个人网站搭建过程</p> <a class="btn btn-default btn-sm" rel="nofollow" target="_blank" href="/grjz.html">点击直达</a> </li> <li class="divproject-ebox divproject-02"> <h4>学无止境</h4> <p>好好学习 天天向上</p> <a class="btn btn-default btn-sm" rel="nofollow" target="_blank" href="/list-3.html">点击直达</a> </li> <li class="divproject-ebox divproject-03"> <h4>七扯八扯</h4> <p>无边际地随笔杂谈</p> <a class="btn btn-default btn-sm" rel="nofollow" target="_blank" href="/list-4.html">点击直达</a> </li> <li class="divproject-ebox divproject-04"> <h4>其他问题解决</h4> <p>解决建站所遇到的问题</p> <a class="btn btn-default btn-sm" rel="nofollow" target="_blank" href="tencent://message/?uin=346284985&Site=AhaoYw.com&Menu=yes">联系我们</a> </li> <li class="divproject-ebox divproject-100"> <h4>专栏(作者)-阿豪</h4> <p>IT技术 | 旅游内容 | 人生感悟 | 阅读分享</p> <a class="btn btn-default btn-sm" rel="nofollow" target="_blank" href="/author-1.html">关于阿豪</a> </li>
PS:仅仅可以修改文字和链接,其他格式勿动,否则可能出现错乱。
设置图片广告
广告位代码如下
<a href="目标链接或者不跳转可以填写/" title="说明"> <img src="图片网址" alt="图片说明"> </a>
2020鼠年快乐
* 像草根一样紧贴着地面低调的存在 */ * * .--, .--, * ( ( \.---./ ) ) * '.__/o o\__.' * {= ^ =} * > - < * / \ * // \\ * //| . |\\ * "'\ /'"_.-~^`'-. * \ _ /--' ` * ___)( )(___ * (((__) (__))) "鼠"不尽的快乐、钞票和幸福!*/
锦鲤主题设置支持PJAX功能
(开启步骤,登录后台,主题设置-广告设置-脚本代码接口(非广告代码),复制下方代码,粘贴,右侧开启脚本,然后回到后台首页,点击“[清空缓存并重新编译模板]”前台刷新查看效果。
特别主题:开启PJAX之后,务必关闭“文章新窗口”(功能设置-文章新窗口,关闭)否则pjax功能失效,导致某些页面出错!
<div class="pjax_loading"></div>
<script src="//网址/zb_users/theme/koilee/script/jquery.pjax.js"></script>
导航二级菜单设置
方法:模块管理---导航栏,直接复制粘贴,名称和链接修改成自己的
<li class="menu-item-has-children"> <a href="/">一级菜单</a> <ul class="dropdown-menu sub-menu"> <li><a href="/">二级菜单</a></li> <li><a href="/">二级菜单</a></li> </ul> </li>
最新文章提示图标设置
.ong-news,.post_box .post_box_top,.post_box .news {background:url(图标地址);position:absolute;width:51px;height:51px;right:0px;top:0px;z-index:9;}
侧栏圆角设置
.sidebar_widget { overflow:hidden;margin-bottom:15px; background:#fff; border:1px solid #eee; vertical-align:top; -webkit-transition:all .3s ease-out 0s; -o-transition:all .3s ease-out 0s; transition:all .3s ease-out 0s; border-radius:2px; box-shadow:0 1px 3px 0 rgba(0,0,0,.08); position:relative; border-radius: 18px;}
这段CSS是设置圆角图标
border-radius: 18px;
文章页面圆角设置
.single-post {position:relative;padding:0px 30px;border-radius:18px;}
首页友情链接圆角设置
.home_links {margin-bottom:14px;margin-top:15px;border:1px solid #ddd;background-color:#fff;vertical-align:top;-webkit-transition:all .3s ease-out 0s;-o-transition:all .3s ease-out 0s;transition:all .3s ease-out 0s;border-radius:2px;box-shadow:0 1px 3px 0 rgba(0,0,0,.08);border-radius:18px;}
UEditor编辑器去掉右上角的语言显示
div.prism-show-language{/* position:relative; */}
赏析标题设置
h2.sx-title {margin:-10px 0 0 0;display:inline-block;padding:4px 15px;color:#ffffff;font-size:20px;background-color:#3690cf;}
网站公告
<h2 class="sx-title">网站公告</h3><li class="shangxi"><b>本站托管于<em>·</em><img src="/zb_users/upload/img/aliyunlogo.png" width=80px;height=25px;></b><li class="shangxi"><b>已平稳运行<em>·</em><span id="sitetime"></span></b></p>阿豪运维是一个非盈利性个人网站</p>主要分享运维经验、学习笔记、生活点滴<p class="plus">如需转载,望加上原文链接</p></p></li>
代码块CSS
/* 代码块+滚动条 */ pre.prism-line-numbers{background:#fff;border:1px dashed #ccc;width:100%;font-size:15px;font-size:1.5rem;word-break:break-all;white-space:normal;overflow:auto;margin:10px auto;} .entry pre.prism-line-numbers{border-left: 1px dashed #ccc;} ::-webkit-scrollbar {width:10px;height: 5px;}
底部链接选中颜色
默认的橙色
.footer-copyright a:hover {color:#e77918;}
蓝色的
.footer-copyright a:hover {color:#45b6f7;}
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作有参考学习价值
喜欢请点击上方【分享】,如果对您有帮助可点击上方【打赏】打赏本站。谢谢大家对阿豪运维笔记的支持。