wordpress美化:知更鸟顶部导航美化及侧边栏和两栏标题美化

云墨
云墨
云墨
631
文章
11
评论
2018年8月29日 评论 307

wordpress美化:知更鸟顶部导航美化及侧边栏和两栏标题美化

知更鸟顶部导航美化及侧边栏和两栏标题美化。上完一周的班后,也逛了逛小伙伴的网站,发现许多好玩的css,才想到我也好久没有折腾网站了,于是,回到家,在小伙伴的网站上扒了一些css过来,美化了下。

上完一周的班后,也逛了逛小伙伴的网站,发现许多好玩的css,才想到我也好久没有折腾网站了,于是,回到家,在小伙伴的网站上扒了一些css过来,美化了下。

一、知更鸟顶部导航美化

将顶部导航 top-header 位置css修改成以下两种中的其中一种。

将代码放入后台,外观,主题选项目,定制风格,自定义样式里面就可以了。

1、顶部导航部添加彩色条代码:

  1. #top-header {
  2.     background: #e7e7e7 url(https://wx2.sinaimg.cn/large/006VCrUsgy1fjmflwl7rog30ag004dfs.gif ) repeat-x scroll 0 100%;
  3. }

wordpress美化:知更鸟顶部导航美化及侧边栏和两栏标题美化

2、顶部导航添加渐变色

  1. #top-header {
  2.     background: linear-gradient(-30deg,rgba(255,213,60,.7110%,rgba(161,230,243,.78)) no-repeat;
  3.     border-bottom: 1px solid #dedede;
  4. }

二、侧边栏和两栏标题美化

6-27注:begin最新版下面修改失效,更多请自行折腾。

将侧边栏标题 sidebar h3  位置css修改成以下。

  1. #sidebar h3 {
  2.     background: #fff;
  3.     height: 37.5px;
  4.     line-height: 37.5px;
  5.     border-bottom: 1px solid #e2e1e1;
  6.     margin: 0 20px 0 20px;
  7.     text-align: center;
  8.     font-size: 1.8rem;
  9.     letter-spacing: 4px;
  10.     color: #606777;
  11. }

按照以上css修改后,标题栏位置还多了一个 .title-i  ,后台找到 .title-i  将其隐藏。

  1. .title-i {
  2.     float: left;
  3.     width: 16px;
  4.     display: none;
  5. }

将  .title-i  隐藏后,如下效果图。

wordpress美化:知更鸟顶部导航美化及侧边栏和两栏标题美化

然后,如果使用杂志布局的会发现两栏位置前面的 标题ICO 也会不见了,下图红圈的位置。

wordpress美化:知更鸟顶部导航美化及侧边栏和两栏标题美化

然后,将 .cat-box .cat-title a  位置css修改成以下即可。

  1. .cat-box .cat-title a {
  2.     float: left;
  3.     width: 95%;
  4.     margin-left: 20px;
  5.     color: #606777;
  6. }

wordpress美化:知更鸟顶部导航美化及侧边栏和两栏标题美化

两栏标题美化后

经过一番折腾,美化了一些,代码也是在小伙伴站扒的,还扒了一些其他的,不好全部写出来,需要的小伙伴自己扒吧。

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 站长技术资源群
  • QQ群:431710796
  • weinxin
云墨
  • 本文由 发表于 2018年8月29日
  • 转载请务必保留本文链接:https://www.yunmoseo.com/1426.html
WordPress回复评论自动添加@评论者的修改方法 网站建设

WordPress回复评论自动添加@评论者的修改方法

有网友留言,问我这个@昵称回复如何实现的?如下图: 其实之前我也看到很多博客有这样的功能,但是我是在后台审核并回复评论的,之前有好几次因为没注意评论信息栏的:回复给***,还以为是给我的留言,所以给人...
匿名

发表评论

匿名网友