wordpress美化:知更鸟顶部导航美化及侧边栏和两栏标题美化
知更鸟顶部导航美化及侧边栏和两栏标题美化。上完一周的班后,也逛了逛小伙伴的网站,发现许多好玩的css,才想到我也好久没有折腾网站了,于是,回到家,在小伙伴的网站上扒了一些css过来,美化了下。
上完一周的班后,也逛了逛小伙伴的网站,发现许多好玩的css,才想到我也好久没有折腾网站了,于是,回到家,在小伙伴的网站上扒了一些css过来,美化了下。
一、知更鸟顶部导航美化
将顶部导航 top-header 位置css修改成以下两种中的其中一种。
将代码放入后台,外观,主题选项目,定制风格,自定义样式里面就可以了。
1、顶部导航部添加彩色条代码:
- #top-header {
- background: #e7e7e7 url(https://wx2.sinaimg.cn/large/006VCrUsgy1fjmflwl7rog30ag004dfs.gif ) repeat-x scroll 0 100%;
- }
2、顶部导航添加渐变色
- #top-header {
- background: linear-gradient(-30deg,rgba(255,213,60,.71) 10%,rgba(161,230,243,.78)) no-repeat;
- border-bottom: 1px solid #dedede;
- }
二、侧边栏和两栏标题美化
6-27注:begin最新版下面修改失效,更多请自行折腾。
将侧边栏标题 sidebar h3 位置css修改成以下。
- #sidebar h3 {
- background: #fff;
- height: 37.5px;
- line-height: 37.5px;
- border-bottom: 1px solid #e2e1e1;
- margin: 0 20px 0 20px;
- text-align: center;
- font-size: 1.8rem;
- letter-spacing: 4px;
- color: #606777;
- }
按照以上css修改后,标题栏位置还多了一个 .title-i ,后台找到 .title-i 将其隐藏。
- .title-i {
- float: left;
- width: 16px;
- display: none;
- }
将 .title-i 隐藏后,如下效果图。
然后,如果使用杂志布局的会发现两栏位置前面的 标题ICO 也会不见了,下图红圈的位置。
然后,将 .cat-box .cat-title a 位置css修改成以下即可。
- .cat-box .cat-title a {
- float: left;
- width: 95%;
- margin-left: 20px;
- color: #606777;
- }
两栏标题美化后
经过一番折腾,美化了一些,代码也是在小伙伴站扒的,还扒了一些其他的,不好全部写出来,需要的小伙伴自己扒吧。
1. 如有链接无法下载、失效或广告,请联系QQ:181289218 处理!
2. 本站的所有资源为购买、网络收集,或者用户投稿的资源,版权归原作者及网站所有!
3. 如若侵犯了您的权利,请及时联系站长删除!
4. 本站提供的资源,都不包含技术服务请大家谅解!
5. 此软件“仅限学习交流,不能用于商业用途”!
6. 如用于商业用途,请到官方购买正版软件,追究法律责任与“云墨SEO”站点无关!
2. 本站的所有资源为购买、网络收集,或者用户投稿的资源,版权归原作者及网站所有!
3. 如若侵犯了您的权利,请及时联系站长删除!
4. 本站提供的资源,都不包含技术服务请大家谅解!
5. 此软件“仅限学习交流,不能用于商业用途”!
6. 如用于商业用途,请到官方购买正版软件,追究法律责任与“云墨SEO”站点无关!
- 我的微信
- 这是我的微信扫一扫
- 站长技术资源群
- QQ群:431710796
评论