加菲、老摇、小鹿、小寨、山猪、丁子、松露、牛牛爸、地瓜……
想加入我们吗?投简历至zhaopin@19lou.com
圈子界面也可以自定义,给自己的圈子装修一下。
上一篇 /
下一篇 2007-09-06 16:56:26
新版19楼增加了一个圈子功能,用户可以自行建立圈子。可系统默认的界面千篇一律,如果你想增强自己圈子的特色吸引人气改变界面风格,那就请看下面的分解。 
进入自己博客的后台,进入[邻友圈]——>圈子风格

准备五张图作为此次装修的素材:
1题图 大小980x240px(注:系统默认高度是100px,在这里我们用代码覆盖的办法突破这一限制)
2头像 大小150x150px
3栏头左 大小160x32px
4栏头中 大小560x32px
5栏头右 大小240x32px

接下来我们上传题图和头像图片。
把剩下的图片上传到自己日志里,保存到私人箱

然后浏览刚才的博文,在图片上右键,把这些图片的链接拷贝出来待用。

接下来就是要增加一些代码,完成此次装修。
突破题图100px的限制:
#header {height: 240px;border:0;}
更改左栏头图片并且改变高度:
.block h3 {height:32px;line-height:32px;background:url(http://image.dukuai.com/x.attachments/2007/09/07/10111614_200709071335511.gif);}
更改中栏头图片并且改变高度:
.block_ri h3 {height:32px;line-height:32px;background:url(http://image.dukuai.com/x.attachments/2007/09/07/10111614_200709071335591.gif);}
更改中栏头图片并且改变高度:
.msglist h3 {height:32px;line-height:32px; background:url(http://image.dukuai.com/x.attachments/2007/09/07/10111614_200709071336031.gif);}
将题图区里的字缩小挪个地方:(改变padding-left:、padding-top:值可以控制文字上下左右移动)
#groupname { float: left; padding-left: 20px;}
h1 {padding-top:190px;font-size:12px}
h1 a:hover { text-decoration: none; }
#groupname p { float: left; margin: 0; }
#groupname a,#groupname a:hover{ color:#a1894e}

完工了,把这些代码都放进自定义css的框里,然后点提交保存,看看你的圈子就大变样了。
看看以上演示的小白鼠:
http://blog.19lou.com/mygroup-155
(文/加菲)
收藏
分享给好友
管理
举报
TAG: