Làm chủ VBullettin 4 trong 24h

Làm chủ VBullettin 4 trong 24h

a /

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

KEVINKOOL HAOTHIENCZ

“vaulletind

TRONG 28H

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

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)

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 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 ONG era chee ho ep ch lên thin nd eho I, hte be Bhan sn nfsch wn Gry me une, Ting bln, fury a rg a ng v8 ooh ase ve op mtr Sn

Hang vigt Nam © GW:7 DD eepante sot - thong

8 Sats che Bag theo ecngt gh SHYẾC? pas G by keen Koo

đen

"Hàng Ngoại Nhập ĐC 06538 —_D sin 06 cng nahi ob

8 cà dc tưnghà ngay đc và tán BAƯẾt30 yen Speen Koo NPD

Thassos

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 hoàn toà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⁄

Sau khi upload xong, bạn đăng nhập vào AdminCP, tìm đến Style Manager Nhấn mũi 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 bạ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 nút “Go”

Style Variable Editor - VietVBB

Search Stylevar

Ohide variables:

jeader_link_color -iI#magePaths

header_linkhover_color headerpadding

toplinks_form_input toplinks-input legin_backgrt Title Image = (Đ

toplinks_link color toplinks_linkhover_color This is your logo or title image Set to the path

of the logo you want to use

Todi attach

imdir_button URL | images/v2b/logo.ipg

imgairems

imgdir_misc 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:

.2009-2010.vielVBB ` hpi /wmwuvies

-trang 4

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)

Style Variable Editor - VietVBB

Search Stylevar Hide Variables:

forumrow_firstentry_backgr =

— wqo_border go fontSiae hheader_background - [Revert] Hẹp 2

ácReder background

‘igoheadet border 'w@cheader~color Background Color =24a56 =

header Background Repeat Írepeatx [=]

hheader_border 5 Bl

feaderceolor

eadercfele color Background Image

hesder-Inkhaver-color Readercooceing Horizontal offset toplink form: pout Sblinks-topuclogin_backgn || | Vertical offset Background Image

tolinks-link_eelor toplinks linkRover_color Here to Preview WmagePathe ‘mmgdir_attach

imgdir_ems

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,

\ovielUSẾ ` tp//wWWUXf

-trang 6

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 Vie

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 popup 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 "4# 7

ur(images/v2b/tab-bg.sif)

repeat-x [=]

Background Color #719288 Background Image

Background Repeat Units

Background Image Horizontal Offset

Background Image ||

Vertical offset

——

Kết quả sau khi chúng ta nhấn ‘save’ :

7⁄2 2/7222 vBulletin support forum for Vietnamese

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

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 Background Color ontrol_hover_color PoE Background Image _ 2

ee_bacgroundcolor ees

ddoc_maxWidth doe_minwidth ate

ng Background Image

Oe border Horizontal Offset

Nhlght-backoround PS nrrriireo

lightweightbox_background lightweightbox_border Vertical Offset member _popupmenu_shade

‘mid border

‘mig fontsize _Save |_Reset ]

naviinks backaround

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 for V

ncn

4 on đàn

HÀNG HOÁ VÀ THƯƠNG HỆU

Hàng Việt Nam 9 G687

vietWBBˆ

htp//wlfWAMf

-trang 9

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 ‘Powered by vBullatin™ Version 4.0.0 Patch Level 1 Capyright © 2009

vBulletin Solutions, Inc All rights reserved

htmldoctype

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

Hàng Việt Nam

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

Hàng Ngoại Nhật

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

-trang 10

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 forumhead_background tiếp CD) forum_sidebar_contentlist_a fonumcsidebor-peoder ele forum_sidebar_header_font Background Color ko #237ia8 =

forumzsidebar_width Background Image url(Images/v2b/head-bg.gif)

forumbit_spacer_width forumbits_aForum Background Repeat [repeat-x [=]

forumbits_border ferumbits_shadow_color [|| | Units forumbits_text_color H n _m ® forumnheed, backoround Background Image

forumhead_border forumhead_color Horizontal Offset forumhead_font Background Image forumhead_top_corner_radi forumhead_width Vertical Offset

forumiconbox size

foruminfo_background

foruminfo_border foruminfo_header_backgrou + | I save mest] |

Kết quả:

ord

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

Hàng Ngoại Nhập

kd Gi thêu các thương 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 hoá 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 a ee ee

-trang 12

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_add_background diff_remove_background diffadd_color diffremove_color

footer_copyright_font pyright_color 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

Co

il

Background Image Background Repeat Units:

Background Image Horizontal Offset Background Image Vertical Offset Glick Here to Preview

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