Đang tải... (xem toàn văn)
Làm chủ VBullettin 4 trong 24h
a / lổng hợp 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 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 số phần ebook “Skinning Your Forum in 10 Easy Steps” - tác giả Fei Leung (vBulletin 4.0 Team) Tháng 12/2009 -trang 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 header Mẹo vặt: Đồng màu header với log Bước 3: Thay đổi màu ta Bước 4: Thay đổi màu Bước 5: Thay đổi mau link Bước 6: Thay đổi tiêu đề chuyên mục Bước 8: Thay đổi 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 chỉnh độ Lời kết Mẹo vặt: Tải xuống chia sẻ giao diện bạn -trang Vietvbb: 10 bước đơn giản tự tạo giao diện vB4 V) Lời mở đầu Ey 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 © Sats vigt che BagNam theo ecngt gh Nhập đc 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 chujên mục | khóm hành đến đàn em 1Ư Đang online ang c62 ngs oni đến in, thinh vo vt Koch Wt try ip dng nhitB 14, 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 mắt 090.2 © Yeon Legend [conta unread forum posts i contans no unread frum posts Hi Foumssa category i Foumisa unk Sau cài đặt céng vBulletin 4, hẳn bạn muốn tự tạo giao di riêng phù hợp cho forum Bạn hồn tồn thực điều cách sử dụng công cụ chỉnh sửa Style Variable Bảng điều khiển quản trị (AdminCP) Công cụ chỉnh sửa Style Variable (sau xin gọi tắt Stylevar) cho phép bạn hiệu chỉnh thứ từ màu sắc, khoảng cách đối tượng hình ảnh, logo Sẽ rối rắm đôi chút bạn người làm quen với Stylevar, thực Stylevar lại đễ dùng VietVBB Team xin hướng dẫn bạn cách tự tạo giao diện riêng 10 bước cách sử dụng Stylevar Tao giao diện Thay hiệu chỉnh trực tiếp giao diện mặc định, thếm giao dién Style Manager Bằng cách này, thành viên cỗ thể sử đụng giao diện cũ lúc bạn thiếp lập giao diện -trang Vietvbb: 10 bước đơn giản tự tạo giao diện vB4 V) Bước 1: Thay đổi logo Điều cần thực thay đổi logo mặc dinh (vBulletin) lại thành logo Íorum/webste/cơng ty bạn Chuẩn bị sẵn logo upload lên host: 7⁄ Per eu Sau mũi bạn nút 700,1, Ác 7004 upload xong, bạn đăng nhập vào AdminCP, tìm đến Style Manager Nhấn tên xổ xuống giao diện cần chỉnh sửa chọn Stylevar Hệ thống chuyển đến hình làm việc Style Variable, không tự động chuyển, bạn 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 xuất 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 sau: -trang 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 thay logo mặc định vBulletin, header tự động thay đổi kích thước cho phù hợp Nhưng màu lại không phù hợp với logo Ta chuyển qua bước Tạo thư mục chứa hình ảnh giao diện Hay tao mét thư mục để chứa hình ảnh giao diện Việc giúp bạn dé dàng tìm kiếm thay hình ảnh sau bạn muốn sửa đổi -trang Vietvbb: 10 bước đơn giản tự tạo giao diện vB4 @® Bước 2: Thay đổi màu header ta thay logo mình, ta cần làm cho header ăn khớp logo ta Cũng 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 Írepeatx [=] Eases ener = Hẹp [Emarin Bl Image Background offset Horizontal Background Image Vertical offset Here to Preview Save ]_Reset Bạn để ý, logo sử dụng dải màu gradient trải từ màu đen lên màu xanh đậm Vì để header ăn khớp với logo, ta cần phải sử dụng hình ảnh có chiều cao có (dải màu) giống với logo (xem hình bên trái) Sau có hình ảnh, bạn nhập đường dẫn vào khung bên phải nhấn ‘save’ Bây kết trước nhiều: vBulletin support forum for Vietnam Ta tiếp tục với bước 3: Thay đổi màu tab, -trang \ovielUSẾ` tp//wWWUXf Vietvbb: 10 bước đơn giản tự tạo giao diện vB4 @® Đồng màu header với logo Khi bạn sử dụng dải màu (gradient) để làm nền, đặt màu làm màu để lấp 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 trình chỉnh sửa ảnh mà bạn sử dụng (Photoshop, CorelDRAW, Illustrator ) va chọn màu Cửa số chọn màu cho bạn mã màu Nhập vào mục Background Color header ctia ban sé thẩm mỹ vBulletin support forum for -trang 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 tab Tiếp theo, để thay đổi màu tab (chứa mục Home, Forum, Blog, Whats New? ) cho phù hợp với tông màu giao diện mới, bạn tìm đến giá trị 'navbar_ tab_ background' (thuộc nhóm NavBar) nhập đường dẫn đến hình (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 ta lặp lại theo chiều ngang, bạn cần hình có kích thước vừa phải, Siylevar tự lặp đầy chiều rộng 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# | —— | S= J== Kết sau nhấn ‘save’: 2/7222 vBulletin support forum for Vietnamese 7⁄2 Bạn dừng bạn cảm thấy hài lịng với hà có Các bước hướng dẫn bạn hiệu chỉnh số thay đổi nhỏ khác -trang '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 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 diễn đàn có tầm quan trọng lớn toàn 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, nhập mã màu mà bạn muốn đổi vào Background Color, sau nhấn “Save: vBulletin support forum forV ncn on đàn HÀNG HOÁ VÀ THƯƠNG HỆU Hàng Việt Nam -trang 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 tại, ta cần màu link đậm chút rê chuột lên đổi thành màu cam cho bật imadir_siteicons imadir_statusicon titleimage Tink_textDecoration linkhover_color _linkhover_textDecoration Powered by vBullatin™ Wersion 4.0.0 Patch Level Capyright © 2009 vBulletin Solutions, Inc All rights reserved Chọn giá tri ‘link color’ (thuộc nhóm Links) 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 Capyright © 2009 vBulletin Solutions, Inc All rights reserved Chọn giá trị ‘linkhover_color’ (thuộc nhóm Links) nhập mã màu vào ô bên phải để đổi màu cho link rê chuột lên Y KIEN TIEU DUNG -Ý KIẾN TIÊU DUNG duc ap nhễm mục ch tập hợp ý kến, nhận xét, đánh giá, gớp ý xác thực sản phẩm/dch vụ mà 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 tiêu đề chuyên mục Để thực thay đổi vùng chứa tiêu đề chuyên mục, ta chọn ‘forumhead background' (thuộc nhóm Forums) nhập đường dẫn đến hình 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 thương hậu Việt Nam người têu dùng ưa thí: kd GiHàngthêu Ngoại thươngNhập.hiệu ngoi watch Thực bước để đổi màu link tiêu đề (trong hình ví dụ “Hàng hoá 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 màu bảng màu có sẵn 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 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 footer Để đổi footer, ta thực chọn mục footer_background' (thuộc nhóm Footer) bên _ cột trái nhập mã màu, muốn sử dụng hình nhập đường dẫn đến hình 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
