Hướng dẫn chia box forum (chuyên mục) VBB4.1.x thành hai cột cực chuẩn

[Admin]

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 đây
Vào additional.css, chèn vào cuối đoạn CSS sau:

[/COLOR]/* 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;
}[COLOR=#333333]

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; }

Không cần chỉnh sửa gì thêm, hãy tận hưởng

 

[Tuoitreviet]

Thanks 4share.Demo die .ko vào đc.
@admin: reply tin nhắn cho tớ nha.

 

[Admin]

Đã rep.........

----> Bổ sung bài viết <----


Demo live mà....