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

  • 24
  • 264人已阅
  • 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主题需要再加入这条代码,不然标题很小。

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

weinxin
我的QQ
这是我的QQ扫一扫
avatar

发表评论

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

目前评论:24   其中:访客  12   博主  12

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

      还是挺漂亮的。

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

          @区块链 看着很美观

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

          我偷走了 :grin:

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

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

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

                @最值买 赶紧更新吧

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

                确实不错,字数少了

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

                    @大国小事 字数没少,大小改了

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

                    博客在于折腾,不错

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

                      生命不息,折腾不止!

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

                          @老杨 人生需要折腾!

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

                          前端大佬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 江西省南昌市 电信

                                                    @杨景文 对的,企业邮箱