Hướng dẫn thiết kế VBB Style - Lession 4: Coding in VB Template

Hướng dẫn thiết kế VBB Style Author:Kusanagi – StylesVN Lesson 4 : Coding In VB Template Hãy chắc rằng bạn đã thông suốt 3 lesson đầu để bước vào phần cam go nhất để định hình 1 template hoàn chỉnh Công việc đầu tiên hãy xem lại 3 bài cũ ,khi bạn đã chuẩn bị xong 1 file xml đã tinh chỉnh ,1 file css với thiết lập màu sắc đã được định hình và dĩ nhiên ko thể thiếu các img cần thiết cho bộ skin .Lesson4 ta sẽ đi trực tiếp việc making skin AquaMedia thay vì chỉ là lý thuyết như những skin đầu .Tuy nhiên có 1 số chuyện cần lưu ý Trong việc coding sẽ thường sử dụng các table và div ,theo kus đối với những bạn mới vào tập làm skin nên bắt đầu từ table trước vì dùng div sẽ kết hợp thêm với css khi kiến thức về css chưa đủ và còn hạn chế sẽ rất dễ dàng bị lỗi hoặc vỡ toàn bộ skin.Vài lưu ý nhỏ thế là đủ .Các bạn down img trong file về và chỉnh lại đường dẫn css ,chúng ta sẽ hoàn thiện nó trong chốc lát nữa thôi *Navbar in AquaMedia: Vào template header tìm đoạn Trích: Chèn xuống dưới Trích: [navbar] Vào navbar template .Kiếm: Trích: Move toàn bộ đoạn code từ chỗ đến và thay vào [navbar] trong header Lúc này sẽ có 1 chuyện phát sinh class vbmenu_control mang bg xanh => copy vào sẽ đè lên phần navbar cho trước ,kus đã del cái bg đó tạo có ở 1 class riêng là vbmenu2_control ,bạn hãy đổi các class trong phần vừa copy ấy từ vbmenu_control => vbmenu2_control Vậy là xong phần này *Chèn phần banner: Trong template header ,phía dưới đoạn navbar vừa chèn bạn thêm vào Trích: Author: Kusanagi - StylesVN Đây là cách thức tạo và chèn banner tự co giãn cơ bản nhất ,banner 3 mảnh ,có thể giãn ra khi site view ở độ phân giải cao hơn .Có thể xem mẫu và thuộc nằm lòng cái cấu trúc này ,banner sở dĩ co giãn được nhờ phần bg ở giữa lặp lại bao nhiêu lần tùy ý *Bộ khung bao toàn site: Tại header phía dưới phần banner vừa chèn .Thêm vào Trích: Vào footer add xuống cuối cùng : Trích: Ở phần này kus sẽ dùng luôn div để các bạn so sánh .Div sẽ lẹ hơn nhưng việc đặt các thiết lập trong css cũng sẽ khó hơn .Bạn vào file css để xem thử cách đặt các class này trong css thế nào....Giờ thì phân tích 1 chút công dụng +=> Bóp nội dung site nhỏ lại +=> Phần viền cong của khung bao + => Tạo 2 đường biên dọc (xem class tborder2 trong css) +3 div phía dưới footer như header Rồi ta có thể thông qua *Tạo khung cho các box: Vào forumhome ,tìm Trích: <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center"> Chèn lên trên đoạn này(Đoạn số 1): Quote: Author: Kusanagi - StylesVN Xuống dưới 1 chút có đoạn: Trích: Add xuống dưới (Đoạn số 2): Trích: Đây cũng là cách làm như banner ,sơ đẳng nhất và hiệu quả cũng chẳng tồi tí nào ^^ À nói luôn skin này kus sẽ ko tách box rời ra nên các bạn khi đọc bài viết số 1 có phần tách rời box có thể cho qua giai đoạn này Chèn trong phần các box ta sẽ chèn Đoạn số 1 và Đoạn số 2 ở 1 số chỗ thông thường khác : thống kê ,forumdisplay , postbit ...... -Phần thống kê trong forumhome thì chèn Đoạn số 1 trước và Đoạn số 2 trên <!-- end what's going on box --> -Ở forumdisplay thì chèn Đoạn số 1 phía dưới và Đoạn số 2 phía trên <!-- controls below thread list --> Okie thế là tạm ổn *Bỏ info vào khung trong postbit Cái này cực kì đơn giản bạn kiếm thẻ div phần info muốn bỏ vô khung và thêm vào class="info2" là xong VD: Phần số bài post của thành viên trong postbit_legency $vbphrase[posts]: $post[posts] Sửa thành $vbphrase[posts]: $post[posts] Class info2 bạn vào css để xem chi tiết hơn Cứ như vậy lần lượt thêm hết khung info thì thôi *Cơm thêm: -Các table có class="tborder"=> đoạn này là khung bao của table đó ,bạn xóa nó đi table sẽ mất khung bao và bg bên dưới trong suốt ,áp dụng trong khá nhiều trường hợp -Phần code trong "postbit_legency" từ đoạn đến cái gần nhất là phần cột info trái => Áp dụng cách chèn div ở trên để tạo khung bao -Việc sử dụng thêm trình duyệt Fire Fox sẽ giúp cho bạn tiết kiệm đáng kể thời gian vì có thể view source chỉ riêng vùng được chọn ,source có màu sắc rất rõ ràng dễ thực hiện hơn so với IE -Dùng kèm 1 cái notepad và colorspy sẽ là 2 công cụ đắc lực trong việc thiết kế ,coding -Cuối cùng đừng quên save xml khi làm việc ,chỉ cần 1 sơ xuất nhỏ cả cái styles có thể đi tong ,nhớ chú ý kĩ mấy cái table + div ,mở ra thì phải đóng lại 1 cái thẻ dư đủ làm site biếng dạng Giờ thưởng thức thành quả đi nào :D Author: Kusanagi - StylesVN Author: Kusanagi - StylesVN