继续折腾:评论者头像

(Pic Via)

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

导航

1.改变头像的位置
2.改变头像的大小
3. 设置缺省头像

改变头像的位置

---

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

#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小图片消失。