Làm chủ VBullettin 4 trong 24h

Trang 2

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

Tự tạo giao diện vBulletin 4:

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 3

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 4

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 Cee Em

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 5

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 700,1, Ác 7004

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

imadir_editor Save Reset

imgdie gradients imgdir-ieens = 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 6

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 7

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 =

bả Eases ener [Em arin

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 imgditbutton Save ]_Reset 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:

Trang 8

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

Trang 9

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 —— | S= J== 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

Trang 10

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:

Trang 11

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

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

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

Trang 12

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

forumicon_size Click Here to Preview 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 13

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

Trang 14

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’

Trang 15

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 Sets the lnk color of inks within the footer ofthe page Gls background

Sit remave background Color ops 255.9) Sia eter Sremcre-eder [BỊ

Trang 16

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 P Document Width ————— tp, doc_backgroundColor ‘Changes the width of the vBulletin Suite This is useful to đọc margin sdoc_maxiWidth GGI|_- [II |=etif vauletin wil be embedded or nested in a larger webpage ‘doc_minWidth

vn Wavy border units size ®

highlight_background ae Tơng fax baokoreund " 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 ono os

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

Trang 17

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

Định dạng
Số trang	17
Dung lượng	6,42 MB