Tổng Hợp vBulletin Board & ۩۞۩ Mod vBulletin ۩۞۩

[LSB-Vipno3]

Hướng dẫn design vBulletin skins/styles - Part 1


Nguồn : kusanagivn.com

Cũng có khá nhiều bạn yêu cầu chuyện này rồi nên kus mạo muội viết 1 số hướng dẫn căn bản về việt thiết kế skin .Mong là sẽ nhận được góp ý từ phía mọi người để bài viết ngày càng hoàn thiện hơn .Cũng nói luôn mục đích bài viết này ngoài việc hướng dẫn các bạn làm 1 bộ skin hoàn chỉnh ,kus cũng muốn gởi tới mọi người 1 chuyện : "Xin hãy tôn trọng bản quyền tác giả" ,trước khi bạn biết được toàn bộ công đoạn để ra lò 1 skin thì có lẽ bạn sẽ ko biết hết công sức mà người thiết kế phải đầu tư vào , và ý thức hơn về việc rip và share vô tội vạ như hiện nay là thật sự đáng lên án .
Nói hơi nhiều rồi ta bắt đầu thôi !Trước tiên ta nên xem qua 1 số công việc phải làm:


Lession 1 : Fixing Default Styles
Tách riêng css :
-Sau khi setup skin mặc định ,bạn mở notepad và copy toàn bộ đoạn sau vào

body
{
background: #E1E1E2;
color: #000000;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
margin: 5px 10px 10px 10px;
padding: 0px;
}
a:link
{
color: #22229C;
}
a:visited
{
color: #22229C;
}
a:hover, a:active
{
color: #FF4400;
}
.page
{
background: #FFFFFF;
color: #000000;
}
td, th, p, li
{
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tborder
{
background: #D1D1E1;
color: #000000;
border: 1px solid #0B198C;
}
.tcat
{
background: #869BBF url(images/gradients/gradient_tcat.gif) repeat-x top left;
color: #FFFFFF;
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: underline;
}
.thead
{
background: #5C7099 url(images/gradients/gradient_thead.gif) repeat-x top left;
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: #3E5C92;
color: #E0E0F6;
}
.tfoot a:link
{
color: #E0E0F6;
}
.tfoot a:visited
{
color: #E0E0F6;
}
.tfoot a:hover, .tfoot a:active
{
color: #FFFF66;
}
.alt1, .alt1Active
{
background: #F5F5FF;
color: #000000;
}
.alt2, .alt2Active
{
background: #E1E4F2;
color: #000000;
}
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;
}
.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: #22229C;
font: 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.vbmenu_control
{
background: #738FBF;
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
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_control a:hover, .vbmenu_control a:active
{
color: #FFFFFF;
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
{
color: #22229C;
text-decoration: none;
}
.vbmenu_option a:visited
{
color: #22229C;
text-decoration: none;
}
.vbmenu_option a:hover, .vbmenu_option a:active
{
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
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_hilite a:visited
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_hilite a:hover, .vbmenu_hilite a:active
{
color: #FFFFFF;
text-decoration: none;
}
/* ***** styling for 'big' usernames on postbit etc. ***** */
.bigusername { font-size: 14pt; }
/* ***** small padding on 'thead' elements ***** */
td.thead, div.thead { padding: 4px; }
/* ***** basic styles for multi-page nav elements */
.pagenav a { text-decoration: none; }
.pagenav td { padding: 2px 4px 2px 4px; }
/* ***** define margin and font-size for elements inside panels ***** */
.fieldset { margin-bottom: 6px; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }
/* ***** don't change the following ***** */
form { display: inline; }
label { cursor: default; }
.normal { font-weight: normal; }
.inlineimg { vertical-align: middle; }

-Save file này dưới tên thietlapmau.css
-Vào template headinclude .Tìm đoạn $style[css] và thay bằng



-Up file thietlapmau.css vào thư mục gốc của 4rum bạn .VD: http://trangwebcuaban.com/thie... .Bạn có thể đặt đường dẫn khác ,miễn sao dễ quản lý và tiện tho mình là được .
Giai đoạn này ko bắt buộc nhưng khi bạn tách riêng css ra thì việc chỉnh sửa sẽ có phần nhanh chóng hơn là làm trực tiếp từ site => dễ quản lý ,dễ sửa chữa
Bỏ khoảng cách viền ngoài :
Có 1 khoảng cách nhỏ giữa toàn trang và phần nội dung site ,bạn có thể khử nó bằng cách sửa 1 chút trong css .Hãy mở file thietlapmau.css và tìm đoạn sau
Hãy sửa phần margin: 5px 10px 10px 10px thành margin: 0px 0px 0px 0px .Xong rồi save file lại và nhấn F5 để load lại site .Việc này ko nhất thiết cần nhưng 1 số skin việc chừa 1 khoảng nhỏ giữa các lề sẽ ko đẹp lắm ^^
Thu gọn lại header:
-Tại header template tìm :

<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">

Xóa bỏ nó đi ,mục đích việc này là dọn cho trống chỗ header chừa không gian gắn banner