继续折腾:评论者头像

头像
(Pic Via)

既然要折腾自然不能放过每一个细节,这里又对评论者头像部分进行修改,这次仅对CSS动了手脚,很简单,但也很实用。不了解CSS的人不妨移步W3School进修。


改变头像的位置


这个之前曾经提到过,这里把默认的代码全部贴出来吧:

#comments-block .avatar-image-container img {
border:1px solid #CCCCCC;
float:right;
}

#comments-block .avatar-image-container.avatar-stock img {
border-width:0;
padding:1px;
}

#comments-block .avatar-image-container {
height:37px;
left:-45px;
position:absolute;
width:37px;
}

#comments-block.avatar-comment-indent {
margin-left:45px;
position:relative;
}

#comments-block.avatar-comment-indent dd {
margin-left:0;
}


把以上代码复制到]]></b:skin>之前,然后,修改你不满意的部分,其余的则可以删去

改变头像的大小


这个也很简单,同样,把以下代码复制粘贴到]]></b:skin>之前。

.avatar-image-container {
height:42px;
width:42px;
}

.avatar-image-container img {
height:40px;
width:40px;
}


嗯,没错,修改绿色的部分就可以了,其中粗体的部分是图片的大小,而常规体部分则是包含图片的
<div>的大小,一般来说,后者不能小于前者

为没有头像者设置缺省头像


依然粘帖到是]]></b:skin>之前,需要的CSS代码如下:

.avatar-stock {
background: url(no-avatar.png) no-repeat center;
}

.avatar-stock img {
display:none;
}


蓝色部分替换为你的头像的地址即可,另外注意你的图片的大小要与正常头像的大小一致

这里的原理也很简单:没有头像的地方的父级<div>中都会有avatar-stock这个class,给它添加背景图片就是;同时用display:none让Blogger账户缺省头像时那张Blogger logo小图片消失。

7 comments now

  1. 唉,现在被电信弄得干什么都提不起劲。

    回复删除
  2. 唉,现在被联通干得弄什么都提不起劲。

    回复删除
  3. 不懂为什么我的出现问题了,它没有出现我要的图片,而只是出现灰灰一块东西而已……

    回复删除
  4. 能了……原来是我的头像太大了……= =

    回复删除
  5. @banana,@马晨:
    唉,我早已被墙干的什么都不想弄......

    @linfavourite:
    抱歉,文中忘了提及这问题,等会补上,另外,很喜欢你的缺省头像: )

    回复删除
  6. @Pstrey:我也是不小心找到的,觉得很好看就用了。

    回复删除