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

  • 28
  • 946人已阅
  • 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.     floatleft;
  3.     width16px;
  4.     displaynone;
  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:

目前评论:28   其中:访客  15   博主  13

    • avatar 80mt.com 来自天朝的朋友 谷歌浏览器 Windows 8.1 广西梧州市 联通 0

      begin这个主题我也在用,功能非常强大!

      • avatar 林三 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省 电信 3

        圆角有圆角的好,我个人比较方点的,有立体感的说。

          • avatar 青山 博主 来自天朝的朋友 谷歌浏览器 Windows 7 江西省萍乡市 电信

            @林三 恩,+1

          • avatar 堆爱博客 来自天朝的朋友 火狐浏览器 Windows 10 贵州省铜仁地区 电信 2

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

            • avatar 区块链 来自天朝的朋友 谷歌浏览器 Windows 10 云南省昆明市 电信 4

              还是挺漂亮的。

              • avatar 久伴博客 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省武汉市 电信 3

                我偷走了 :grin:

                • avatar 最值买 来自天朝的朋友 谷歌浏览器 Windows 10 广东省湛江市 电信 0

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

                  • avatar 大国小事 来自天朝的朋友 谷歌浏览器 Linux 湖北省武汉市 联通 0

                    确实不错,字数少了

                    • avatar boke112导航 来自天朝的朋友 谷歌浏览器 Windows 7 广西南宁市 电信 5

                      博客在于折腾,不错

                      • avatar 老杨 来自天朝的朋友 谷歌浏览器 Windows 7 广东省肇庆市 电信 2

                        生命不息,折腾不止!

                          • avatar 青山 博主 来自天朝的朋友 搜狗浏览器 Windows 7 江西省萍乡市 电信

                            @老杨 人生需要折腾!

                          • avatar nice 来自天朝的朋友 QQ浏览器 Windows 10 广东省东莞市 (南城区)电信 3

                            前端大佬666

                              • avatar 青山 博主 来自天朝的朋友 搜狗浏览器 Windows 7 江西省萍乡市 电信

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

                              • avatar 个人博客 来自天朝的朋友 谷歌浏览器 Windows 7 中国 移动 5

                                这没看出啥东西啊。。。

                                  • avatar 青山 博主 来自天朝的朋友 搜狗浏览器 Windows 7 江西省萍乡市 电信

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

                                  • avatar 云顶天的博客 来自天朝的朋友 谷歌浏览器 Windows 7 广东省广州市天河区 /黄埔区电信 4

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

                                      • avatar 青山 博主 来自天朝的朋友 搜狗浏览器 Windows 7 江西省萍乡市 电信

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

                                      • avatar 爱的合一 来自天朝的朋友 QQ浏览器 Windows 10 上海市 移动 0

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

                                        • avatar 杨景文 来自天朝的朋友 谷歌浏览器 Windows 10 北京市 移动 5

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

                                            • avatar 青山 博主 来自天朝的朋友 搜狗浏览器 Windows 7 江西省萍乡市 电信

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

                                                • avatar 杨景文 来自天朝的朋友 谷歌浏览器 Windows 10 北京市 移动 5

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

                                                    • avatar 青山 博主 来自天朝的朋友 QQ浏览器  vivo Y85 Build/OPM1.171019.011 江西省南昌市 电信

                                                      @杨景文 对的,企业邮箱