Hướng dẫn thiết kế VBB Style - Lession 2: Cascading Style Sheets in vBulletin

Hướng dẫn thiết kế VBB Style Author:Kusanagi – StylesVN Lesson 2 : Cascading Style Sheets in vBulletin Tiếp theo bài số 1 sau khi đã vọc thành thạo các thao tác xử lý template căn bản .Ở bài viết này Kus sẽ giới thiệu sơ nét về CSS trong VBB .Để nắm bắt dễ dàng ,ai chưa xem bài 1 có thể xem lại Vẫn còn nhớ bài viết số 1 đề cập đến việc tách riêng file css ra chứ Đến giờ bạn sẽ thấy việc này sẽ là vô cùng tiện lợi .Bạn hãy mở file thietlapmau.css để bắt đầu công việc.Tuy nhiên chúng ta cũng cần chuẩn bị trước 1 số công cụ ,cơ bản chỉ cần notepad + color spy để bắt màu là đủ nhưng nếu có ct chuyên dụng như EditPlush hay TopstylePro thì sẽ làm dễ dàng hơn Tạm thời up trước cái colorspy đã Kus sẽ ko hướng dẫn cách sử dụng css mà sẽ nói về các class trong css của vbb,còn phần kiến thức css về css các bạn có thể tham khảo qua 1 bài viết khác,kus sẽ đăng bài này lên sau.Cũng nói trước luôn ,thật sự kus cũng chưa từng học qua 1 khóa css ,html hay ngồi nghiền ngẫm 1 tài liệu chính qui nào cả ,chỉ là thấy sao làm thế ,"tin học như cơm bình dân mà " Do đó nếu bài viết có nhiều thiếu sót cũng mong các bạn thông cảm và góp ý thêm cho ,bài viết hôm nay sẽ ko dài ,nhiều như bài 1 nhưng là 1 trong những yếu tố quan trọng nhất để định hình màu sắc 1 giao diện .Bạn hãy xem qua 2 cái img sau để có thể nắm bắt sơ lược về các class được bố trí trong vbb Author: Kusanagi - StylesVN Author: Kusanagi - StylesVN Kus sẽ ko đề cập tất cả các class,chỉ nêu 1 số cái cơ bản thường gặp nhất: -body : class lớn nhất của vbb ,nó là phần background lúc bạn đăng nhập ấy ,sẽ được tính từ thẻ trở đi -page : class này là cái lớn thứ 2 nó nằm bên trên class body ,tức là phần background của 4rum ,hơi khó diễn tả nhưng trong skin lấy làm VD này nó là phần nền trắng bao toàn 4rum -tborder : phần border (viền khung) bao quanh các box -tcat : phần background ở tiêu đề các box và 1 số chỗ khác -thead : trong các box phần này nằm dưới tcat ,đôi khi cũng nằm rải rác 1 số nơi khác -tfoot : phần background nằm ở dưới cùng ,chỗ "đánh dấu đọc diễn đàn" hoặc khu toolbar tận cùng site -alt1,alt2: phần bg chính ở các box ,navbar,postbit.v.v.. -smallfont : phần text(chữ thường) chính toàn 4rum -panel,panelsurround: phần này nằm ở khu panel ,quickreply (xem img) -vbmenu_control : phần này nẳm ở các thanh toolbar ở các box,ở dưới navbar ,ở khu vực postbit, v.v.... -vbmenu_option : phần bg ở các mục lựa chọn ở thanh sổ ở toolbar -vbmenu_hilite : như vbmenu_option nhưng nó sẽ hiển thị khi lăn chuột qua Để nói về 1 class về cơ bản thì kus sẽ đề cập cho bạn 1 số vấn đề sau -Background: +background-color: Màu nền chính của class +background-image: Dùng hình ảnh để làm nền,nó lại bao gồm 1 số thuộc tính *background-position: Vị trí của tấm img chọn làm bg Author: Kusanagi - StylesVN *background-repeat : thuộc tính lặp lại của img ,có thể ko lặp ,lặp lại ,lặp theo chiều ngang hoặc dọc v.v..... -Font :kích thước(font-size) ,màu sắc(font-color) ,loại font(font-family) ,vị trí (trái ,phải ,giữa, trên ,dưới),kiểu cách (font-style:nghiên(italic),font-weight:in đậm(bold)) v.v...... -Border : khung viền ngoài gồm màu sắc(color) ,kiểu cách(style) , kích thước(size) .v.v.... -Link: các hành động hiển thị (link) ,rê chuột qua(a:hover) ,kích họat (a:active) và đã kích họat (a:visited) v.v.... Tạm thời chỉ có thế và cái này cũng mang tính hệ thống chứ ko hẳn hướng dẫn ,vì có nói đến mai cũng chưa chắc nói hết về cái css này ,kus sẽ đăng 1 tài liệu cụ thể khác lên để cùng kết hợp ..... Còn giờ dựa vào các kiến thức ở bài 1 các thống kê css về vbb ở bài 2 ,các bạn có thể tập dợt với file thietlapmau.css 1 tí,hãy dùng colorspy để hỗ trợ thêm cho việc chọn màu,hãy thử định hình màu sắc bản ở 1 skin ,cứ coi đây 1 bài nho nhỏ Giờ kus cũng sẽ làm mẫu thử 1 cái ...... Author: Kusanagi - StylesVN Author: Kusanagi - StylesVN Xong rồi.Rất đơn giản phải ko nào. Chỉ thay đổi màu bg trong css,và 1 số icon ,img thì chúng ta cũng có thể làm được 1 skin rồi,thấy sao làm vậy cũng ko có gì khó khăn phải ko nào . Chúc các bạn may mắn ,skin này sẽ song hành cùng bài hướng dẫn cho đến khi hoàn tất ,hi vọng các bạn sẽ ủng hộ và góp ý thêm để các bài sau ngày càng hoàn thiện hơn Tài liệu căn bản css các bạn cũng có thể đọc thêm tại 4rum: Trích: body { background: #E1E1E2 ; color: #000000; font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; margin: 0px 0px 0px 0px; padding: 0px; } a:link { color: #4F75E7; text-decoration: none; } a:visited { color: #4F75E7; text-decoration: none; } a:hover, a:active { color: #FF4400; text-decoration: none; } .page { background: #F2F9FF; color: #000000; } td, th, p, li { font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; } .tborder { background: #F2F9FF; color: #000000; border: 1px solid #678DFF; } .tborder2 { background: #CEE8FF; color: #000000; border: 1px dotted #589BF4; } .tcat { background: #678DFF; color: #FFFFFF; Author: Kusanagi - StylesVN font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; } .tcat a:link { color: #ffffff; text-decoration: none; } .tcat a:visited { color: #ffffff; text-decoration: none; } .tcat a:hover, .tcat a:active { color: #FFFF66; text-decoration: none; } .thead { background: #99BFFF; color: #FFFFFF; font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; } .thead a:link { color: #FFFFFF; text-decoration: none; } .thead a:visited { color: #FFFFFF; text-decoration: none; } .thead a:hover, .thead a:active { color: #FFFF00; text-decoration: none; } .tfoot { background: #80AAFF; color: #E0E0F6; } .tfoot a:link { color: #FFFFFF; text-decoration: none; } .tfoot a:visited { color: #FFFFFF; text-decoration: none; } .tfoot a:hover, .tfoot a:active { Author: Kusanagi - StylesVN color: #007FF9; text-decoration: none; } .alt1, .alt1Active { background: #EBF3F8; color: #000000; text-decoration: none; } .alt2, .alt2Active { background: #F7FAFC; color: #000000; text-decoration: none; } td.inlinemod { background: #FFFFCC; color: #000000; } .wysiwyg { background: #F5F5FF; color: #000000; font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; } textarea, .bginput { font: 10pt 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; } Author: Kusanagi - StylesVN .highlight { color: #FF0000; font-weight: bold; } .fjsel { background: #3E5C92; color: #E0E0F6; } .fjdpth0 { background: #F7F7F7; color: #000000; } .panel { background: #E4E7F5 url(images/gradients/gradient_panel.gif) repeat-x top left; color: #000000; padding: 10px; border: 2px outset; } .panelsurround { background: #D5D8E5 url(images/gradients/gradient_panelsurround.gif) repeat-x top left; color: #000000; } legend { color: #4F75E7; font: 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; } .vbmenu_control { background: #678DFF; color: #FFFFFF; font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; padding: 3px 6px 3px 6px; white-space: nowrap; } .vbmenu_control2 { background: #0D5ABD; 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 { color: #FFFFFF; text-decoration: none; } .vbmenu_control a:visited { Author: Kusanagi - StylesVN color: #FFFFFF; text-decoration: none; } .vbmenu_control a:hover, .vbmenu_control a:active { color: #FFFFFF; text-decoration: none; } .vbmenu_control2 a:link { color: #FFFFFF; text-decoration: none; } .vbmenu_control2 a:visited { color: #FFFFFF; text-decoration: none; } .vbmenu_control2 a:hover, .vbmenu_control2 a:active { color: #51B4FB; text-decoration: none; } .vbmenu_popup { background: #FFFFFF; color: #000000; border: 1px solid #0B198C; } .vbmenu_option { background: #FFFFFF; color: #000000; font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; white-space: nowrap; cursor: pointer; } .vbmenu_option a:link { color: #4F75E7; text-decoration: none; } .vbmenu_option a:visited { color: #4F75E7; text-decoration: none; } .vbmenu_option a:hover, .vbmenu_option a:active { color: #FFFFFF; text-decoration: none; } .vbmenu_hilite { background: #B1D7FF; Author: Kusanagi - StylesVN color: #4F75E7; font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; white-space: nowrap; cursor: pointer; } .vbmenu_hilite a:link { color: #4F75E7; text-decoration: none; } .vbmenu_hilite a:visited { color: #4F75E7; text-decoration: none; } .vbmenu_hilite a:hover, .vbmenu_hilite a:active { color: #0D5ABD; text-decoration: none; } .bigusername { font-size: 14pt; } td.thead, div.thead { padding: 4px; } .pagenav a { text-decoration: none; } .pagenav td { padding: 2px 4px 2px 4px; } .fieldset { margin-bottom: 6px; } .fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; } form { display: inline; } label { cursor: default; } .normal { font-weight: normal; } .inlineimg { vertical-align: middle; } Cái này là nội dung file css mà kus đã làm ở trên ,bạn nào muốn có thể tham khảo qua Author: Kusanagi - StylesVN