新版Begin主题侧边栏和两栏标题美化

  • 25
  • 601人已阅
  • A+
所属分类：WP建设
摘要

这个美化教程原先是在朱曙明博客看到的，他文章里提到6.27之后的begin主题无法使用这个教程，我就自己琢磨琢磨，看了下css，对比对比，就让我琢磨出了新版本的美化教程。

新版Begin主题侧边栏和两栏标题美化

将侧边栏标题 sidebar h3  位置css修改成如下所示：

  1. #sidebar h3, #sidebar-l 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 隐藏后，如下效果图：

新版Begin主题侧边栏和两栏标题美化

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

接着，将 .cat-box .cat-title a  位置css修改成以下即可。

  1. .cat-box .cat-title a {
  2. float: left;
  3. width: 98%;
  4. margin-left: 20px;
  5. color: #606777;
  6. font-size: 1.8rem;
  7. }

要注意font-size: 1.8rem;是原先的教程中没有的，新版本的Begin主题需要再加入这条代码，不然标题很小。

以上就是美化侧边栏和两栏标题的教程，具体效果请移步至本博客首页查看。

发表评论

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

目前评论：25   其中：访客  13   博主  12

    • avatar 堆爱博客 来自天朝的朋友 火狐浏览器 Windows 10 贵州省铜仁地区 电信 2
      回复 2018年8月31日 15:39  12楼

      侧边栏整成圆角看着应该舒服一些。

      • avatar 区块链 来自天朝的朋友 谷歌浏览器 Windows 10 云南省昆明市 电信 3
        回复 2018年8月14日 09:58  11楼

        还是挺漂亮的。

        • avatar 久伴博客 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省武汉市 电信 3
          回复 2018年8月13日 11:20  10楼

          我偷走了 :grin:

          • avatar 最值买 来自天朝的朋友 谷歌浏览器 Windows 10 广东省湛江市 电信 0
            回复 2018年8月11日 15:55  9楼

            同样是begin主题 好久没更新了

            • avatar 大国小事 来自天朝的朋友 谷歌浏览器 Linux 湖北省武汉市 联通 0
              回复 2018年8月11日 11:36  8楼

              确实不错，字数少了

              • avatar boke112导航 来自天朝的朋友 谷歌浏览器 Windows 7 广西南宁市 电信 5
                回复 2018年8月10日 08:54  7楼

                博客在于折腾，不错

                • avatar 老杨 来自天朝的朋友 谷歌浏览器 Windows 7 广东省肇庆市 电信 2
                  回复 2018年8月9日 11:34  6楼

                  生命不息，折腾不止！

                    • avatar 青山 博主 来自天朝的朋友 搜狗浏览器 Windows 7 江西省萍乡市 电信
                      回复 2018年8月9日 13:08  1层

                      @老杨 人生需要折腾！

                    • avatar nice 来自天朝的朋友 QQ浏览器 Windows 10 广东省东莞市 (南城区)电信 3
                      回复 2018年8月9日 08:00  5楼

                      前端大佬666

                        • avatar 青山 博主 来自天朝的朋友 搜狗浏览器 Windows 7 江西省萍乡市 电信
                          回复 2018年8月9日 08:03  1层

                          @nice 前端是什么我都不知道 :???:

                        • avatar 个人博客 来自天朝的朋友 谷歌浏览器 Windows 7 中国 移动 5
                          回复 2018年8月9日 01:21  4楼

                          这没看出啥东西啊。。。

                            • avatar 青山 博主 来自天朝的朋友 搜狗浏览器 Windows 7 江西省萍乡市 电信
                              回复 2018年8月9日 08:03  1层

                              @个人博客 字体变大了，侧栏的标题居中了

                            • avatar 云顶天的博客 来自天朝的朋友 谷歌浏览器 Windows 7 广东省广州市天河区 /黄埔区电信 4
                              回复 2018年8月8日 22:51  地板

                              看起来比以前是大气一些了~以前那样子感觉像是几年前的网站风格~

                                • avatar 青山 博主 来自天朝的朋友 搜狗浏览器 Windows 7 江西省萍乡市 电信
                                  回复 2018年8月8日 22:52  1层

                                  @云顶天的博客 哈哈几年前的没看过，不过确实改了好看

                                • avatar 爱的合一 来自天朝的朋友 QQ浏览器 Windows 10 上海市 移动 0
                                  回复 2018年8月8日 22:45  板凳

                                  都加上高考倒计时了 厉害啊

                                  • avatar 杨景文 来自天朝的朋友 谷歌浏览器 Windows 10 北京市 移动 5
                                    回复 2018年8月8日 22:10  沙发

                                    没看出啥不同 :evil: 可能年纪大了，本身视力又不好，觉得和之前一样的

                                      • avatar 青山 博主 来自天朝的朋友 搜狗浏览器 Windows 7 江西省萍乡市 电信
                                        回复 2018年8月8日 22:14  1层

                                        @杨景文 啊啊啊，伤心啊，你这老腊肉

                                          • avatar 杨景文 来自天朝的朋友 谷歌浏览器 Windows 10 北京市 移动 5
                                            回复 2018年8月12日 21:34  2层

                                            @青山 我说咋好多天没收到你的回复邮件了，竟然进了我的垃圾箱，你之前是不是用的163邮箱，现在换成域名邮箱了？我记得之前把你添加到通讯录了的。

                                              • avatar 青山 博主 来自天朝的朋友 QQ浏览器 vivo Y85 Build/OPM1.171019.011 江西省南昌市 电信
                                                回复 2018年8月12日 21:35  3层

                                                @杨景文 对的，企业邮箱