Bổ xung một số kiểu đóng khung thông tin profile

[Tiểu Bá Vương 1404]

Sau một vài giờ tò mò mình đã thực hiện được một số kiểu đóng khung khác so với loại anh HTT_itvn đã nói. Cụ thể như sau:
-Đầu tiên là kiểu dotted:

/* Edit by tieubavuong1404 */
.eti_postbit_merkezli {
padding-left: 4px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #efefef;
border-top: 2px dotted #dddddd;
border-right: 2px dotted #dddddd;
border-left: 2px dotted #c4c4c4;
border-bottom: 2px dotted #c4c4c4;
margin-bottom: 4px;
text-align:center;
-moz-box-shadow: 0 2px 6px #b3b3b3;
-webkit-box-shadow: -1px 2px 2px #b3b3b3;
-moz-border-radius-bottom{vb:stylevar left}:6px;
-moz-border-radius-top{vb:stylevar right}:6px;
-webkit-border-top-{vb:stylevar right}-radius: {vb:stylevar threadlisthead_top_corner_radius};
-webkit-border-bottom-{vb:stylevar left}-radius: {vb:stylevar
threadlisthead_top_corner_radius};}
.eti_postbit {
padding-left: 4px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #efefef;
border-top: 2px dotted #dddddd;
border-right: 2px dotted #dddddd;
border-left: 2px dotted #c4c4c4;
border-bottom: 2px dotted #c4c4c4;
margin-bottom: 2px;
-moz-box-shadow: 0 2px 6px #b3b3b3;
-webkit-box-shadow: -1px 2px 2px #b3b3b3;
-moz-border-radius-bottom{vb:stylevar left}:6px;
-moz-border-radius-top{vb:stylevar right}:6px;
-webkit-border-top-{vb:stylevar right}-radius: {vb:stylevar threadlisthead_top_corner_radius};
-webkit-border-bottom-{vb:stylevar left}-radius: {vb:stylevar threadlisthead_top_corner_radius};
}
.htt_postbit {
text-align:center;
}
và ảnh demo:http://ca5.upanh.com/15.894.20186235.bai0/demodotted.png
-Kiểu dashed:

/* Edit by tieubavuong1404 */
.eti_postbit_merkezli {
padding-left: 4px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #efefef;
border-top: 2px dashed #dddddd;
border-right: 2px dashed #dddddd;
border-left: 2px dashed #c4c4c4;
border-bottom: 2px dashed #c4c4c4;
margin-bottom: 4px;
text-align:center;
-moz-box-shadow: 0 2px 6px #b3b3b3;
-webkit-box-shadow: -1px 2px 2px #b3b3b3;
-moz-border-radius-bottom{vb:stylevar left}:6px;
-moz-border-radius-top{vb:stylevar right}:6px;
-webkit-border-top-{vb:stylevar right}-radius: {vb:stylevar threadlisthead_top_corner_radius};
-webkit-border-bottom-{vb:stylevar left}-radius: {vb:stylevar
threadlisthead_top_corner_radius};}
.eti_postbit {
padding-left: 4px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #efefef;
border-top: 2px dashed #dddddd;
border-right: 2px dashed #dddddd;
border-left: 2px dashed #c4c4c4;
border-bottom: 2px dashed #c4c4c4;
margin-bottom: 2px;
-moz-box-shadow: 0 2px 6px #b3b3b3;
-webkit-box-shadow: -1px 2px 2px #b3b3b3;
-moz-border-radius-bottom{vb:stylevar left}:6px;
-moz-border-radius-top{vb:stylevar right}:6px;
-webkit-border-top-{vb:stylevar right}-radius: {vb:stylevar threadlisthead_top_corner_radius};
-webkit-border-bottom-{vb:stylevar left}-radius: {vb:stylevar threadlisthead_top_corner_radius};
}
.htt_postbit {
text-align:center;
}
và ảnh demo:http://ca8.upanh.com/15.894.20186234.2090/demodashed.png
-Kiểu double:

/* Edit by tieubavuong1404 */
.eti_postbit_merkezli {
padding-left: 4px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #efefef;
border-top: 2px double #dddddd;
border-right: 2px double #dddddd;
border-left: 2px double #c4c4c4;
border-bottom: 2px double #c4c4c4;
margin-bottom: 4px;
text-align:center;
-moz-box-shadow: 0 2px 6px #b3b3b3;
-webkit-box-shadow: -1px 2px 2px #b3b3b3;
-moz-border-radius-bottom{vb:stylevar left}:6px;
-moz-border-radius-top{vb:stylevar right}:6px;
-webkit-border-top-{vb:stylevar right}-radius: {vb:stylevar threadlisthead_top_corner_radius};
-webkit-border-bottom-{vb:stylevar left}-radius: {vb:stylevar
threadlisthead_top_corner_radius};}
.eti_postbit {
padding-left: 4px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #efefef;
border-top: 2px double #dddddd;
border-right: 2px double #dddddd;
border-left: 2px double #c4c4c4;
border-bottom: 2px double #c4c4c4;
margin-bottom: 2px;
-moz-box-shadow: 0 2px 6px #b3b3b3;
-webkit-box-shadow: -1px 2px 2px #b3b3b3;
-moz-border-radius-bottom{vb:stylevar left}:6px;
-moz-border-radius-top{vb:stylevar right}:6px;
-webkit-border-top-{vb:stylevar right}-radius: {vb:stylevar threadlisthead_top_corner_radius};
-webkit-border-bottom-{vb:stylevar left}-radius: {vb:stylevar threadlisthead_top_corner_radius};
}
.htt_postbit {
text-align:center;
}
và ảnh demo:http://ca8.upanh.com/15.894.20186238.Z0I0/demodouble.png

Để thực hiện, chi tiết bạn xem tại: http://itvnn.net/showthread.php?12851-H%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-%C4%91%C3%B3ng-khung-th%C3%B4ng-tin-chi-ti%E1%BA%BFt-cho-VBB-4.x

[Tiểu Bá Vương 1404]

Tiếp theo mình xin giới thiệu:
-Kiểu groove:

/* Edit by tieubavuong1404 */
.eti_postbit_merkezli {
padding-left: 4px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #efefef;
border-top: 2px groove #dddddd;
border-right: 2px groove #dddddd;
border-left: 2px groove #c4c4c4;
border-bottom: 2px groove #c4c4c4;
margin-bottom: 4px;
text-align:center;
-moz-box-shadow: 0 2px 6px #b3b3b3;
-webkit-box-shadow: -1px 2px 2px #b3b3b3;
-moz-border-radius-bottom{vb:stylevar left}:6px;
-moz-border-radius-top{vb:stylevar right}:6px;
-webkit-border-top-{vb:stylevar right}-radius: {vb:stylevar threadlisthead_top_corner_radius};
-webkit-border-bottom-{vb:stylevar left}-radius: {vb:stylevar
threadlisthead_top_corner_radius};}
.eti_postbit {
padding-left: 4px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #efefef;
border-top: 2px groove #dddddd;
border-right: 2px groove #dddddd;
border-left: 2px groove #c4c4c4;
border-bottom: 2px groove #c4c4c4;
margin-bottom: 2px;
-moz-box-shadow: 0 2px 6px #b3b3b3;
-webkit-box-shadow: -1px 2px 2px #b3b3b3;
-moz-border-radius-bottom{vb:stylevar left}:6px;
-moz-border-radius-top{vb:stylevar right}:6px;
-webkit-border-top-{vb:stylevar right}-radius: {vb:stylevar threadlisthead_top_corner_radius};
-webkit-border-bottom-{vb:stylevar left}-radius: {vb:stylevar threadlisthead_top_corner_radius};
}
.htt_postbit {
text-align:center;
}
và ảnh demo:
http://ca6.upanh.com/15.894.20186240.isr0/demogroove.png
-Kiểu inset:

/* Edit by tieubavuong1404 */
.eti_postbit_merkezli {
padding-left: 4px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #efefef;
border-top: 2px inset #dddddd;
border-right: 2px inset #dddddd;
border-left: 2px inset #c4c4c4;
border-bottom: 2px inset #c4c4c4;
margin-bottom: 4px;
text-align:center;
-moz-box-shadow: 0 2px 6px #b3b3b3;
-webkit-box-shadow: -1px 2px 2px #b3b3b3;
-moz-border-radius-bottom{vb:stylevar left}:6px;
-moz-border-radius-top{vb:stylevar right}:6px;
-webkit-border-top-{vb:stylevar right}-radius: {vb:stylevar threadlisthead_top_corner_radius};
-webkit-border-bottom-{vb:stylevar left}-radius: {vb:stylevar
threadlisthead_top_corner_radius};}
.eti_postbit {
padding-left: 4px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #efefef;
border-top: 2px inset #dddddd;
border-right: 2px inset #dddddd;
border-left: 2px inset #c4c4c4;
border-bottom: 2px inset #c4c4c4;
margin-bottom: 2px;
-moz-box-shadow: 0 2px 6px #b3b3b3;
-webkit-box-shadow: -1px 2px 2px #b3b3b3;
-moz-border-radius-bottom{vb:stylevar left}:6px;
-moz-border-radius-top{vb:stylevar right}:6px;
-webkit-border-top-{vb:stylevar right}-radius: {vb:stylevar threadlisthead_top_corner_radius};
-webkit-border-bottom-{vb:stylevar left}-radius: {vb:stylevar threadlisthead_top_corner_radius};
}
.htt_postbit {
text-align:center;
}
và ảnh demo:
http://ca7.upanh.com/15.894.20186241.xr20/demoinset.png
-Kiểu outset:

/* Edit by tieubavuong1404 */
.eti_postbit_merkezli {
padding-left: 4px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #efefef;
border-top: 2px outset #dddddd;
border-right: 2px outset #dddddd;
border-left: 2px outset #c4c4c4;
border-bottom: 2px outset #c4c4c4;
margin-bottom: 4px;
text-align:center;
-moz-box-shadow: 0 2px 6px #b3b3b3;
-webkit-box-shadow: -1px 2px 2px #b3b3b3;
-moz-border-radius-bottom{vb:stylevar left}:6px;
-moz-border-radius-top{vb:stylevar right}:6px;
-webkit-border-top-{vb:stylevar right}-radius: {vb:stylevar threadlisthead_top_corner_radius};
-webkit-border-bottom-{vb:stylevar left}-radius: {vb:stylevar
threadlisthead_top_corner_radius};}
.eti_postbit {
padding-left: 4px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #efefef;
border-top: 2px outset #dddddd;
border-right: 2px outset #dddddd;
border-left: 2px outset #c4c4c4;
border-bottom: 2px outset #c4c4c4;
margin-bottom: 2px;
-moz-box-shadow: 0 2px 6px #b3b3b3;
-webkit-box-shadow: -1px 2px 2px #b3b3b3;
-moz-border-radius-bottom{vb:stylevar left}:6px;
-moz-border-radius-top{vb:stylevar right}:6px;
-webkit-border-top-{vb:stylevar right}-radius: {vb:stylevar threadlisthead_top_corner_radius};
-webkit-border-bottom-{vb:stylevar left}-radius: {vb:stylevar threadlisthead_top_corner_radius};
}
.htt_postbit {
text-align:center;
}
và ảnh demo:
http://ca5.upanh.com/15.894.20186243.FyO0/demooutset.png


Còn thắc mắc nào khác thì các bạn cứ hỏi tại topic này. Mong ae nào đã biết thì chém nhẹ tay cho. Thanks

[hoangduykt7990]

Trông đẹp đó, bên sinhvienvt.net có kiểu này đẹp lắm nè!

http://ca6.upanh.com/16.7.20327571.lok0/g.png

Tìm hiêu xem

[hanhkhat]

chỉ cần them cái đoạn này vào css là được cái viền bo tròn thôi


-moz-border-radius: 6px;


http://img.photo.zing.vn/file_uploads/gallery/1024x768/2010/11/11/06/28041289474606.PNG

[Tiểu Bá Vương 1404]

chỉ cần them cái đoạn này vào css là được cái viền bo tròn thôi


-moz-border-radius: 6px;


http://img.photo.zing.vn/file_uploads/gallery/1024x768/2010/11/11/06/28041289474606.PNG
Huynh thêm vào chỗ nào? em thử hoài vẫn kiểu đó thôi!

[hoangduykt7990]

thêm vào postbit.css và dùng FF mới hiển thị ra! GC bó chynm

[Tiểu Bá Vương 1404]

www.botay.com
Bạn nói thế thì cái code to rầm vậy bỏ vô chỗ nào cho phù hợp đó chứ ai mà không biết FireFox ngon hơn Chrome!

[hoangduykt7990]

/* Edit by tieubavuong1404 */
.eti_postbit_merkezli {
padding-left: 4px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #efefef;
border-top: 2px groove #dddddd;
border-right: 2px groove #dddddd;
border-left: 2px groove #c4c4c4;
border-bottom: 2px groove #c4c4c4;
margin-bottom: 4px;
text-align:center;
-moz-border-radius: 6px;
-moz-box-shadow: 0 2px 6px #b3b3b3;
-webkit-box-shadow: -1px 2px 2px #b3b3b3;
-moz-border-radius-bottom{vb:stylevar left}:6px;
-moz-border-radius-top{vb:stylevar right}:6px;
-webkit-border-top-{vb:stylevar right}-radius: {vb:stylevar threadlisthead_top_corner_radius};
-webkit-border-bottom-{vb:stylevar left}-radius: {vb:stylevar
threadlisthead_top_corner_radius};}
.eti_postbit {
padding-left: 4px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #efefef;
border-top: 2px groove #dddddd;
border-right: 2px groove #dddddd;
border-left: 2px groove #c4c4c4;
border-bottom: 2px groove #c4c4c4;
margin-bottom: 2px;
-moz-box-shadow: 0 2px 6px #b3b3b3;
-webkit-box-shadow: -1px 2px 2px #b3b3b3;
-moz-border-radius-bottom{vb:stylevar left}:6px;
-moz-border-radius-top{vb:stylevar right}:6px;
-webkit-border-top-{vb:stylevar right}-radius: {vb:stylevar threadlisthead_top_corner_radius};
-webkit-border-bottom-{vb:stylevar left}-radius: {vb:stylevar threadlisthead_top_corner_radius};
}
.htt_postbit {
text-align:center;
}

[Tiểu Bá Vương 1404]

Code của bạn bo viền một nữa ah, code bo viền đầy đủ nà:

/* Edit by tieubavuong1404 */
.eti_postbit_merkezli {
padding-left: 4px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #efefef;
border-top: 2px groove #dddddd;
border-right: 2px groove #dddddd;
border-left: 2px groove #c4c4c4;
border-bottom: 2px groove #c4c4c4;
margin-bottom: 4px;
text-align:center;
-moz-border-radius: 6px;
-moz-box-shadow: 0 2px 6px #b3b3b3;
-webkit-box-shadow: -1px 2px 2px #b3b3b3;
-moz-border-radius-bottom{vb:stylevar left}:6px;
-moz-border-radius-top{vb:stylevar right}:6px;
-webkit-border-top-{vb:stylevar right}-radius: {vb:stylevar threadlisthead_top_corner_radius};
-webkit-border-bottom-{vb:stylevar left}-radius: {vb:stylevar
threadlisthead_top_corner_radius};}
.eti_postbit {
padding-left: 4px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #efefef;
border-top: 2px groove #dddddd;
border-right: 2px groove #dddddd;
border-left: 2px groove #c4c4c4;
border-bottom: 2px groove #c4c4c4;
margin-bottom: 2px;
-moz-border-radius: 6px;
-moz-box-shadow: 0 2px 6px #b3b3b3;
-webkit-box-shadow: -1px 2px 2px #b3b3b3;
-moz-border-radius-bottom{vb:stylevar left}:6px;
-moz-border-radius-top{vb:stylevar right}:6px;
-webkit-border-top-{vb:stylevar right}-radius: {vb:stylevar threadlisthead_top_corner_radius};
-webkit-border-bottom-{vb:stylevar left}-radius: {vb:stylevar threadlisthead_top_corner_radius};
}
.htt_postbit {
text-align:center;
}
Không biết có cách nào cho Chrome hiển thị đầy đủ như FireFox không ta!

[hanhkhat]

Huynh thêm vào chỗ nào? em thử hoài vẫn kiểu đó thôi!
bỏ vào trong cái .eti_postbit{}
hiển thị tốt nhất trên Firefox:MatCuoi (67):

[light151]

Hướng dẫn giúp mình ở bản vbb 3.8.6 được ko hanhkhat?
Mình đang làm vbb 3.8.6 nhưng mà cách trên của bạn mình ko áp dụng vbb 3x được
Thanks :MatCuoi:

[HTT.itvn]

Bạn coppy đoạn mã CSS ở trên và vào Main CSS , kéo xuống cuối cùng và dán vào ô thứ 2 >> Save lại . Sau đó vào templates bạn đóng từng khung thông tin tương tự như VBB 4.0