Làm chủ VBullettin 4 trong 24h

a

/
lổng hợp và biên soạn

KEVINKOOL

HAOTHIENCZ

“vaull

etind

TRONG 28H


Vietvbb: 10 bước đơn giản tự tạo giao diện vB4 V)

vBulletin 4:

Tự tạo giao diện

trong 10 bước

Sử dụng StyleVars để tự thiết kế giao diện cho vBulletin 4.0

VietVBB Team hướng dẫn dựa trên một số phần của ebook “Skinning
Your Forum in 10 Easy Steps” - tác giả Fei Leung (vBulletin 4.0 Team).

Tháng 12/2009

-trang 1


Vietvbb: 10 bước đơn giản tự tạo giao diện vB4 V)
Mục lục

i mo dau...
Meo vat: Tao giao dién m

Bước 1: Thay đổi logo..

Mẹo vặt: Tạo thư mục chứa hình ảnh cho giao diện...

Bước 2: Thay đổi màu nền header.

Mẹo vặt: Đồng bộ màu nền header với log

Bước 3: Thay đổi màu nền thanh ta
Bước 4: Thay đổi màu nền.
Bước 5: Thay đổi mau link.....
Bước 6: Thay đổi nền tiêu đề chuyên mục.

Bước 8: Thay đổi nền foote
Bước 9: Thay đổi màu link ở foote
Bước 10: Hiệu chỉnh độ rộng diễn đàn.
Mẹo vặt: Chữa lỗi lệch diễn đàn sau khi chỉnh độ

Lời kết...
Mẹo vặt: Tải xuống và chia sẻ giao diện của bạn............................

-trang 2


Vietvbb: 10 bước đơn giản tự tạo giao diện vB4 V)
Lời mở đầu

Ey
1 odo din
KIÊN TIỂU
DŨNG
Yi'ÝI,
ONG
ch lên Gry
thin mend eho
une, Tinga rgbln,
be Bhancheesn honfschep wn
hte era
Cee
Hang
©
8 Sats vigt
che BagNam theo ecngt gh
8

Nhập ngay đc và tán
cà"Hàng Ngoại
dc tưnghÃ

ĐC

a ng v8 oohase
ve op mtr Sn
fury
Em
GW:7
SHYẾC? pas.DD eepante
G sot - thong
byđen
keen Koo
06538 —_D yensin 06 cng nahi NPD ob
BAƯẾt30
Speen
ThassosKoo

inh du đã đọc các chujên mục | khóm đều hành đến đàn
em

1Ư Đang online

ang c62 ngs oni tại đến in, 1 thinh vo vt Koch
5 Wt try ip dng nhitB 14, 4 Days Ago Lic 05:06PM
Kevin Kool
dửh Ý KiếU ti DũnG
Chủ đ6:195 BÌivết 232 Thành vân:9
“Thành vn mắt 090.2
© Yeon Legend
[conta unread forum posts
i contans no unread frum posts
Hi Foumssa category
i Foumisa unk

Sau khi cài đặt thanh céng vBulletin 4, chắc hẳn bạn sẽ muốn tự tạo một giao di
riêng và phù hợp cho forum của mình. Bạn hồn tồn có thể thực hiện điều này
bằng cách sử dụng công cụ chỉnh sửa Style Variable trong Bảng điều khiển quản trị
(AdminCP). Công cụ chỉnh sửa Style Variable (sau đây xin được gọi tắt là Stylevar)
cho phép bạn hiệu chỉnh mọi thứ từ màu sắc, khoảng cách giữa các đối tượng cho
đến các hình ảnh, logo...
Sẽ hơi rối rắm đôi chút nếu bạn là người mới làm quen với Stylevar, nhưng thực ra
Stylevar lại rất đễ dùng. VietVBB Team xin hướng dẫn bạn cách tự tạo ra một giao
diện riêng trong 10 bước bằng cách sử dụng Stylevar.
Tao giao diện mới

Thay vì hiệu chỉnh trực tiếp giao diện mặc định, hãy thếm
một giao dién
mới trong Style Manager. Bằng cách này, thành viên cỗ thể sử đụng giao
diện cũ trong lúc bạn thiếp lập giao diện mới

-trang 3


Vietvbb: 10 bước đơn giản tự tạo giao diện vB4 V)

Bước 1: Thay đổi logo
Điều đầu tiên cần thực hiện là thay đổi logo mặc dinh (vBulletin) lại thành logo của
Íorum/webste/cơng ty bạn. Chuẩn bị sẵn một logo và upload nó lên host:

7⁄

Per eu

Sau
mũi
bạn
nút

700,1, Ác 7004

khi upload xong, bạn đăng nhập vào AdminCP, tìm đến Style Manager. Nhấn
tên xổ xuống tại giao diện cần chỉnh sửa và chọn Stylevar. Hệ thống sẽ chuyển
đến màn hình làm việc Style Variable, nếu không tự động chuyển, bạn hãy nhấn
“Go”.

Search Stylevar

Ohide variables:

jeader_link_color

header_linkhover_color
headerpadding
toplinks_form_input
toplinks-input legin_backgrt
toplinks_link color
toplinks_linkhover_color

Todi
attach
imdir_button
imgairems
imadir_editor

imgdie
gradients
imgdir-ieens
imgdir_misc

Style Variable Editor - VietVBB.
-iI#magePaths

Title Image
(Đ
=
This is your logo or title image. Set to the path
of the logo you want to use.

URL | images/v2b/logo.ipg
Save

Reset.
=

imgdir—pagination
imgdir_polle
imgdir_rating
imgdir_reputation
imadir_searchresults
imadir_siteicons

Tại khung bên trái, bạn chọn giá trị tileimage' (th c nhóm lmagePaths). Trong
khung mới xuất hiện bên phải, bạn nhập đường dẫn đến logo bạn vừa upload lên
host, sau đó nhấn “Save: Kết quả sẽ được như sau:

-trang 4

.2009-2010.vielVBB`
hpi /wmwuvies


Vietvbb: 10 bước đơn giản tự tạo giao diện vB4 @®

vBulletin support forum for Viet:

on
# Diễn đàn

Như bạn thấy, logo của chúng ta đã thay thế logo mặc định của vBulletin, header cũng
tự động thay đổi kích thước cho phù hợp. Nhưng màu nền lại không phù hợp với logo
của chúng ta. Ta chuyển qua bước 2.
Tạo thư mục chứa hình ảnh giao diện

Hay tao mét thư mục để chứa các hình ảnh của giao diện mới. Việc này sẽ
giúp bạn dé dàng tìm kiếm và thay thế hình ảnh nếu sau này bạn muốn sửa
đổi gì đó.

-trang 5


Vietvbb: 10 bước đơn giản tự tạo giao diện vB4 @®

Bước 2: Thay đổi màu nền header
tại ta đã thay được logo của mình, nhưng ta cần làm cho nền của header ăn khớp

logo của ta. Cũng tại màn hình Stylevar, bạn tìm đến giá trị ‘header_background’
(thuộc nhóm Header)
Search Stylevar
Hide Variables:
forumrow_firstentry_backgr
—
wqo_border
go fontSiae

Style Variable Editor- VietVBB.
=

background
er. border
ácRed
eadet
‘igoh
olor
'w@cheader~c

bả
header

hheader_border

feaderceolor
eadercfele color
hesder-Inkhaver-color
Readercooceing
form: pout

toplink
|| |
Sblinks-topuclogin_backgn
tolinks-link_eelor

toplinks linkRover_color
WmagePathe
‘mmgdir_attach
imgditbutton
imgdir_ems

hheader_background - [Revert]

Background Color

=24a56

Repeat
Background
5

Írepeatx [=]

Eases ener

=

Hẹp 2

[Emarin

Bl

Image
Background offset

Horizontal
Background Image
Vertical offset

Here to Preview

Save

]_Reset

Bạn hãy để ý, nền logo của chúng ta sử dụng dải màu gradient trải từ màu đen
lên màu xanh đậm. Vì vậy để nền header ăn khớp được với logo, ta cần phải
sử dụng một hình ảnh có cùng chiều cao và có nền (dải màu) giống với logo (xem
hình bên trái). Sau khi đã có hình ảnh, bạn nhập đường dẫn vào khung bên phải
và nhấn ‘save’.
Bây giờ kết quả đã khá hơn trước rất nhiều:

vBulletin support forum for Vietnam

Ta sẽ tiếp tục với bước 3: Thay đổi màu nền thanh tab,

-trang 6

\ovielUSẾ`
tp//wWWUXf

Vietvbb: 10 bước đơn giản tự tạo giao diện vB4 @®
Đồng bộ màu nền header với logo

Khi bạn sử dụng dải màu (gradient) để làm nền, hãy đặt một màu làm màu
nền để lấp các khoảng mà gradient không lấp được:
oulletin suppor: forum

for

'Để thực hiện, bạn sử dụng công cụ chọn màu của trình chỉnh sửa ảnh mà.
bạn đang sử dụng (Photoshop, CorelDRAW, Illustrator...) va chọn 1 màu.

Cửa số chọn màu sẽ cho bạn mã của màu đó. Nhập nó vào mục Background
Color và header ctia ban sé thẩm mỹ hơn.

vBulletin support forum for

-trang 7

Vie

.
men
p//WWWXi


Vietvbb: 10 bước đơn giản tự tạo giao diện vB4 @®

Bước 3: Thay đổi màu nền thanh tab
Tiếp theo, để thay đổi màu nền của thanh tab (chứa các mục Home, Forum, Blog, Whats
New?..) cho phù hợp với tông màu của giao diện mới, bạn tìm đến giá trị 'navbar_ tab_
background' (thuộc nhóm NavBar) và nhập đường dẫn đến hình nền (hoặc nhập mã
màu) mà bạn muốn thay đổi. Thuộc tính repeat-x' cho phép hình nền của ta lặp lại
theo chiều ngang, vì vậy bạn chỉ cần một hình nền có kích thước vừa phải, Siylevar sẽ
tự lặp đầy chiều rộng của diễn đàn.
Search Stylevar
Hide Variables:
wear
navbar_ backgreund
navbar- background_notiiy
navbar-border
naybar-ccler
navbar-fonk
navbar- link eeler
navbar-linkhover_color
navbar_padding
navbar
popup link backgre
havbar_selected
po up boc
ravbar_tab_bevel
navbar-tab-border.
navbar-tab-ccle
navbar.
+
navbar
\khover_color
navbar_tab_selected_backg

navbar_tab_selected_top_w
navbar-tab-size
navbarsearch_borderwidth
navbarsearch_input_border«
navbarsearch_padding
searchbox_size

Style Variable Editor - VietVBB.
|NavBar

Background for the Navigation Bar Tabs in the Header
Background Color
#719288
Background Image
ur(images/v2b/tab-bg.sif)
Background Repeat
repeat-x [=]
Units.
Background Image
Horizontal Offset

Background Image
Vertical offset

"4# 7.

|

——
|

S= J==

Kết quả sau khi chúng ta nhấn ‘save’:
2/7222
vBulletin support forum for Vietnamese
7⁄2

Bạn có thể dừng ở đây nếu như bạn cảm thấy đã hài lòng với những gì hà nấy giờ
chúng ta có. Các bước tiếp theo sẽ hướng dẫn bạn hiệu chỉnh một số thay đổi nhỏ

khác.

-trang 8

'2009-2010.vielBB`
0: / fru


Vietvbb: 10 bước đơn giản tự tạo giao diện vB4 @®

Bước 4: Thay đổi màu nền
Search Stylevar
Orie variable:
Control_content_hover_colot
control_content_padding
control_content_radius
control_content_shadow_col
ccontro|_focus_background
Sontrolfone,

control hover_backsround
ontrol_hover_color
PoE

Background Color
Background
Image2
_

ddoc_maxWidth
doe_minwidth
ng
Oe border

ate
Background Image
Horizontal Offset

ee_bacgroundcolor

Nhlght-backoround

lightweightbox_background
lightweightbox_border
member _popupmenu_shade
‘mid border
‘mig fontsize
naviinks backaround

ees

PS nrrriireo

Vertical Offset

_Save |_Reset ]

Màu nền diễn đàn có tầm quan trọng khá lớn đối với toàn bộ giao diện. Để thay đổi màu
nền, bạn tìm đến giá trị 'doc_background' (thuộc nhóm Common) ở cột trái, và nhập mã
màu mà bạn muốn đổi vào ô Background Color, sau đó nhấn “Save:

vBulletin support forum forV

ncn
4 on đàn
HÀNG HOÁ VÀ THƯƠNG
HỆU
Hàng Việt Nam

-trang 9

9

G687

vietWBBˆ
htp//wlfWAMf


Vietvbb: 10 bước đơn giản tự tạo giao diện vB4 @®

Bước 5: Thay đổi màu link
eo tơng màu hiện tại, ta cần màu của các link đậm hơn chút nữa và khi rê chuột lên
sẽ đổi thành màu cam cho nổi bật.
imadir_siteicons
imadir_statusicon
titleimage
Tink_textDecoration
linkhover_color

_linkhover_textDecoration

Powered by vBullatin™ Wersion 4.0.0 Patch Level
1 Capyright © 2009

vBulletin Solutions, Inc. All rights reserved.

Chọn giá tri ‘link color’ (thuộc nhóm Links) và nhập mã màu vào ơ bên phải để đổi màu
cho link.
imgdir_ searchresults
imgdir_siteicone
imgdir_statusicon.
titleimage
a_extlink
link_color
link textDecoration
linkhover_textDecoration
htmldoctype.

‘Powered by vBullatin™ Version 4.0.0 Patch Level

1 Capyright © 2009

vBulletin Solutions, Inc. All rights reserved.

Chọn giá trị ‘linkhover_color’ (thuộc nhóm Links) và nhập mã màu vào ô bên phải để đổi
màu cho link khi rê chuột lên.
Y KIEN TIEU DUNG

-Ý KIẾN TIÊU DUNG duc ap ra nhễm mục ch tập hợp các ý kến, nhận xét, đánh giá, gớp ý của
và xác thực hơn về sản phẩm/dch vụ mà mình đang muốn muajsử dụng. Thẳng thễn, trung thực
HÀNG HOÁ VÀ THƯƠNG HIỆU

-trang 10

Hàng Việt Nam

Kd

Gi tiêu cốc thương hiệu iệtNan đượcngườtêu dùng ưa tư

Kd

Hàng

Ngoại Nhật

Gó thêu cc rong go đượcưa th


Vietvbb: 10 bước đơn giản tự tạo giao diện vB4 @®

Bước 6: Thay đổi nền tiêu đề chuyên mục

Để thực hiện thay đổi nền của vùng chứa tiêu đề các chuyên mục, ta chọn ‘forumhead
__background' (thuộc nhóm Forums) và nhập đường dẫn đến hình nền và mã màu.
Style Variable Editor - VietVBB

Search Stylevar

Ohide variables:

forum_sidebar_content_bacl .|(FOTUMS

forum_sidebar_content_bort
forum_sidebar_content_colo
forum_sidebar_content_sepi
forum_sidebar_content_sepi
forum_sidebar_contentlist_a
ele
fonumcsidebor-peoder
forum_sidebar_header_font
forumzsidebar_width
forumbit_spacer_width
forumbits_aForum
forumbits_border
H
ferumbits_shadow_color [||
forumbits_text_color
forumnheed, backoround
forumhead_border
forumhead_color

forumhead_font
forumhead_top_corner_radi
forumhead_width

forumhead_background
Background Color
#237ia8
ko

Background Image

Background Repeat
n
| Units
Background Image
Horizontal Offset
Background Image
Vertical Offset

url(Images/v2b/head-bg.gif)

[repeat-x [=]
_m

®

Click Here to Preview

forumicon_size

forumiconbox size

foruminfo_background

foruminfo_border

=

tiếpCD)

foruminfo_header_backgrou +

|
I

save

mest]

|

Kết quả:
ord

Hàng Việt Nam
Giế thiệu các thương hậu Việt Nam được người têu dùng ưa thí:

kd

GiHàngthêu Ngoại

các thươngNhập.hiệu ngoi được watch

Thực hiện bước 6 để đổi màu link tiêu đề (trong hình ví dụ là “Hàng hố và thương
hiệu).

-trang 11


Vietvbb: 10 bước đơn giản tự tạo giao diện v84
Bước 7: Thay đổi màu link ở tiêu đề chuyên mục

ể đổi màu link tiêu đề chuyên mục, ta chọn forumbits aForum' (thuộc nhóm Forums),
chọn 1 màu trong bảng màu có sẵn hoặc nhập mã màu theo ý thích.
forum_sidebar_header_colo ^'

forum_sidebar_header_font
forum_sidebar_width

forumbits_border
forumbits_shadow_color
forumbits_text_color
forumhead_background
forumhead_border
forumhead_color
forumhead_font
forumhead_top_corner_radi
forumhead_width
forumicon,
fanimicanhay. size

Save lại:
Hãng Việt Nam
ee
2 annem
M
NI a

-trang 12

l4 ee Bo m ee
ĐH
aie
Ô
BES dmneemeeer
Pres
bees

a
©

Sa


Vietvbb: 10 bước đơn giản tự tạo giao diện vB4 @®

Bước 8: Thay đổi nền footer
Để đổi nền footer, ta thực hiện chọn mục footer_background' (thuộc nhóm Footer) bên
_ cột trái và nhập mã màu, nếu muốn sử dụng hình nền hãy nhập đường dẫn đến hình
nền vào ơ tương ứng (Background lmage). Sau đó nhấn ‘Save’
tabslight border

tabslight_selected_backgrou
tabslight_size
texthilte-color
time_color
tiny fontSize
bitt/Merge
diff_remove_background
diffadd_color
diffremove_color

colot r
ght__fon
pyriight
footer_copyr
footer_font
Footer link_color
footer linkhover_color
footer_moz_shadow_color
footer_padding

‘Changes the background (color and images) of the page
footer in vBulletin.
‘Background Color
#002945

Background Image
Background Repeat
Units:
Background Image

Horizontal Offset
Background Image
Vertical Offset
Glick Here to
Preview

Co

il

Thực hiện bước 9 nếu muốn thay đổi màu các liên két 6 footer.

-trang 13

2003-2010,
Neti


Vietvbb: 10 bước đơn giản tự tạo giao diện vB4 @®

Bước 9: Thay đổi màu link ở footer
Cũng tại nhóm Footer, nhấp chon ‘footer_link_color’ dé d6i mau link 6 footer.
tapstignt_size
texthilte_color
time_color

DAO
Glsremavebackground
Sit
background

Sia
eter
Sremcre-eder
[BỊ
footer_border
footer_color
footer_copyright_font
footer font
footer_linkhover_color

-trang 14

Sets the lnk color of inks within the footer ofthe page.
Color ops. 255.9)
i Capyright © 2009
Powered by véullalin™ Version 4,0.0 Patch Level
‘vBulletin Solutions, Inc. All rights reserved.


Vietvbb: 10 bước đơn giản tự tạo giao diện vB4 @®
Bước 10: Hiệu chỉnh độ rộng diễn đàn

Giao diện mặc định của vBulletin 4 được đặt ở chế độ fluid, tức là độ rộng của diễn đàn
sẽ thay đổi theo cửa sổ và độ phân giải của người dùng. Để giới hạn diễn đàn vào một
giá trị kích thuéc nhat dinh (fixed width), bạn thực hiện như sau:
eontrol_hover_ background

control haver_color
đọc_background
doc_backgroundColor

đọc
margin
sdoc_maxiWidth
‘doc_minWidth

vn
Wavy border
ae
Tông fax baokoreund

highlight_background

G[III|_-

Document Width
tp,
P
—————
‘Changes the width of the vBulletin Suite. This is useful to
|=etif
vauletin wil be embedded or nested in a larger
webpage.

®

units
size

"

seve _|_neset

lightweightbox_border

Chọn giá trị ‘doc_width’ (nhóm Common) bên trái. Ở khung bên phải, chọn một đơn vị
(Units), c6 thé là px, cm, mm.. nhưng thông thường là px và đặt 1 giá trị (820px).

Ua:

Den gh oa onoos

Chiều rộng diễn đàn đã được thu hẹp lại (820px) nhưng bị lệch qua một bên: Hãy thực
hiện mẹo bên dưới để chỉnh lại.
th diễn đàn sau khi chỉnh độ rộng

Tìm đến “doc margin' (nhóm Common). Chon dan vi px, chon Yes ở mục
“Use the ‘top’ value for all sides’ vd dat gid tri ‘auto’ cho muc Top.
changes the amount of space babween the Browser Window e)
gi

-trang 15

=e

use the "top" value fr al sda
lrep

po

Vietvbb: 10 bước đơn giản tự tạo giao diện vB4 @®
Lời kết

Ic dich của bài hướng dẫn này là giúp các bạn mới lần đầu làm quen với vBulletin 4
ó khả năng tự thiết kế một giao diện cho riêng mình. Khi thực hiện đến đây là bạn đã
làm được điều đó rồi!
Tuy nhiên vẫn cịn cả một khu rừng bí ẩn mang tên ‘Stylevar’ phia trước, nơi mà khả năng
tuỳ biến chỉ có thể bị giới hạn bởi óc tưởng tượng của bạn!
Dén doc ‘Vietvbb Stylevar Dictionary.
Tải xuống và chia sẻ giao diện của bạn

Nếu bạn muốn chia sẻ giao diện của bạn cho người khác. Bạn có thể tải

về thông qua AdminCP.

Nhấn vào mục 'Download / Upload Styles' ở cột trái AdminCP, chọn giao
điện mới tải xuống ở mục Download, sau đó nhấn Download.
Đồng gói file xml vừa download cùng với thư mục chứa những hình ảnh.

mà bạn tạo ra trong quá trình thực hiện.
Dinh kém với topic chia sé tài liêu này là gồi giao diện mà chúng ta đã
thực hiện từ đầu đến giờ. Bạn có thể download về tham khảo.

-hết-

(c) vietvbb.vn

-trang 16