Design - VBB Lesson 2

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
http://www.anonym.to/?http://vbviet.org/forums/showthread.php?t=342
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

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ẻ <body> 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

*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 ......

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:
http://www.anonym.to/?http://vbviet.org/forums/showthread.php?t=366
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;
}
a:hover, a:active
{
color: #FF4400;
}
.page
{
background: #F2F9FF;
color: #000000;
}
td, th, p, li
{
}
.tborder
{
color: #000000;
border: 1px solid #678DFF;
}
.tborder2
{
background: #CEE8FF;
color: #000000;
border: 1px dotted #589BF4;
}
.tcat
{
background: #678DFF;
color: #FFFFFF;

font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tcat a:link
{
color: #ffffff;
}
.tcat a:visited
{
color: #ffffff;
}
.tcat a:hover, .tcat a:active
{
color: #FFFF66;
}
.thead
{
background: #99BFFF;
color: #FFFFFF;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.thead a:link
{
color: #FFFFFF;
}
.thead a:visited
{
color: #FFFFFF;
}
.thead a:hover, .thead a:active
{
color: #FFFF00;
}
.tfoot
{
background: #80AAFF;
color: #E0E0F6;
}
.tfoot a:link
{
color: #FFFFFF;
}
.tfoot a:visited
{
color: #FFFFFF;
}
.tfoot a:hover, .tfoot a:active
{

color: #007FF9;
}
.alt1, .alt1Active
{
background: #EBF3F8;
color: #000000;
}
.alt2, .alt2Active
{
background: #F7FAFC;
color: #000000;
}
td.inlinemod
{
background: #FFFFCC;
color: #000000;
}
.wysiwyg
{
color: #000000;
}
textarea, .bginput
{
}
.button
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
select
{
}
option, optgroup
{
font-size: 11px;
font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.smallfont
{
}
.time
{
color: #666686;
}
.navbar
{
}

.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;
padding: 3px 6px 3px 6px;
white-space: nowrap;
}
.vbmenu_control2
{
background: #0D5ABD;
color: #FFFFFF;
padding: 3px 6px 3px 6px;
}
.vbmenu_control a:link
{
color: #FFFFFF;
}
.vbmenu_control a:visited
{

color: #FFFFFF;
}
.vbmenu_control a:hover, .vbmenu_control a:active
{
color: #FFFFFF;
}
.vbmenu_control2 a:link
{
color: #FFFFFF;
}
.vbmenu_control2 a:visited
{
color: #FFFFFF;
}
.vbmenu_control2 a:hover, .vbmenu_control2 a:active
{
color: #51B4FB;
}
.vbmenu_popup
{
background: #FFFFFF;
color: #000000;
border: 1px solid #0B198C;
}
.vbmenu_option
{
background: #FFFFFF;
color: #000000;
cursor: pointer;
}
.vbmenu_option a:link
{
color: #4F75E7;
}
.vbmenu_option a:visited
{
color: #4F75E7;
}
.vbmenu_option a:hover, .vbmenu_option a:active
{
color: #FFFFFF;
}
.vbmenu_hilite
{
background: #B1D7FF;

color: #4F75E7;
cursor: pointer;
}
.vbmenu_hilite a:link
{
color: #4F75E7;
}
.vbmenu_hilite a:visited
{
color: #4F75E7;
}
.vbmenu_hilite a:hover, .vbmenu_hilite a:active
{
color: #0D5ABD;
}
.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

Design - VBB Lesson 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Design - VBB Lesson 2

Uploaded by

Copyright:

Available Formats

Hướng dẫn thiết kế VBB Style

Lesson 2 : Cascading Style Sheets in vBulletin

Author: Kusanagi - StylesVN

Author: Kusanagi - StylesVN

Author: Kusanagi - StylesVN

Author: Kusanagi - StylesVN

Author: Kusanagi - StylesVN

Author: Kusanagi - StylesVN

Author: Kusanagi - StylesVN

Author: Kusanagi - StylesVN

.bigusername { font-size: 14pt; }

td.thead, div.thead { padding: 4px; }

.pagenav a { text-decoration: none; }

.fieldset { margin-bottom: 6px; }

form { display: inline; }

Author: Kusanagi - StylesVN

You might also like