本文作者:吴先生

Koilee · 开运锦鲤主题的一些美化设置

吴先生 3个月前 ( 09-11 ) 339
Koilee · 开运锦鲤主题的一些美化设置摘要: 喜欢此主题,如需购买主题可以点击链接购买Z-BlogPHP开运锦鲤   主题版权归李洋博客所有分类名称右侧new图标在主题设置-全局设置,自定义css粘贴,其中...

喜欢此主题,如需购买主题可以点击链接购买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;}

image.png

去掉侧栏栏目的三角图标

.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;}

image.pngimage.png

去掉站长推荐/热门文章模块的三角图标

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;}

image.pngimage.png

美化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;}

image.png

.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;}

image.png

去掉代码模块前面的灰色竖线

.entry pre.prism-line-numbers{border-left: 6px;}

image.pngimage.png

项目介绍模块设置教程

首先找到左侧菜单,模块管理,点击新建模块

image.png

设置名称(可自定义)文件名和ID“divproject”不可更改,设置如图:

image.png

类型选择“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=Senlon.Net&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;}


文章版权及转载声明

作者:吴先生本文地址:https://www.ahaoyw.com/article/433.html发布于 3个月前 ( 09-11 )
文章转载或复制请以超链接形式并注明出处阿豪 Blog(阿豪运维笔记)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

分享