[CSS]Cách thay đổi nền forum phpbb2

by **nguyenhuy7644** 5/12/2008, 5:13 am

Không biết có ai đã thử làm cái này chưa nhưng mình cũng xin đưa ra cách của mình .Mình sẽ hướng dẫn chi tiết ... vì có nhiều bạn vẫn chưa biết làm về CSS .
* Tạo ảnh :
1 . Chụp ảnh màn hình của mấy cái row .
2 . Mở Paint vào Ctrl + V . Lưu lại
3 . Dùng Paint hay PTS cắt bỏ hết phần thừa chỉ chừa lại cái row dài nhất ( vì trong CSS bạn có thể chỉnh 3 cái row khác kích thước nên cách này là đơn giản nhất ) . Lưu lại và up lên Host ( Bạn nên up lên Host của forumotion để load hình nhanh hơn ) . Giữ đấy để lấy link ảnh .

* Cách này liên quan đến CSS nên các bạn phải Save lại trước khi chỉnh sửa .
Bước 1 : Vào ACP > Display > Colors > CSS . Nhấp vào CSS Basic Style > Copy toàn bộ và paste vào notepad rồi lưu lại ( Ko nên bỏ qua công đoạn này )

Bước 2 : Paste toàn bộ lại vào cái khung dưới chữ CSS .

* Bây giờ bắt đầu chỉnh sửa . Bạn kiếm đoạn này :

td.row1{
background-color: #dee3e7; <-- ( Mã màu này có thể khác với forum của bạn )
}
td.row2{
background-color: #dee3e7; <-- ( Mã màu này có thể khác với forum của bạn )
}
td.row3{
background-color: #d1d7dc; <-- ( Mã màu này có thể khác với forum của bạn )
}

_ Bạn chèn thêm đoạn này vào giữa dòng mã màu và dấu } :

background-image: url("https://i.servimg.com/u/f74/13/24/46/70/764410.jpg");

( Dòng Màu Đỏ Bạn Thay Bằng Dicrect Link của hots bạn up ảnh lên )

Và Kết Quả Ra Như Vầy :

td.row1{
background-color: #dee3e7;
background-image: url("https://i.servimg.com/u/f74/13/24/46/70/764410.jpg");
}
td.row2{
background-color: #dee3e7;
background-image: url("https://i.servimg.com/u/f74/13/24/46/70/764410.jpg");
}
td.row3{
background-color: #d1d7dc;
background-image: url("https://i.servimg.com/u/f74/13/24/46/70/764410.jpg");
}

Nhấp Submit .
Hoàn tất . Bạn vào trang chủ xem thử có thay đổi gì không .

Demo :
[CSS]Cách thay đổi nền forum phpbb2 Untitl15

[CSS]Cách thay đổi nền forum phpbb2 Untitl15

by **CPFounder** 5/12/2008, 7:50 am

Cái này phpBB2 à?
Cộng 10 đ nhá

by **nguyenhuy7644** 5/12/2008, 12:52 pm

Vâng , cái demo là bản free phpbb2 ... nên CSS của nó khác so với mấy cái mấy bạn trên đây chỉ ... làm liều chèn thử vào trang demo , thấy được nên cho vào luôn trang chính . nhưng cái này nó tối quá ko hợp với màu nền ----> chuyển lại thành cơ bản rồi .

@ EA : Sao em dùng mã BBcode ... mà hình như là cái gì cũng ko được trogn bài viết ở trang này thế anh EA ??? toàn phải tự nhớ BBcode mà ghi vào thôi . Hình vui cugn4 ko sử dụng được , Nhấn vào nó ko ra bài viết . Anh xem lại cái .

by **CPFounder** 5/12/2008, 1:11 pm

Hi hi, Ea mới 21 tuổi thôi, gọi anh ngại lắm. Ea dùng BBcode vẫn bình thường ko gặp vấn đề gì. để xem thử coi còn ai bị nữa không nhé.
test... À, Ea luôn để chế độ hiển thị bbcode (click chữ a/A góc trên phải khung trả lời)

by **nguyenhuy7644** 5/12/2008, 3:50 pm

Ko phân biệt tuổi tác ... kém mình 2 tuổi nhưng lượng kiến thức bạn có về lĩnh vực này so với mình thì quá xa . Gọi bằng anh cho nó tiện hỏi han + nhờ vả whistling

))

EA giúp mình xin cái CSS của trang yeu 1 phut được ko . Mình rất thích cái kiểu body line tranferent đấy .

Thanks EA trước ^^!

À nếu có thể thì EA chỉ mình chèn thêm vào CSS được ko ... chỉ thay đổi cái bodyline cho giống như thế với cái kiểu hình nền cố định chứ ko thay đổi hết .

by **CPFounder** 5/12/2008, 6:06 pm

À, yêu 1 phút sẽ share template của bạn ấy sau khi bạn ấy tạo skin mới. Vui

by **kalenv** 6/12/2008, 3:27 pm

chỉnh cái nì để làm j` vậy bạn !?
tại sao lại chụp cái row ?! chả hiểu zề cả

by **zenky** 19/2/2009, 12:10 pm

cho em code css di may nanh oi !! sao cái forum cua em no rộng wa1 cỡi

by **Ocean Sapphire** 2/7/2012, 11:37 am

4rum mình không có mấy cái đoạn này
td.row1{
background-color: #dee3e7; <-- ( Mã màu này có thể khác với forum của bạn )
}
code css mình đây

Spoiler:

Code:: a[href="/t93-topic#502"],a[href="/t92-topic#498"],a[href="/u14"] span{color:#F00;animation:svcolor 1s infinite;-moz-animation:svcolor 1s infinite;-webkit-animation:svcolor 1s infinite;} @keyframes svcolor{10%{color:#F00}20%{color:#F80}30%{color:#FF0}40%{color:#5F0}50%{color:#0F0}/*TUT by handsomevip007*/60%{color:#0FD}70%{color:#09F}80%{color:#00F}90%{color:#A0F}100%{color:#F0F}} @-moz-keyframes svcolor{10%{color:#F00}/*diendan.chinhphuc.info*/20%{color:#F80}30%{color:#FF0}40%{color:#5F0}50%{color:#0F0}60%{color:#0FD}70%{color:#09F}80%{color:#00F}90%{color:#A0F}100%{color:#F0F}} @-webkit-keyframes svcolor{10%{color:#F00}20%{color:#F80}30%{color:#FF0}40%{color:#5F0}50%{color:#0F0}60%{color:#0FD}70%{color:#09F}80%{color:#00F}90%{color:#A0F}100%{color:#F0F}} * Style: 'Black TeenVN'; Style ID: 54 */ body { background: #FFFFFF url(http://i43.servimg.com/u/f43/16/73/23/98/bg10.jpg) repeat bottom center fixed; color: #000000; font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; margin: 0px 0px 0px 0px; padding: 0px; } a:link, body_alink { color: #FF3399; text-decoration: none; } a:visited, body_avisited { color: #FF3366; text-decoration: none; } a:hover, a:active, body_ahover { color: #3399FF; } .page { background: transparent; color: #000000; } td, th, p, li { font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; } .tborder { background: #eeeeee; color: #000000; border: 1px solid #E5E5E5; } .tcat, td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom, td.rowpic { background: url(http://i967.photobucket.com/albums/ae153/ligerv/pcteenden/tcat.png) bottom right; color: #FFFF33; font: bold 12pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; height: 45px; border: 1px solid #eeeeee; -moz-border-radius:5px; } .tcat a:link, .tcat_alink { color: #FFFF33; text-decoration: none; } .tcat a:visited, .tcat_avisited { color: #FFFF33; text-decoration: none; } .tcat a:hover, .tcat a:active, .tcat_ahover { color: #3399FF; text-decoration: underline; } .thead, th { background: #EEEEEE; color: #333333; font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; } .thead a:link, .thead_alink { color: #333333; } .thead a:visited, .thead_avisited { color: #333333; } .thead a:hover, .thead a:active, .thead_ahover { color: #333333; } .tfoot { background: url(http://4r.http://*10*******.vn/http://*10*******/imgs/footer.png) repeat-x; color: #eeeeee; } .tfoot a:link, .tfoot_alink { color: #eeeeee; } .tfoot a:visited, .tfoot_avisited { color: #eeeeee; } .tfoot a:hover, .tfoot a:active, .tfoot_ahover { color: #3399FF; } .alt1, .alt1Active { background: #FFFFFF; color: #000000; border: 1px solid #dbdbdb; -moz-border-radius:5px; } .alt2, .alt2Active { background: #FFFFFF; color: #000000; border: 1px solid #dbdbdb; -moz-border-radius:5px; } .inlinemod { background: #FFFFCC; color: #000000; } .wysiwyg { background: #F5F5FF; color: #000000; font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; margin: 5px 10px 10px 10px; padding: 0px; } .wysiwyg a:link, .wysiwyg_alink { color: #22229C; } .wysiwyg a:visited, .wysiwyg_avisited { color: #22229C; } .wysiwyg a:hover, .wysiwyg a:active, .wysiwyg_ahover { color: #3399FF; } textarea, .bginput { font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; } .bginput option, .bginput optgroup { font-size: 10pt; font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; } .button { font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; } select { font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; } option, optgroup { font-size: 11px; font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; } .smallfont { font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; } .time { color: #666686; } .navbar { font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; } .highlight { color: #3399FF; font-weight: bold; } .fjsel { background: #3E5C92; color: #E0E0F6; } .fjdpth0 { background: #F7F7F7; color: #000000; } .panel { background: #E4E7F5 url(http://4r.http://*10*******.vn/images/gradients/gradient_panel.gif) repeat-x top left; color: #000000; padding: 10px; border: 2px outset; } .panelsurround { background: #D1D4E0 url(http://4r.http://*10*******.vn/images/gradients/gradient_panelsurround.gif) repeat-x top left; color: #000000; } legend { color: #22229C; font: 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; } .vbmenu_control { background: #000000; color: #FFFFFF; font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; padding: 3px 6px 3px 6px; white-space: nowrap; } .vbmenu_control a:link, .vbmenu_control_alink { color: #FFFFFF; text-decoration: none; } .vbmenu_control a:visited, .vbmenu_control_avisited { color: #FFFFFF; text-decoration: none; } .vbmenu_control a:hover, .vbmenu_control a:active, .vbmenu_control_ahover { color: #FF0033; text-decoration: underline; } .vbmenu_popup { background: #FFFFFF; color: #000000; border: 1px solid #0B198C; } .vbmenu_option { background: #BBC7CE; color: #000000; font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; white-space: nowrap; cursor: pointer; } .vbmenu_option a:link, .vbmenu_option_alink { color: #22229C; text-decoration: none; } .vbmenu_option a:visited, .vbmenu_option_avisited { color: #22229C; text-decoration: none; } .vbmenu_option a:hover, .vbmenu_option a:active, .vbmenu_option_ahover { color: #FFFFFF; text-decoration: none; } .vbmenu_hilite { background: #8A949E; color: #FFFFFF; font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; white-space: nowrap; cursor: pointer; } .vbmenu_hilite a:link, .vbmenu_hilite_alink { color: #FFFFFF; text-decoration: none; } .vbmenu_hilite a:visited, .vbmenu_hilite_avisited { color: #FFFFFF; text-decoration: none; } .vbmenu_hilite a:hover, .vbmenu_hilite a:active, .vbmenu_hilite_ahover { color: #FFFFFF; text-decoration: none; } /* ***** styling for 'big' usernames on postbit etc. ***** */ .bigusername { font-size: 14pt; } /* ***** small padding on 'thead' elements ***** */ td.thead, th.thead, div.thead { padding: 4px; } /* ***** basic styles for multi-page nav elements */ .pagenav a { text-decoration: none; } .pagenav td { padding: 2px 4px 2px 4px; } /* ***** de-emphasized text */ .shade, a.shade:link, a.shade:visited { color: #777777; text-decoration: none; } a.shade:active, a.shade:hover { color: #FF4400; text-decoration: underline; } .tcat .shade, .thead .shade, .tfoot .shade { color: #DDDDDD; } /* ***** define margin and font-size for elements inside panels ***** */ .fieldset { margin-bottom: 6px; } .fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; } .box_nd { width:200px; height:auto; margin:10px 0; padding:0; text-align:left; } .box_nd img { margin:0 0 0 10px; padding:0; } .box_nd p { font:11px tahoma; color:#000000; text-align:left; margin:20px 10px 0 10px; padding:0; } .box_nd ul { list-style:none; margin:0; padding:0; } .box_nd ul li { display:block; font:11px tahoma; color:#000000; margin:0 10px; padding:5px 0; text-align:left; border-bottom:1px #bcbcbc dotted; } .box_nd ul li a { font:11px tahoma; font-weight:bold; color:#cccccc; text-decoration:none; margin:0; padding:0; } .box_nd ul li a:hover { color:#cccccc; } .botron{ border: 1px solid #EAE3D1; -moz-border-radius:5px; } .topboctem { background: url(http://4r.http://*10*******.vn/images/topboctem.png); height: 50px; } .botron { border-top: solid 1px #CCCCCC; border-left: solid 1px #CCCCCC; border-right: solid 1px #CCCCCC; border-bottom: solid 1px #CCCCCC; margin: 3px 5px; padding: 2px; color: #333333; background: #EEEEEE; font-size: 11px; } .khung { border-top: solid 1px #CCCCCC; border-left: solid 1px #CCCCCC; border-right: solid 1px #CCCCCC; border-bottom: solid 1px #CCCCCC; margin: 3px 5px; padding: 2px; color: #333333; background: #EEEEEE; font-size: 11px; } .row4 { background: white; } #smallrum{padding: 0.4em 1em;margin: 3px 1px; background: transparent none; -moz-box-shadow: -2px 2px 2px #c8c8c8; -webkit-box-shadow: -2px 2px 2px #c8c8c8;box-shadow: -2px 2px 2px #c8c8c8;color: transparent;width: 375px;} #smallrum a img{vertical-align: middle; padding-right: 2px;} #smallrum a.gensmall { display: inline-block; text-align: left; width: 160px; } a[href="/u1"]:hover strong::before,[href="/u5"]:hover strong::before,[href="/u14"]:hover strong::before{position:fixed;top:0;z-index:999;right:0;margin-right:314px;border:4px solid #DDD} a[href="/u1"]:hover strong::after,[href="/u5"]:hover strong::after,[href="/u14"]:hover strong::after{font-weight:normal;line-height:124%;font-size:12px;position:fixed;right:0;padding:5px;top:0;width:300px;height:100px;background:rgba(0, 0, 0, 0.85);border:4px solid #DDD;color:white;text-shadow: 1px 1px 2px white;z-index:999;text-align:justify} a[href="/u1"]:hover strong::before{content:url(http://i41.servimg.com/u/f41/17/41/32/35/rimg0011.jpg)} a[href="/u1"]:hover strong::after{content:"-X-- THÔNG TIN -------X-------X------X-------- Dragonfly là một người điều hành quản lí 4rum, giúp đỡ, sửa chữa, cũng như làm đẹp cho diễn đàn."} a[href="/u5"]:hover strong::before{content:url(http://i41.servimg.com/u/f41/17/41/32/35/untitl30.png)} a[href="/u5"]:hover strong::after{content:"-X-- THÔNG TIN -------X-------X------X-------- Thập Nhị Qủy là một người điều hành quan trọng của 4rum, chuyên đóng góp ý kiến, design nhiều thứ cho diễn đàn."} a[href="/u14"]:hover strong::before{content:url(http://i41.servimg.com/u/f41/17/41/32/35/untitl31.png)} a[href="/u14"]:hover strong::after{content:"-X-- THÔNG TIN -------X-------X------X-------- Qủy Chúa là một star quan trọng, cô là trọng tâm của diễn đàn FRD, một chuyên gia viết Fic với kĩ thuật trốn nợ điêu luyện, cô cũng là một người luôn đi đầu trong công việc bảo vệ hòa bình, chống war ở các 4rum.) ."} .postsignature { display:block; text-align:left; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; border:solid 1px #CCC; position:relative; padding:4px 4px 4px 20px; } .postsignature .title { position:absolute; top:-22px; left:20px; border:0; overflow:hidden; } .postsignature .content { margin-top:15px; margin-bottom:4px; padding:0; }