现在的位置: 首页 > WordPress > 正文

WordPress中如何修改边栏背景颜色

2010年12月12日 WordPress ⁄ 共 642字 ⁄ 字号 评论 12 条 ⁄ 阅读 7,406 次

前言:晚上看到旋律博客的边栏背景颜色修改之后,请教了旋律,在简单的摸索尝试之后,终于修改完毕。好东西不敢独自享用,在此以正在使用的主题HotNews为例,给大家简单介绍一下。

1.下载文章下方的图片sidebar_i.png,上传到主题的images文件夹中。

2.以修改widget背景颜色为例,需要在style.css中添加以下代码:

.widget h3{
background:#fff url(images/sidebar_i.png) 0 -112px no-repeat !important;;
color:#FFF !important;;
}

3.保存之后,边栏widget的标题背景颜色从#fff(白色)变成了用sidebar_i.png图片的112px开始的图片(红色)开始填充。

4.如果想要修改为别的颜色,只需要修改-112px的值即可,可以修改为0,-28px,-56px,-84px,-112px,对应图片从上到下的五种颜色。

5.如果想要修改其他边栏的背景颜色,只需要修改前面的class名即可,如:想修改“最活跃的读者”边栏背景为第二个颜色,绿色,只需在style.css中添加以下代码:

#top-comments-author h3{
background:#fff url(images/sidebar_i.png) 0 -28px no-repeat !important;;
color:#FFF !important;;
} 

点击下载图片!

目前有 12 条留言    访客:9 条, 博主:1 条 ,引用: 2 条

  1. guodaliao 2017年05月02日 19:35  @回复  Δ1楼 回复

    这个代码时在哪儿写的啊?

  2. SueHao 2012年06月07日 00:00  @回复  Δ2楼 回复

    很不错,收藏学习了。。。 :smile:

  3. 威言威语 2010年12月13日 19:27  @回复  Δ3楼 回复

    喜欢炫的朋友用这个还是不错的

  4. HouseChan 2010年12月13日 10:21  @回复  Δ4楼 回复

    哥就直接用最简单的了。 :lol:

  5. 宁怡 2010年12月12日 23:07  @回复  Δ5楼 回复

    我也来送ip了。。

  6. xuan律 2010年12月12日 22:50  @回复  Δ6楼 回复

    不错,直接转走了,我懒得整理了,嘿嘿!
    我也是在完美的博客看到他的侧边栏分类颜色搭配很不错就扒来了。
    说个自己的心得,看到别人博客有不错的地方,可以查看他的源代码,找到感觉不错的地方,看看有哪些是定义它的文件,比如php or css 然后将相应的代码文件dang下来,我喜欢用“扒皮”来形容,打开这些文件,看看相应的代码,和自己的有什么不同,在加入到自己的程序文件上去,看看效果。如果不行,百度google看看,或者留言和博主交流看看。
    呵呵,自己的心得,可以试试,每个人的方法都不同,我对代码不是很懂,只能用这种笨方法。


    • 管理员
      lovesoo 2010年12月12日 22:51  @回复  ∇地下1层 回复

      欢迎分享

  7. 亦白。 2010年12月12日 22:37  @回复  Δ7楼 回复

    分别定义就好了~

  8. 系芯 2010年12月12日 17:56  @回复  Δ8楼 回复

    不错,修改了的确挺酷。。。 :razz:

  9. 80博客 2010年12月12日 12:41  @回复  Δ9楼 回复

    我也想改,不怎么懂代码,又学习了!

外部的引用: 2 条

  • 几个美化WordPress的方法 | 穷得瑟
  • 几个美化WordPress的方法 | 依米虾

给我留言

留言无头像?