Trang Chính
Posts
Points
Thanked
Tham Gia
Tuổi 
Đến từ
Tình trạng
Nói là cho newbie nhưng cũng ko hẳn là như vậy, các bạn cũng nên biết 1 chút về cấu trúc của template và 1 chút về html (mấy cái này chỉ cần hack những mod có sửa template và lần là rành)
Ex viết ra tut này là dựa vào những hiểu biết và kinh nghiệm khi Ex rip skin, cho nên ai bất đồng ý kiến thì cứ lên tiếng, mỗi người có mỗi kinh nghiệm và cách nhìn khác nhau, hoan nghênh mọi người chia sẻ.
Một điều nữa là Ex khuyên các bạn nên bắt đầu thực hành trên skin việt nam, vì những skin việt nam đa số dựa vào css là nhiều => dễ xử
Bắt tay vào việc:
Đối với những tut khác thì họ thường chỉ bạn tách hết hình một lượt rồi mới tới code, nhưng theo Ex thì làm như vậy khó phân loại hình và rất tốn thời gian, cho nên Ex sử dụng cách làm song song, mò code tới đâu thì tách hình tới đó.
Công cụ cần thiết:
- 1 software nào đó cho upload ftp, Ex sử dụng cuteftp (down trong vietvbb)
- Firefox + Internet Explorer (FF thì dễ phân chia hình ảnh hơn, còn IE thì dùng để kiểm tra coi còn thiếu hình nào và kiểm tra xem skin có hiển thị chính xác trên cả 2 trình duyệt ko
- Một chút kiến thức về cấu trúc template, và html như đã nói trên
- Thứ cuối cùng, và cũng là thứ quan trọng nhất, 1 cái skin mà bạn thix
Trước khi **ng đến skin cần rip, bạn vào admincp > Styles & Templates > Style Manager > nhấn vào Add New Style. Đặt tên cho skin, chọn no parent, sau đó nhấn save.
1/ CSS
Đầu tiên, chúng ta sẽ xử lí CSS và những hình ảnh trong đó trước.
Vào trang index của skin cần rip, view page source của skin đó, nếu kéo xuống một chút thì bạn sẽ thấy phần màu xanh lá cây. Ở dưới phần đó là một mớ code toàn màu đen. Bạn copy từ phần body { cho tới hết phần màu đen đó (trước tag màu tím)
Sau khi copy, bạn vào All style options của cái style mới add hòi nãy. Kéo xuống dưới bạn sẽ thấy phần Additional CSS Definitions. Có 2 box, trong đó box đầu tiên có sẵn code trong đó, xóa hết đi và paste cái code vừa copy hồi nãy vào > save lại
Như vậy là cái skin đã có chút xíu màu mè, nhưng chưa có hình gì hết. Muốn lấy hình, bạn coi cái CSS, đi từ trên xuống dưới…có hình nào thì copy cái link, bỏ lên trình duyệt đằng sau cái domain của forum bạn đang rip. Chú ý khi save hình về thì bạn nên tạo box và đặt đúng hình vào box đó lun ngay sau khi save, tránh tình trạng lát nữa phải đi phân loại. Tách hết hình trong đó rồi thì up lên host (đúng đường dẫn nhá). Sau đó Refresh forum bạn lại và ngồi đó tự hào 1 chút về những gì vừa làm được
Chú ý: có một số forum save css của họ vào 1 file và chèn nó vào phần css. Nếu như vậy thì copy css trong file đó về rồi làm y chang.
2/ Cấu trúc
Okii xong phần css thì forum cũng tạm gọi là “có màu” chút rồi, bây giờ tới phần cấu trúc của forum, html.
Như các bạn thấy thì 1 skin của vbb có rất nhiều template, nhưng những template làm nên 1 cấu trúc style của skin thì chỉ có vài cái, ở đây Ex ghi những template đó ra từ trên xuống dưới:
- Header (chứa banner)
- Navbar (một số skin không cần cái này)
- FORUMHOME
- Forumhome_forumbit_level1_nopost (style của phần category ở index)
- Footer
Đối với một số skin “quá phức tạp” thì có thể sẽ phải dụng đến những template khác, nhưng trường hợp này rất ít.
Nói chung về phần này rất khó chỉ, vì mỗi skin mỗi khác, chủ yếu là cần phải quan sát. Tuy nhiên để nhận ra phần nào nằm ở đâu, thì có 1 bí quyết.
Nếu các bạn đã từng hack một số mod có sửa template thì chắc các bạn cũng thấy là trong template vbb nó có những cột mốc riêng cho từng phần, những cột móc này chính là những tag và
Ví dụ: và
Như ví dụ ở trên, thì những gì nằm chính giữa 2 tag đó là thuộc về phần logo, chắc hẳn nó phải nằm trong header. Bạn chỉ việc copy cái phần đó bỏ vào header và thay thế đi phần logo của skin mặc định. Đừng quên tách hình ra trong đoạn code đó sử dụng phương pháp y như lúc nãy tách hình từ CSS. Và NHỚ là phân chia folder cho hình ngay từ lúc đó.
Khi bạn thấy 1 tag nào đó mà ko biết nó nằm ở đâu thì chỉ việc bỏ vào search in template để tìm kiếm. Cứ thế mà từ từ đi xuống hết phần pagesource. Đi tới đâu thì tách hình tới đó.
Những điều nên nhớ:
- Khi bạn viewsource ở trang index thì những category sẽ lập đi lại, và bạn chỉ cần copy cái phần style đó 1 lần thôi
- Trong những template có chữ của vbb như navbar, forumhome_forumbit_level1_nopost…nó ko có những chữ y như ngoài index hiện lên, mà nó sử dụng vbphrase ($vbphrase[ ]) để khi chuyển ngôn ngữ thì những chữ đó cũng chuyển lun. Cho nên khi copy, bạn ko hẳn là copy 100% tất cả mọi thứ, mà phải thay thế những vbphase đó vô.
- Lý do mà Ex nói bạn cần có một chút hiểu biết về html như lúc đầu là vì khi copy, bạn phải để ý những tag mà bạn copy, có mở thì phải có đóng…ko thui nó lệch
Chắc hẳn trong quá trình copy qua, bạn sẽ thấy những khúc méo mó lệch lạc mà ko thể nào chỉnh được. Có một cách giải quyết tình trạng này đó là bạn vào forum index của bạn, chọn view pagesource và đối chiếu 2 bên code, nếu thiếu thì thêm vào, nếu dư thì trích 1 đoạn ra search xem nó nằm ở chỗ nào. Ex nhắc bạn 1 lần nữa là copy code tới đâu thì tách hình tới đó, đồng thời phân loại folder của hình lun
3/ Hoàn tất các hình còn lại
Sau khi hoàn tất copy code như ở trên thì coi như gần xong rồi, chỉ còn thiếu mấy cái file ảnh nữa là hoàn tất, button thì vào forum của đối tượng save về, nói chung phần này khá dễ, mò vòng vòng cũng đủ hình. Sau đó vào folder image gốc của vbb coi những folder nào thiếu thì copy qua cho nó đủ bộ, như folder smilies, signature, reputation chẳng hạn
Chú ý: Bạn phải vào phần image path của all style option để thay đổi đường dẫn tới những folder hình trên host. Và xóa tất cả trong title image đi (cái đó là logo mặc định của vbb)
4/ Kiểm tra lại
Mọi việc vẫn chưa xong đâu. Bây giờ nín thở lại và mở forum bạn bằng Internet Explorer xem nó có bị lệch lạc gì không. Nếu lệch thì mở view source và tiếp tục so sánh
Còn nữa, cái lợi của coi forum lại bằng IE là những hình thiếu nó sẽ hiện ra hình dấu chéo, trong khi trong FF thì nó ko hiện gì hết, coi những chỗ có dầu chéo đó và tìm hình tương ứng copy vào.
Goddluck.
nguồn chinhphuc.info
Ex viết ra tut này là dựa vào những hiểu biết và kinh nghiệm khi Ex rip skin, cho nên ai bất đồng ý kiến thì cứ lên tiếng, mỗi người có mỗi kinh nghiệm và cách nhìn khác nhau, hoan nghênh mọi người chia sẻ.
Một điều nữa là Ex khuyên các bạn nên bắt đầu thực hành trên skin việt nam, vì những skin việt nam đa số dựa vào css là nhiều => dễ xử
Bắt tay vào việc:
Đối với những tut khác thì họ thường chỉ bạn tách hết hình một lượt rồi mới tới code, nhưng theo Ex thì làm như vậy khó phân loại hình và rất tốn thời gian, cho nên Ex sử dụng cách làm song song, mò code tới đâu thì tách hình tới đó.
Công cụ cần thiết:
- 1 software nào đó cho upload ftp, Ex sử dụng cuteftp (down trong vietvbb)
- Firefox + Internet Explorer (FF thì dễ phân chia hình ảnh hơn, còn IE thì dùng để kiểm tra coi còn thiếu hình nào và kiểm tra xem skin có hiển thị chính xác trên cả 2 trình duyệt ko
- Một chút kiến thức về cấu trúc template, và html như đã nói trên
- Thứ cuối cùng, và cũng là thứ quan trọng nhất, 1 cái skin mà bạn thix
Trước khi **ng đến skin cần rip, bạn vào admincp > Styles & Templates > Style Manager > nhấn vào Add New Style. Đặt tên cho skin, chọn no parent, sau đó nhấn save.
1/ CSS
Đầu tiên, chúng ta sẽ xử lí CSS và những hình ảnh trong đó trước.
Vào trang index của skin cần rip, view page source của skin đó, nếu kéo xuống một chút thì bạn sẽ thấy phần màu xanh lá cây. Ở dưới phần đó là một mớ code toàn màu đen. Bạn copy từ phần body { cho tới hết phần màu đen đó (trước tag màu tím)
Sau khi copy, bạn vào All style options của cái style mới add hòi nãy. Kéo xuống dưới bạn sẽ thấy phần Additional CSS Definitions. Có 2 box, trong đó box đầu tiên có sẵn code trong đó, xóa hết đi và paste cái code vừa copy hồi nãy vào > save lại
Như vậy là cái skin đã có chút xíu màu mè, nhưng chưa có hình gì hết. Muốn lấy hình, bạn coi cái CSS, đi từ trên xuống dưới…có hình nào thì copy cái link, bỏ lên trình duyệt đằng sau cái domain của forum bạn đang rip. Chú ý khi save hình về thì bạn nên tạo box và đặt đúng hình vào box đó lun ngay sau khi save, tránh tình trạng lát nữa phải đi phân loại. Tách hết hình trong đó rồi thì up lên host (đúng đường dẫn nhá). Sau đó Refresh forum bạn lại và ngồi đó tự hào 1 chút về những gì vừa làm được
Chú ý: có một số forum save css của họ vào 1 file và chèn nó vào phần css. Nếu như vậy thì copy css trong file đó về rồi làm y chang.
2/ Cấu trúc
Okii xong phần css thì forum cũng tạm gọi là “có màu” chút rồi, bây giờ tới phần cấu trúc của forum, html.
Như các bạn thấy thì 1 skin của vbb có rất nhiều template, nhưng những template làm nên 1 cấu trúc style của skin thì chỉ có vài cái, ở đây Ex ghi những template đó ra từ trên xuống dưới:
- Header (chứa banner)
- Navbar (một số skin không cần cái này)
- FORUMHOME
- Forumhome_forumbit_level1_nopost (style của phần category ở index)
- Footer
Đối với một số skin “quá phức tạp” thì có thể sẽ phải dụng đến những template khác, nhưng trường hợp này rất ít.
Nói chung về phần này rất khó chỉ, vì mỗi skin mỗi khác, chủ yếu là cần phải quan sát. Tuy nhiên để nhận ra phần nào nằm ở đâu, thì có 1 bí quyết.
Nếu các bạn đã từng hack một số mod có sửa template thì chắc các bạn cũng thấy là trong template vbb nó có những cột mốc riêng cho từng phần, những cột móc này chính là những tag và
Ví dụ: và
Như ví dụ ở trên, thì những gì nằm chính giữa 2 tag đó là thuộc về phần logo, chắc hẳn nó phải nằm trong header. Bạn chỉ việc copy cái phần đó bỏ vào header và thay thế đi phần logo của skin mặc định. Đừng quên tách hình ra trong đoạn code đó sử dụng phương pháp y như lúc nãy tách hình từ CSS. Và NHỚ là phân chia folder cho hình ngay từ lúc đó.
Khi bạn thấy 1 tag nào đó mà ko biết nó nằm ở đâu thì chỉ việc bỏ vào search in template để tìm kiếm. Cứ thế mà từ từ đi xuống hết phần pagesource. Đi tới đâu thì tách hình tới đó.
Những điều nên nhớ:
- Khi bạn viewsource ở trang index thì những category sẽ lập đi lại, và bạn chỉ cần copy cái phần style đó 1 lần thôi
- Trong những template có chữ của vbb như navbar, forumhome_forumbit_level1_nopost…nó ko có những chữ y như ngoài index hiện lên, mà nó sử dụng vbphrase ($vbphrase[ ]) để khi chuyển ngôn ngữ thì những chữ đó cũng chuyển lun. Cho nên khi copy, bạn ko hẳn là copy 100% tất cả mọi thứ, mà phải thay thế những vbphase đó vô.
- Lý do mà Ex nói bạn cần có một chút hiểu biết về html như lúc đầu là vì khi copy, bạn phải để ý những tag mà bạn copy, có mở thì phải có đóng…ko thui nó lệch
Chắc hẳn trong quá trình copy qua, bạn sẽ thấy những khúc méo mó lệch lạc mà ko thể nào chỉnh được. Có một cách giải quyết tình trạng này đó là bạn vào forum index của bạn, chọn view pagesource và đối chiếu 2 bên code, nếu thiếu thì thêm vào, nếu dư thì trích 1 đoạn ra search xem nó nằm ở chỗ nào. Ex nhắc bạn 1 lần nữa là copy code tới đâu thì tách hình tới đó, đồng thời phân loại folder của hình lun
3/ Hoàn tất các hình còn lại
Sau khi hoàn tất copy code như ở trên thì coi như gần xong rồi, chỉ còn thiếu mấy cái file ảnh nữa là hoàn tất, button thì vào forum của đối tượng save về, nói chung phần này khá dễ, mò vòng vòng cũng đủ hình. Sau đó vào folder image gốc của vbb coi những folder nào thiếu thì copy qua cho nó đủ bộ, như folder smilies, signature, reputation chẳng hạn
Chú ý: Bạn phải vào phần image path của all style option để thay đổi đường dẫn tới những folder hình trên host. Và xóa tất cả trong title image đi (cái đó là logo mặc định của vbb)
4/ Kiểm tra lại
Mọi việc vẫn chưa xong đâu. Bây giờ nín thở lại và mở forum bạn bằng Internet Explorer xem nó có bị lệch lạc gì không. Nếu lệch thì mở view source và tiếp tục so sánh
Còn nữa, cái lợi của coi forum lại bằng IE là những hình thiếu nó sẽ hiện ra hình dấu chéo, trong khi trong FF thì nó ko hiện gì hết, coi những chỗ có dầu chéo đó và tìm hình tương ứng copy vào.
Goddluck.
nguồn chinhphuc.info