Hướng dẫn tự thiết kế Forum VBB 4.0.X pdf

Về phần cơ bản của VBB thì mình khỏi giới thiệu nhé vì mình nghĩ với những bạn đã từng làm forum VBB từ các phiên bản trước đều biết phần cơ bản của VBB là gì , ebook này mình đi sâu vào

HƯỚNG DẪN TỰ THIẾT KẾ

FORUM VBB 4.0.X

Ebook by : HTT itvn Email : Zz.mr.nguyen.zZ@gmail.com

Hiện tại trên mạng đã có nhiều loại ebook về các phiên bản VBB 3.x , nhưng lại chưa có ebook

về VBB 4.x vì VBB 4.x khắc hẳn so với VBB 3.x Nay mình viết ebook này với tinh thần học hỏi và chia sẽ , tuy nhiên sẽ có nhiều sai sót vì mình cũng mới biết về VBB 4.x mà thôi

Ebook này dựa vào các mod có sẵn trên mạng , phần lớn trên trang diễn đàn www.itvnn.net và cộng với những kinh nghiệm làm forum của mình

Về phần cơ bản của VBB thì mình khỏi giới thiệu nhé vì mình nghĩ với những bạn đã từng làm forum VBB từ các phiên bản trước đều biết phần cơ bản của VBB là gì , ebook này mình đi sâu vào vấn đề về forum như tạo forum null , skin , các mod forum , …

Trong ebook này mình lấy trang ITVNN forum làm nguyên mẫu để viết bài , vì vậy các hình ảnh , mod , code đều bắt nguồn từ www.itvnn.net Bài viết này cũng sẽ giúp các bạn thiết kế một forum giống như của ITVNN.net từ “ trong xương ngoài da “ với phiên bản VBB 4.0.5 mà ITVNN forum đang dùng

PHẦN I : CÀI ĐẶT DIỄN ĐÀN

I.1 : Đăng kí host , tên miền

Việc đầu tiên là bạn phải có host pro hay free cũng được Nếu bạn không có đủ tài chính để đăng kí host pro thì bạn có thể lựa chọn trang web cung cấp host free :

Bài viết này mình lựa chọn host FREEVNN.COM để làm bài viết

Đầu tiên bạn vào www.freevnn.com để đăng kí host , tại trang chủ bạn nhấp chọn vào mục Đăng kí

Bạn điền thông tin đầy đủ như hình ảnh sau :

Chú ý : tên sử dụng là tên mà bạn phải sử dụng sau này , forum của bạn sẽ có đường dẫn

www.tencuaban.freevnn.com , mật khẩu tối da là 8 kí tự Email phải chính xác vì bạn còn phải xác nhận và nó gửi thông tin tài khoản forum của bạn

Kick vào Đăng kí , kick tiếp vào Click Me To Continue , nếu thông tin đăng kí của bạn sai thì bạn phải quay lại để đăng kí lại , nếu đúng thì sẽ xuất hiện một hình ảnh để bạn xác nhận Bạn điền chữ số ở hình ảnh và nhấp Register

Đăng kí thành công , bạn vào email để xác nhận , lúc này lại xuất hiện thêm một hình ảnh xác nhận nữa , bạn tiếp tục thức hiện như các bước trên Khoảng 1 lúc sau đó , nhà cung cấp sẽ gửi cho bạn một email về thông tin tài khoản của bạn , ví dụ :

Cpanel Username: freev_090784

Cpanel Password: HTTitvn

Your URL: http://tencuaban.freevnn.comor http://www.tencuaban.freevnn.com

FTP Server : ftp.freevnn.com

FTP Login : freev_090784

FTP Password : HTTitvn

MySQL Database Name: MUST CREATE IN CPANEL

MySQL Username : freev_090784

MySQL Password : HTTitvn

MySQL Server: SEE THE CPANEL

Cpanel URL: http://cpanel.freevnn.com

Bạn hãy ghi nhớ toàn bộ nhé , đặc biệt là dòng màu xanh đậm vì bạn sẽ cần để cài đặt Bạn hãy vào web của bạn nhé , lúc này trang web chưa có gì cả , chỉ có trang index của FREEVN

Đến đây là bạn đã tạo thành công một host rồi , tuy nhiên bạn lại chê host này tên quá dài , không mang phong cách của riêng mình Yên tâm , bạn có thể tìm một domain để thay thế và ghép vào nó Mình nghĩ bạn vào www.co.cc là có cái tên domain đẹp , miễn phí lâu dài Khi đăng kí bạn sẽ có đường link của web là : www.tenweb.co.cc Cái này bạn tự tìm hiểu và đăng kí nhé , vì bài viết chỉ hướng dẫn bạn làm một forum đơn giản mà thôi Bây giờ sang bước 2 nhé !

I.2 : Tạo Database

Bạn vào trang http://cpanel.freevnn.com , hãy điền thông tin Usename và password mà bạn phải nhớ ở trên ( chữ màu xanh đậm ) , kick vào Control panel ở phía trên và bạn phải chú ý cái này nhé

Hãy nhớ dòng : MySQL hostname : sql221.freevnn.com nhé ( của bạn sẽ khác về chữ số )

Tại trang Control panel bạn kick vào MySQL Databases :

Cửa sổ MySQL Databases xuất hiện :

Tại mục database-name bạn điền tên forum ( hoặc bạn có thể điền tên khác , nhưng để dễ nhớ thì bạn nên để tên là forum ) , tiếp tục nhấp vào Create Database Bạn có thể tạo tối đa 7 cái tên database , nhưng tốt nhất là nên tạo 1 mà thôi Khi tạo xong bạn sẽ có tên database như sau :

freev_090784_forum ( của bạn sẽ khác về số ) và hãy nhớ nó nhé !

Còn nhiều mục mà bạn phải tự khám phá nhé , mình chỉ hướng dẫn cơ bản để làm nên 1 cái forum Bước tạo Database đến đây là xong , sang bước tiếp theo thôi

I.3 : Upload dữ liệu lên host

Có nhiều phần mềm hỗ trợ cho việc upload dữ liệu lên host , nhưng ở đây mình chỉ thích sử dụng phần mềm cuteFTP pro 3.8 Bạn tải về tại đây , giải nén và tiến hành cài đặt

Khi cài đặt xong bạn chưa nên khởi chạy chương trình , coppy file patch vào thư mục vừa cài đặt cuteFTP pro ( đường dẫn mặc định là : C:/Programfiles/GlobalSCAPE/CuteFTP8Professional/ ) , chạy file patch vừa coppy , đưa đường dẫn đến thư mục CuteFTP 8 Professional Sau đó cài đặt lại phần mềm cuteFTP pro 3.8

Tiếp theo là bạn tải bản vBulletin 4.0.5– null Tại đây , giải nén và upload lên host theo hướng dẫn

sau :

Chạy chương trình cuteFTP 8 Professional

Nếu bạn sử dụng lần đầu thì tại của sổ làm việc bạn nhấn tổ hợp Ctrl + N , cửa sổ mới xuất hiện , bạn điền thông tin như sau :

- Label : FREEVNN

- Host address : ftp.freevnn.com

- Username : tên đăng nhập của bạn

- Password : mật khẩu đăng nhập

Nhấn Ok Từ hình ảnh trên bạn chú ý :

Cửa sổ 1 : Dữ liệu trên máy của bạn

Cửa sổ 2 : Dữ liệu trên host của bạn

Cửa sổ 3 : Nơi thông báo quá trình upload file lên host

Cửa sổ 4 : Cấu trúc cây file mà bạn đang upload , từ đây bạn có thể biết file nào đã upload

100% hay chưa ?

Cách upload dữ liệu lên host :

Từ của sổ 1 bạn tìm đến file forum mà bạn vừa tải về ( vBulletin 4.0.3 patch level 1 – null tại đây hoặc vBulletinsuite 4.0.3 Null tại đây ) Cửa sổ thứ 2 bạn nhấp chuột vào file htdocs Sau đó tiến hành kéo thả file forum từ cửa sổ 1 sang cửa sổ 2 ( file forum phải nằm trong thư mục htdocs trên host ) Quá trình upload dữ liệu lên host lâu hay ngắn tùy vào đường truyền mạng của nhà bạn , nhưng ít nhất cũng 1 giờ mới upload xong

Tùy vào may mắn bạn có thể upload các file 100% , tuy nhiên có file chưa upload 100% thì bạn phải khắc phục nó theo cách sau :

Từ cửa sổ 4 , ở cấu trúc file bạn chú ý dấu + bên trái , bạn kick vào đấy để xổ ra các file con , trong này

có nhiều dấu + nữa , bạn kick vào hết Bạn tìm file nào chưa upload đủ 100% , nhớ đường dẫn cấu trúc file nhé Từ cửa sổ 1 bạn tìm file đó , từ cửa sổ 2 bạn kick vào tìm thư mục cần chứa file lỗi Tiến hành kéo thả file lỗi vào host ( nhớ là phải đúng đường dẫn nhé ) Lúc này lại xảy ra 1 trường hợp nữa

là file upload trên host có dung lượng nhỏ hơn dung lượng file gốc , bạn xóa file trên host đó đi Từ cửa sổ 1 bạn đổi tên là xóa cái đuôi như php , js , xml , … và sau đó kéo thả sang cửa sổ 2 , rồi đổi tên lại như cũ

Trong quá trình upload dữ liệu lên host bạn gặp xui xẻo như đứt mạng , máy treo , … Yên tâm , bạn chỉ cần thoát chương trình và vào chương trình lại như cũ , bạn không cần phải kéo thả gì hết , chỉ việc ngồi chờ Lần đăng nhập này bạn không cần phải tổ hợp phím Crtl + N , mà bạn chỉ cần điền thông tin đăng nhập ở trên cùng ( chọn Port là 21 ) và nhấn vào cái biểu tượng hình que chiên ấy ( bên phải cái ô Port )

I.4 : Cài đặt forum

Khi đã upload xong bạn phải tiến hành cài đặt forum theo hướng dẫn sau :

Ở cửa sổ 2 bạn tìm file config.php ( Nếu có file config.php.new thì bạn đổi tên nó thành tên

config.php ) , kick chuột phải vào file config.php ( nằm trong /forum/includes/ ) , chọn Edit Sau đó tiến hành tìm code :

Thay chữ dbmaster@example.com thành email của bạn , email này là nơi bạn nhận được thông tin về forum như pass , thành viên , ) Ví dụ :

Xong rồi , giờ bạn save lại Tiến hành cài đặt

Đường dẫn cài đặt của bạn như sau : www.tenwebcuaban.freevnn.com/forum/install/install.php Có 13 bước cài đặt

Từ Step 1 đến 8 bạn cứ chọn Next step , đến Step 9 :

2 ô đầu tiên bạn có thể điền tên tùy ý , như tiêu đề của bạn Mục webmaster email address bạn điền email của admin ( Là email của forum bạn tạo ví dụ : HTT.itvn@itvnn.net ) Các ô khác để nguyên Chọn Next step , cứ tiếp tục như thế sang Step 11 :

Đây là tên tài khoản đăng nhập admin của bạn , bạn điền thông tin đầy đủ Chú ý là tên tài khoản admin của bạn không nên giống tên tài khoản mà bạn phải nhớ trong mấy phần trước , nên là một tên khác và pass thì cố nghĩ ra số kí tự thật dài Next step và sang đến bước 13

nó yêu cầu bạn phải xóa file install.php để tránh cài đặt lại Bạn vào forum/admincp/install/ tìm file

install xóa nó đi Tốt nhất là bạn xóa cả thư mục install , và bạn cũng nên xóa file validator.php ( nằm ngang hàng với index.php ) để tránh người khác xem trên host bạn có những tên file gì Sau đó kick vào Here để vào tài khoản quản trị của bạn

Đường dẫn vào bảng điều khiển admin của bạn là :

www.tenwebcuaban.freevnn.com/forum/admincp/index.php

và đường dẫn vào web của bạn là : www.tenwebcuaban.freevnn.com/forum Bạn hãy kick vào kiểm tra nhé Lúc này web của bạn chưa có gì , chỉ có skin mặc định ban đầu Các bước tiếp theo sau đây là

để hoàn chỉnh forum của bạn

Hãy chắc chắn rằng , bạn đã thành thạo các bước trên rồi hãy thực hiện bước tiếp theo nhé

CHÚC BẠN THÀNH CÔNG !

PHẦN II : CÀI ĐẶT CÁC CHỨC NĂNG CƠ BẢN

Đầu tiên bạn phải nắm rõ về quyền Admincp của bạn Bạn kick vào

www.tenwebcuaban.freevnn.com/forum/admincp/index.php để vào cửa sổ quyền quản trị Tất cả quá trình này được gọi tắt là Vào AdminCP

II.1 : Cài đặt ngôn ngữ Việt

Việc đầu tiên là bạn cài đặt gói ngôn ngữ tiếng Việt cho diễn đàn để bạn dễ dàng thao tác Bạn tải gói ngôn ngữ Việt về tại đây Giải nén ra có 2 file XML là HTT-language.xml và HTT-language1.xml Bạn có thể chọn file nào cũng được và tiến hành import như sau :

Vào admincp >> Languages & Phrases >> Download/Upload languages :

Ở mục Import Language XML file , bạn chọn Browse … > > Tìm đến file XML trong gói ngôn ngữ Việt mà bạn cần Import >> Open

Trong mục Title for Uploaded Language bạn gõ tên gói ngôn ngữ Việt là : Tiếng Việt

Trong mục Ignore Language Version bạn kick chọn Yes

Các mục khác để nguyên và kick vào Import để tiến hành Import

Sau khi import xong bạn phải chạy nó Vào AdminCP >> Settings >> Options >> Cửa sổ vBulletin Options xuất hiện :

Ở bên phải bạn kéo xuống tí và tìm Style & Language Settings , kick đúp vào nó >> Cửa sổ mới xuất hiện , tại mục Default language bạn chọn Tiếng Việt >> nhấn Save Bạn vào diễn đàn của bạn , lúc này diễn đàn của bạn đã được Việt hóa

Tuy nhiên nó chưa Việt hóa hoàn toàn , có nơi vẫn còn tiếng Anh hoặc tiếng Việt bị lỗi , bạn vào

AdminCP >> Languages & Phrases >> Search in Phrases >> Kéo xuống dưới tại mục Find and

Replace in Languages :

Ô search language bạn chọn Tiếng Việt Ô Search for Text bạn gõ đoạn tiếng Anh hoặc đoạn tiếng Việt lỗi mà bạn cần Việt hóa Ô Replace with Text bạn gõ đoạn text mà bạn cần hiển thị đúng >> Kick vào Replace >> Của sổ kết quả tìm kiếm xuất hiện :

Lúc này có ít hoặc nhiều đoạn text , bạn cần tìm đoạn text cần Việt hóa ( so sánh cả đoạn tiếng Anh gốc hoặc tiếng Việt lỗi ) >> bên phải ngay nó , bạn đánh dấu vào cái ô vuông nhỏ ( bạn có thể đánh dấu nhiều mục ) >> Kéo xuống dưới cùng , kick vào Replace ( không chọn vào ô vuông bên cạnh nhé nếu bạn chỉ muốn Việt hóa đoạn text đã chỉ định ) Nhấn F5 ở diễn đàn để xem kết quả

II.2 : Cài đặt bộ gõ Tiếng Việt

Bạn tải file bộ gõ Tiếng Việt về tại đây và giải nén nó Đầu tiên bạn upload file him.js lên host theo

đúng đường dẫn /forum/clientscript/ Tiếp theo vào AdminCP >> Plugins & Products >> Manage Product >> Cửa sổ mới xuật hiện , ở cuối cùng kick chọn [Add/Import Product] >> Xuất hiện cửa sổ mới :

Mục Import Product , bạn nhấp vào Browse … >> Tìm file XML vừa tải về để import >> Open Ô

allow Overwrite bạn đánh dấu Yes ( đồng ý ) >> Nhấn Import để tiến hành Import

Sau khi import xong bạn phải chạy bộ gõ , vào AdminCP >> Settings >> Options :

Ở bên phải bạn kéo xuống dưới , kick đúp vào Vietnamse Typing :

Mục Vietnamese Typing bạn tic Yes ( đồng ý ) >> Save nó lại Vào diễn đàn nhấn F5 kiểm tra nhé

II.3 : Bật khung trả lời nhanh

Vào AdminCP >> Settings >> Options :

Tìm và kick đúp vào Message Posting and Editing Options >> Cửa sổ mới xuất hiện :

Tại mục Quick Reply bạn kick vào Ok , Click Not Required , mục còn lại bạn kick hết vào OK Trừ mục Automatically Quote Post / Thread Title bạn để No ( không đồng ý )

- Multi-Quote Quote Limit : 0

- Minimum Characters Per Post ( Số kí tự tối thiểu cho một bài viết ) : 30

- Maximun Characters Per Post ( Số kí tự tối đa trong một bài viết ) : 1000000 ( chọn 0 nếu không giới hạn )

- Maximun Characters Per Thread/Post Title ( Số kí tự tối đa trong 1 tiêu đề ) : 100

Sau đó Save và vào diễn đàn xem kết quả :

II.4 : Tạo thư mục con cho diễn đàn :

Vào AdminCP >> Forums & Moderators >> Forum Manage :

Lúc này forum của bạn chưa có gì , để thêm mục mới bạn kick vào Add New Forum :

Tại mục Add new Forum :

– Chủ đề ( Title ) : bạn gõ 1 chủ đề vào

Nếu bạn tạo màu cho chủ đề thì bạn chèn đoạn code sau :

<font color=Mã màu ( hoặc tên màu bằng tiếng anh ) > Chủ đề </font>

– Description : lời trích dẫn cho một chủ đề nào đó

Với thư mục cấp 1 thì không cần lời trích dẫn , nếu thư mục cấp 2 , cấp 3 , … thì bạn có thể chèn màu như trên , còn nếu chèn thêm hình ảnh thì chèn đoạn code sau :

<img src="images/đường dẫn ảnh" border="0"><font color=Mã màu> Trích dẫn </font>

Chú ý : Ảnh phải được upload lên host nằm trong thư mục /Images/

– Display Order : Thứ tự hiển thị của thư mục / chủ đề

– Parent Forum : Để nguyên nếu tạo thư mục lớn cấp 1 Nếu tạo thư mục con cấp 2 , cấp 3, thì kick chọn vào thư mục lớn để thư mục con hiển thị ở đó

Tại mục Posting Options :

- Nếu tạo thư mục con cấp 2, cấp 3, thì để nguyên

- Nếu tạo thư mục lớn cấp 1 thì tích :

Act as Forum : No

Forum is Open : NoCòn lại để nguyên Nhấn Save Cứ lặp lại các bước trên nếu bạn tạo nhiều thư mục lớn / con Nhấn F5 để xem kết quả

II.5 : Đưa thư mục con hiển thị ra ngoài

Vào AdminCP >> Settings >> Options :

Tìm và kick đúp vào Forum Listings Display Options :

Tại mục Depth of Sub-Forums : Bạn chọn 2 hoặc 3 ( tương ứng với 2 hoặc 3 cột ) Nhấn Save và vào diễn đàn xem kết quả

Đến đây đã xong một Diễn đàn cơ bản , bây giờ chúng ta sang bước tiếp theo là tạo một Style ( skin ) cho diễn đàn Trước khi sang phần III bạn phải thông thạo phần II nhé

CHÚC BẠN THÀNH CÔNG !

Ebook by : HTT itvn Email : Zz.mr.nguyen.zZ@gmail.com

PHẦN III : CÀI ĐẶT STYLE ( SKIN ) CHO DIỄN ĐÀN

Nếu từ một trang giấy trắng mà bạn tạo nên một skin mới thì sẽ rất tốn nhiều thời gian , mà hiện nay trên mạng đã có nhiều skin chia sẽ cho cộng đồng IT nên bài viết này mình chỉ hướng dẫn các bạn cách cài đặt , thay đổi và Rip skin có sẵn

Đầu tiên bạn tải skin về tại đây

Demo :

www.itvnn.net

III.1: Cài đặt skin

Đầu tiên bạn upload thư mục images lên host ( các thư mục này đều nằm trong htdocs/forum trên host , ngang hàng với admincp , index.php , )

Sau đó vào AdminCP >> Styles & Templates >> Downlaod/Upload Styles :

Tại mục Import Style XML file bạn kick vào Chọn tệp tin ( Browse ) và tìm đến file style.xml mà bạn vừa tải về , mục ignore Styles Version tích vào Yes , mục Title for Uploaded Styles bạn viết tên skin mà bạn muốn đặt ( có thể bỏ trống ) Sau đó chọn Import

vbulletin-Quá trình Import diễn ra , nếu bạn import thành công thì lúc này bạn có 2 skin gồm skin mặc định

và skin vừa cài đặt

Vào AdminCP >> Styles & Templates >> Style Manager :

Để skin sắp xếp theo thứ tự cho dễ quản lí , tại ô trắng cột đầu tiên bạn điền thứ tự bạn chọn , sau đó bạn nhấn vào Save Display Order

Vào forum của bạn nhấn F5 và kéo cuối trang bạn lựa chọn skin hiển thị :

Để skin của bạn vừa cài đặt luôn luôn hiển thị mặc định , bạn vào AdmnCP >> Settings >>

Options :

Kick chọn Style & Language Settings , cửa sổ mới hiện ra :

Tại mục Default Style bạn lựa chọn skin vừa cài đặt , tại mục Allow Users To Change Styles bạn tích chọn Yes nếu cho phép thành viên lựa chọn skin , chọn No nếu không cho lựa chọn Mục khác

để nguyên và nhấn Save để lưu lại

III.2: Chỉnh sữa skin

Đến đây là bạn đã có 1 skin , tuy nhiên bạn muốn skin theo ý mình và muốn chọn phông màu khác cho nó đẹp hơn , mang theo phong cách của bạn

III.2.1: Thay đổi chiều rộng , màu phông của forum

Vào AdminCP >> Styles & Templates >> Style manager >> Chọn skin cần chỉnh >> StyleVars :

Tại Search StyleVars bạn gõ doc >> doc_width :

Mục Units bạn chọn Px , mục Size bạn gõ chiều rộng của forum mà bạn muốn hiển thị >> Nhấn

Save để lưu lại

Kick vào doc_background :

Tại mục

– Background Color : bạn chọn một mã màu thập lục ( nhấp vào ô đen ) làm phông nền – Background Image : Bạn gõ link /images/ẢnhCầnChèn.ĐịnhDạngẢnh của hình ảnh để làm phông nền nếu muốn , hình ảnh phải nằm trong thư mục images trên host

– Background Repeat : lựa chọn hình ảnh lặp lại theo chiều ngang hay dọc ( nên bỏ trống )– Units : Lựa chọn đơn vị kích thước ảnh hiển thị ( để % nếu lựa chọn )

– Background Image Horizontal Offset : Chọn kích thước hiển thị bề rộng của hình ảnh ( để trống nếu không lựa chọn )

– Background Vertical Offset : để trống

Nhấn Save để lưu lại

Tiếp tục Kick vào doc_margin :

– Use the 'top' value for all sides : tích yes nếu muốn foum hiển thị giữa

– Top : gõ auto

– Các mục khác có thể bỏ trống

Nhấn Save để lưu lại

III.2.2: Thay đổi ảnh Banner

Đầu tiên bạn phải có ảnh có kích thước 267x88 px để làm banner và upload vào thư mục Images trên host Sau đó vào AdminCP >> Styles & Templates >> Style manager >> Chọn skin cần chỉnh

>> StyleVars :

Tại Search StyleVars bạn gõ title >> Kéo xuống dưới và kick vào titleimage :

Tại mục URL bạn gõ đường dẫn ảnh trên host mà bạn cần chèn vào và nhấn Save để lưu lại Ví dụ mình có ảnh banner.png nằm trong thư mục images/logo/itvnn/ thì mình chèn link như sau :

images/logo/itvnn/banner.png

III.2.3: Thay đổi ảnh ở cuối trang ( footer).

Bạn phải có ảnh kích thước 194x122 px thay thế và được upload trên thư mục /images/ trên host

Vào AdminCP >> Styles & Templates >> Style Manager >> Chọn skin cần chỉnh , Edit Templates

>> Footer :

Kéo xuống dưới tìm đoạn code sau :

<img src="images/styles/AnimatedArena/style/footerLogo.png"

Thay thế đoạn màu xanh bằng đường dẫn ảnh của bạn cần thay đổi và nhấn Save and Reload để lưu lại Ví dụ mình có ảnh là footer.jpg nằm trong thư mục /images/ITVNNforum/ thì đoạn code được sửa như sau :

<img src="images/ITVNNforum/footer.jpg"

Tuy nhiên mình khuyên bạn không nên thay đổi cái này vì công sức của người khác thiết kế share cho bạn thì bạn cũng phải để lại dấu bản quyền của họ Trừ khi bạn tự thiết kế skin

III.2.4: Viết tên forum kèm đường link ở cuối trang

Vào AdminCP >> Styles & Templates >> Style Manager >> Chọn skin cần chỉnh , Edit Templates

>> Footer :

Kéo xuống dưới và tìm đoạn code sau :

<div>vBulletin 4.0 skin by <a href="http://www.completevb.com"

target="_blank">CompleteVB</a></div>

Thêm xuống dưới hoặc thay thế đoạn code sau :

<div><font color=Màu><b>Đoạn text mà bạn cần chèn </b></font><a href="http://www.linkMàCầnChèn " target="_blank"><font color=Màu><b>Đoạn

text</b></font></a></div>

Nhấn Save and Reload

Ví dụ mình cần chèn đoạn text như hình ảnh sau :

Đoạn code cần viết :

<div><font color=red><b>THPT Nguyễn Trãi</b></font><a href="http://www.nguyentrai.info " target="_blank"><font color=yellow><b>364 Nguyễn Tất Thành, Phường 18, Quận 4, Tp.Hồ Chí Minh</b></font></a></div>

Đến đây bạn đã xong cơ bản về skin Với các skin khác bạn cũng làm tương tự Các bạn tự tìm hiểu thêm nhé , nhất là temp StyleVars ( Phần này mình sẽ viết ở chương sau ) Bây giờ chúng ta sang phần IV là phần tạo Profile ( Thông tin cá nhân ) và đóng khung thông tin , phần này sẽ hoàn chỉnh một forum

CHÚC BẠN THÀNH CÔNG !

PHẦN IV : TẠO PROFILE ( THÔNG TIN CÁ NHÂN ) VÀ ĐÓNG

KHUNG THÔNG TIN

Trong một forum thì không thể thiếu thông tin cá nhân của thành viên như tên , tuổi , địa chỉ , avatar , Nhất là với những bạn đang học ở trường , hay những bạn đã đi học đại học xa , hay

đã đi làm , đều muốn lưu lại tên tuổi của mình để cho bạn bè xa gần đều biết mình là ai ? Làm

gì ? Ở đâu ? Bài viết dưới đây hướng dẫn bạn tạo thông tin cá nhân và đóng khung nó cho đẹp hơn Phần tạo dáng khung thông tin cá nhân của thành viên có một vai trò quyết định " sắc đẹp " của toàn forum

1 Hiệu chỉnh khung thông tin nằm ngang hay dọc

Vào AdminCP >> Setting >> Options >> Style & Language Setting :

Tại mục Use Legacy (Vertical) Postbit Template :

Chọn : Đồng ý/ Yes thì tương ứng với Dọc , temp là : postbit_legacy

Không / No thì tương ứng với Ngang , temp là : postbit

Sau đó nhấn Save

Bài viết dưới đây mình chủ yếu tập trung vào thông tin nằm dọc , còn nằm ngang thì tương tự ( chỉ thay thao tác ở temp postbit_legacy thành thao tác trong temp postbit , còn lại ngang hay dọc thì đều giống nhau )

2 Tạo khung

Trước khi hack mod thì bạn phải tạo khung trước để dễ dàng làm việc hơn sau này ( nếu bạn dùng

skin mà bạn tải về trong phần III thì bạn có thể bỏ qua bước này ) , Vào AdminCP >> Styles

& Templates >> Style Manager :

Chọn skin cần chỉnh >> Edit templates :

-webkit-border-top-{vb:stylevar right}-radius: {vb:stylevar threadlisthead_top_corner_radius}; -webkit-border-bottom-{vb:stylevar left}-radius: {vb:stylevar

.htt_postbit {

text-align:center;

}

Save and Reload

Xong phần tạo khung , bây giờ sang các bước hack mod và đóng khung thông tin

3 Tạo màu nick

Vào Admin CP >> Usergroups >> Usergroup Manage :

Chọn Administrators >> Nhấn Tiếp tục ( Next ) :

Tại mục Usernam HTML Markup >> Ở ô thứ nhất phía bên phải bạn dán code sau vào :

<b><font color=red>

Ô thứ 2 là gán thẻ kết thúc :

</font></b>

Những gì không nhắc đến thì để nguyên >> Nhấp Update

Tương tự với Smod , Mod và Member Bạn có thể thay red thành các màu khác tương ứng như : green , gray , blue ,

Tuy nhiên nếu bạn muốn canh nick vào giữa thì làm như sau :

Vào AdminCP >> Styles & Templates >> Style Manager >> Chọn skin cần chỉnh >> Edit templates :

Postbit Templates >> postbit_legacy :

4 Gán biểu tượng cho Admin , Smod , Mod và member

Trước hết bạn tải các hình ảnh gif về tại đây và tiến hành upload lên host theo đường

dẫn : /forum/images/ranks/

Vào AdminCP >> User ranks >> Add New User Rank :

- Mục usergroup chọn Administrators

– Mục Minimum chọn 0

– Display Type : always

– Mục User rank File Path : chọn đường dẫn file ảnh admin.gif mà bạn vừa upload lên host

Tiếp tục kick tiếp vào update user titles and ranks Nhấn F5 để xem thành quả nhé

5 Mod avatar mặc định và đóng khung

Bạn tải avatar về tại đây và upload file ava_01 đến ava_09 lên host theo đường dẫn :

/forum/images/avatars/

Vào AdminCP >> Plugins & Products >> Manage Products >> [Add/import Product] :

Nhấp vào Browse >> Chọn file HTT-avatar.xml vừa nãy download về >> Open

Mục Allow Overwrite , tick chọn Đồng ý / Yes

Nhấp vào import để tiến hành import file xml Đã cài xong avatar mặc định , bây giờ đóng khung

Thay thế bằng đoạn code sau :

Save and Reload Nhấn F5 và cập nhập avatar của bạn để xem kết quả nhé !

6 Thành viên thứ bao nhiêu ?

Vào AdminCP >> Styles & Templates >> Style Manager >> Chọn skin cần chỉnh >> Edit templates :

Postbit Templates >> postbit_legacy :

Tìm code sau : ( nằm sau code avatar mà bạn vừa làm ở trên )

<div align="center" class="eti_postbit">

<vb:if condition="$post['userid']"><dt>Thành viên thứ</dt> <dd>{vb:raw

post.userid}</dd></vb:if></div>

Nếu để chữ Thành viên thứ đổi màu ( ở đây lấy ví dụ màu đỏ ) thì bạn chèn đoạn code sau :

<div align="center" class="eti_postbit">

<vb:if condition="$post['userid']"><font color=red><b>Thành viên thứ</b></font><dd>{vb:raw post.userid}</dd></vb:if></div>

Save and Reload Nhấn F5 để xem kết quả

7 Đóng khung thông tin có sẵn

Trong VBB 4.0.5 thì đã có sẵn một số thông tin như số bài gửi , tuổi , Bạn chỉ cần tìm đoạn code

có sẵn và gán cho nó thêm thẻ <div class="eti_postbit"> </div> ( với skin giống như

www.ITVNN.net tải từ phần III thì bạn chỉ cần thay "eti_postbit" thành "post_field" )

Vào AdminCP >> Styles & Templates >> Style Manager >> Chọn skin cần chỉnh >> Edit

templates :

Postbit Templates >> postbit_legacy :

Ví dụ ở đây là thông tin số bài gửi , tìm code ( tất cả code này đều nằm sau code mục avtar mà bạn vừa làm ở trên ) : ( Nếu bạn dùng skin ở phần III thì bạn thay "eti_postbit" thành "post_field" , không cần thẻ <font color=red> </font> và thẻ <b> </b> , nếu bạn muốn khác so với

www.itvnn.net thì bạn chỉ cần bỏ thẻ <dt> </dt> Còn Skin khác thì để nguyên )

<dt>{vb:rawphrase 'posts'}</dt> <dd>{vb:raw post.posts}</dd>