Hướng dẫn chia Box Forum VBB4.1.x thành hai cột dùng cho diễn đàn rao vặt

[phcomvn]

Chỉ bằng vài nét CSS, các bạn đã có một diễn đàn được chia làm hai cột cực chuyên nghiệp, rất hợp cho web rao vặt. Tớ đã mất gần 1 giờ chỉnh qua chỉnh lại, hãy dùng và cảm nhận.


ĐỀ MÔ CỰC ĐẸP : Trang rao vặt http://baogia24h.netVào additional.css, chèn vào cuối đoạn CSS sau:



/* Chia forum thanh 2 cot
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#forums .L1 .L2 {
display:block;
clear:none !important;
}
.forumhead {
margin-left:0.3%;
width:98%;
}
#forums .forumbit_post {
display:block;
float:left;
height:150px;
margin:4px;
position:relative;
width:49%;
}
.forumbit_nopost .forumbit_nopost .forumrow, .forumbit_post .forumrow {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FFFFFF url(images/gradients/grey-up.png) repeat-x scroll left bottom;
border:1px solid #C4C4C4;
display:block;
float:left;
height:100%;
min-height:90px;
position:relative;
width:100%;
}
.forumbit_post .foruminfo .forumdata .datacontainer {
float:left;
padding-left:65px;
width:90%;
}
.forumbit_post .foruminfo {
clear:right;
float:left;
min-width:50%;
width:95%;
}
/* chuyen khung lastpost xuong duoi */
.forumbit_post .forumrow .forumlastpost {
clear:both;
width:95%;
padding-left:5px;
border-top:1px dotted #425769;
}
.forumlastpost .lastpostby {
display: block;
float: left;
padding-left:5px;
padding-top:3px;
}
.forumlastpost .lastpostdate {
display: block;
float: right;
padding-top:3px;
}
.forumlastpost .lastposttitle {
display: block;
float: left;
}
/* lam subforum thanh 1 cot */
.subforums ol.subforumlist {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
.subforumlist li.subforum {
float: left;
width: 100%;
margin: 0;
padding: 0;
clear:none;
}
P/S: đã chỉnh sửa sub forum thành 1 cột, nếu muốn 2 cột bạn sửa code sau:


.subforumlist li.subforum {
float: left;
width: 100%;
margin: 0;
padding: 0;
clear:none;
}
thành


.subforumlist li.subforum {
float: left;
width: 50%;
margin: 0;
padding: 0;
clear:none;
}
Enjoy, không cần chỉnh sửa gì thêm, hãy tận hưởng, và nhớ tặng điểm danh vọng cho tớ đấy.
nguồn Intellegent Community (http://sinhvienit.net/@forum/url/?http%3A%2F%2Fdiendan.congdongthongminh.com%2Fshow thread.php%3F411-Huong-dan-chia-Box-Forum-chuyen-muc-VBB41x-thanh-hai-cot-cuc-chuan)

[pmhoang]

Công nhận chia làm 3 cột đẹp tuyệt.