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

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

侧边栏标题 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 隐藏后,如下效果图:

然后,如果使用杂志布局的会发现两栏位置前面的标题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主题需要再加入这条代码,不然标题很小。

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏林德熙的博客

win10 uwp 萤火虫效果 安装 win2d创建界面后台的方法核心代码

本文在Nukepayload2指导下,使用他的思想用C#写出来。 本文告诉大家,如何使用 win2d 做出萤火虫效果。

14610
来自专栏BIT泽清

2018年金融期货,棋牌游戏马甲包App上架ios审核被拒解决方案

We discovered one or more bugs in your app when reviewed on iPhone running iOS 8...

2.6K10
来自专栏有趣的django

博客园美化终极版-(自定义导航栏)----什么CSDN、简书、腾讯云专栏、个人博客和微信公众号都弱爆了

78000
来自专栏子勰随笔

开发中一些常用的工具链接(MD5、Timestamp等)

258100
来自专栏CRPER折腾记

React 折腾记 - (4) 侧边栏联动Tabs菜单-增强版(结合Mobx)

上个版本 :React 折腾记 - (3) 结合Mobx实现一个比较靠谱的动态tab水平菜单,同时关联侧边栏

55030
来自专栏PPV课数据科学社区

【工具】EXCEL十大搞笑操作排行榜

大名鼎鼎EXCEL江湖上谁人不知,谁人不晓呀,纵使你没见过EXCEL,也见过数据在跑吧?可惜的是,经常用EXCEL表哥表妹,甚至操作六七年 的江湖老手,或多或少...

37160
来自专栏微信公众号:Java团长

Java Web学习总结(八)——HttpServletResponse对象(二)

请求重定向指:一个web资源收到客户端请求后,通知客户端去访问另外一个web资源,这称之为请求重定向。

12020
来自专栏程序员互动联盟

【Windows编程】系列第七篇:Menubar的创建和使用

上一篇我们学习了利用windows API创建工具栏和状态栏,与上一篇紧密联系的就是菜单栏,菜单栏是一个大多数复杂一些的Windows应用程序不可或缺的部分。比...

29480
来自专栏文大师的新世界

7. 偷用Swiper简改

看这段代码应该就很清楚了,如果是android系统就渲染Pager如果是ios就使用横向的ScrollView,修改后的app首页如下:

11430
来自专栏王亚昌的专栏

RabbitMQ性能测试

作者一直在寻找一个极低延时的消息队列,从目前的测试结果来看,只有nats达到了<1ms的水平,本文旨在测试rabbitmq的国latency,撰文记录并与大家分...

52220

扫码关注云+社区

领取腾讯云代金券