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

教程336,1396字数 1986阅读6分37秒阅读模式

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

样式美化合集:

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

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

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

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

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

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

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

知更鸟begin主题样式美化合集-图片1

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主题样式美化合集-图片2

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主题样式美化合集-图片3

代码:

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

begin主题面包屑导航栏美化

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

效果:知更鸟begin主题样式美化合集-图片4

代码:

  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主题样式美化合集-图片5

代码:

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

修改begin主题手机菜单样式

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

效果:知更鸟begin主题样式美化合集-图片6

代码:

  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主题样式美化合集-图片7

代码:

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

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

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

效果:

知更鸟begin主题样式美化合集-图片8

代码:

  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
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
  • 知更鸟主题
  • begin主题美化
  • 代码
  • begin主题
  • 个人博客
  • 主题设置
评论  3  访客  3
    • 惦记博客 0

      打卡成功,现在时间:11点33分记得每天坚持打卡哦!

      •     小熊资源网 2

        写的很好 :!: 我搬了

        • ,, 0

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

        发表评论

        匿名网友
        :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
        确定

        拖动滑块以完成验证