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

青山 2018年8月8日22:02:54347 595字
摘要

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

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

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

#sidebar h3, #sidebar-l h3 {background: #fff;height: 37.5px;line-height: 37.5px;border-bottom: 1px solid #e2e1e1;margin: 0 20px 0 20px;text-align: center;font-size: 1.8rem;letter-spacing: 4px;color: #606777;}

按照以上css修改后,标题栏位置还多了一个 .title-i  ,后台找到 .title-i  将其隐藏:

.title-i {    float: left;  width: 16px;display: none;}

将 .title-i 隐藏后,如下效果图:

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

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

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

.cat-box .cat-title a {float: left;width: 98%;margin-left: 20px;color: #606777;font-size: 1.8rem;}

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

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

青山
匿名

发表评论

匿名网友 填写信息

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

评论:34   其中:访客  18   博主  16
    • 菜鸟博客 菜鸟博客 2

      样式看起来很不错,我改一下试试!