知更鸟begin主题样式美化合集

夏沫
夏沫
夏沫
133
文章
4
评论
2021年11月27日23:55:21 2 9.6K 1986字阅读6分37秒

begin主题其实有很多优化样式的代码,这里分享一些简单的begin主题美化修改,都是直接在后台主题设置里添加即可,其它有关知更鸟主题的修改在本个人博客搜索主题就可以找到了。

样式美化合集:

1.begin主题顶部菜单栏改为渐变背景色

2.begin主题选中文章浮动背景效果

3.begin主题给顶部菜单栏目加颜色背景

4.begin主题面包屑导航栏美化

5.修改begin主题手机菜单样式

6.修改begin主题分享点赞按钮样式

7.修改begin主题评论回复在后面显示博主

知更鸟begin主题样式美化合集

begin主题顶部菜单栏改为渐变背景色

在后台→主题选项→定制风格→自定义样式添加代码。

代码:
  1. .header-top {
  2.     background:linear-gradient(-30deg,rgba(255,213,60,.71) 10%,rgba(161,230,243,.78)) no-repeat;
  3.     border-bottom:1px solid #dedede;
  4. }
效果:知更鸟begin主题样式美化合集

begin主题选中文章浮动背景效果

在后台→主题选项→定制风格→自定义样式添加代码。

效果:知更鸟begin主题样式美化合集
代码:
  1. .entry-more a {
  2.     opacity:0
  3. }
  4. .post:hover .entry-more a {
  5.     rightright:0;
  6.     opacity:1;
  7. }
  8. .post {
  9.     transition:all 0.3s ease 0s;
  10. }
  11. .post:hover {
  12.     transform:translateY(-3px);
  13.     z-index:1;
  14.     -webkit-box-shadow:0 15px 32px rgb(175,135,255)!important;
  15. }

begin主题给顶部菜单栏目加颜色背景

在后台→主题选项→定制风格→自定义样式添加代码。

效果:知更鸟begin主题样式美化合集

代码:

  1. .top-menu a {display:unset;background:#e33a3a94;color:#fff;padding:2px 8px;border-radius:2px;}

begin主题面包屑导航栏美化

在后台→主题选项→定制风格→自定义样式添加代码。

效果:知更鸟begin主题样式美化合集

代码:

  1. .bread {
  2.     margin:5px auto;
  3.     border:1px solid #ddd;
  4.     border-radius:2px;
  5.     background-color:#fff;
  6.     padding-top:4px;
  7.     padding-bottom:4px;
  8.     padding-left:10px;
  9.     height:auto!important;
  10.     margin:5px auto 5px auto!important;
  11. }

 

begin主题文章标题居中加颜色背景

在后台→主题选项→定制风格→自定义样式添加代码。

效果:知更鸟begin主题样式美化合集

代码:

  1. .entry-header h1 {
  2.     text-align:center;
  3.     background-color:#ced6e0;
  4. }

修改begin主题手机菜单样式

在后台→主题选项→定制风格→自定义样式添加代码。

效果:知更鸟begin主题样式美化合集

代码:

  1. /*修改begin主题手机菜单*/
  2. i.be.be-menu {
  3.     displaynone;
  4. }
  5. .bars:after,.nav-mobile:after {
  6.     content:"导航";
  7.     background:#7ea0f0;
  8.     color:#fff;
  9.     padding:1px 3px;
  10.     border-radius:2px;
  11. }
  12. @media only screen and (max-width:1025px) {
  13.     .nav-search:after {
  14.     content:"搜索";
  15.     background:#7ea0f0;
  16.     color:#fff;
  17.     padding:2px 3px;
  18.     border-radius:2px;
  19. }

 

修改begin主题分享点赞按钮样式

在后台→主题选项→定制风格→自定义样式添加代码。

效果:

知更鸟begin主题样式美化合集

代码:

  1. .sharing-box .zmy-btn-beshare {
  2.     border-radius: 5px!important;
  3. }

修改begin主题评论回复在后面显示博主

在后台→主题选项→定制风格→自定义样式添加代码。

效果:

知更鸟begin主题样式美化合集

代码:

  1. .comment-author .author-admin i:after {
  2.     content"博主";
  3. }
  4. span.author-mark.author-admin {
  5.     background#7ea0f0;
  6.     color#fff;
  7.     padding1px 3px;
  8.     border-radius: 2px;
  9. }
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
教程最后更新:2021-12-18
夏沫
  • 本文由 发表于 2021年11月27日23:55:21
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:2   其中:访客  2   博主  0
    •     小熊资源网     小熊资源网 2

      来自天朝的朋友 谷歌浏览器  Android 11 Mi 10 Pro Build/RKQ1.200826.002 辽宁省沈阳市 联通数据中心

      写的很好 :!: 我搬了

      • ,, ,, 0

        来自天朝的朋友 谷歌浏览器 Windows 10 辽宁省沈阳市 联通数据中心

        你的文章写的太好啦,赞一个 :mad:
        对方不想跟你说话并向你丢了一朵小黄花 :?: