夏沫博客

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

夏沫

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

样式美化合集:

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

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

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

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

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

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

7.修改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主题选中文章浮动背景效果

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

效果:
代码:
  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主题给顶部菜单栏目加颜色背景

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

效果:

代码:

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

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主题文章标题居中加颜色背景

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

效果:

代码:

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

修改begin主题手机菜单样式

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

效果:

代码:

  1. /*修改begin主题手机菜单*/
  2. i.be.be-menu {
  3.     display: none;
  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主题分享点赞按钮样式

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

效果:

代码:

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

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

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

效果:

代码:

  1. .comment-author .author-admin i:after {
  2.     content: "博主";
  3. }
  4. span.author-mark.author-admin {
  5.     background: #7ea0f0;
  6.     color: #fff;
  7.     padding: 1px 3px;
  8.     border-radius: 2px;
  9. }