Giáo trình Thiết kế web - Phần III: Cài đặt style (skin) cho diễn đàn

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 vbulletin- 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 . 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 : vBulletin 4.0 skin by <a href="" target="_blank">CompleteVB Thêm xuống dưới hoặc thay thế đoạn code sau : Đoạn text mà bạn cần chèn <a href=" MàCầnChèn " target="_blank">Đoạn text 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 : THPT Nguyễn Trãi<a href=" " target="_blank">364 Nguyễn Tất Thành, Phường 18, Quận 4, Tp.Hồ Chí Minh Đế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 ! Ebook by : HTT itvn Email : zz.mr.nguyen.zz@gmail.com