Mở đầu:
RIP skin là gì: Từ “Rip” có nghĩa là copy, rip skin tức là copy lại
style của 1 forum nào đó mà bạn cảm thấy đẹp mà lại không tìm thấy ai
chia sẻ. Nói trước là rip skin ko phải là 1 việc đẹp đẽ gì, nhưng đối với
cộng đồng vbb thì ít ai quan tâm đến việc này. Nói chung là tập cho
biết.
Tuy xixxon ko phải pro, cũng mới biết rip skin ko lâu, nhưng xx cũng
tạm nắm bắt được những cái cơ bản. Xx đã từng đọc một số tut dạy rip
skin, và cũng đã từng bỏ cuộc nhiều lần vì đọc mãi ko hiểu. Nên bây giờ
xx viết lại 1 tut khác, đơn giản hơn, và chi tiết hơn cho newbie.
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)
Xx viết ra tut này là dựa vào những hiểu biết và kinh nghiệm khi xx 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à xx 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 xx thì làm như vậy khó phân loại hình và rất
tốn thời gian, cho nên xx 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, xx 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 xx
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
- (Trong một vài trường hợp thì có thêm headinclude)
Đố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 bí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à xx 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. Xx 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.
RIP skin là gì: Từ “Rip” có nghĩa là copy, rip skin tức là copy lại
style của 1 forum nào đó mà bạn cảm thấy đẹp mà lại không tìm thấy ai
chia sẻ. Nói trước là rip skin ko phải là 1 việc đẹp đẽ gì, nhưng đối với
cộng đồng vbb thì ít ai quan tâm đến việc này. Nói chung là tập cho
biết.
Tuy xixxon ko phải pro, cũng mới biết rip skin ko lâu, nhưng xx cũng
tạm nắm bắt được những cái cơ bản. Xx đã từng đọc một số tut dạy rip
skin, và cũng đã từng bỏ cuộc nhiều lần vì đọc mãi ko hiểu. Nên bây giờ
xx viết lại 1 tut khác, đơn giản hơn, và chi tiết hơn cho newbie.
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)
Xx viết ra tut này là dựa vào những hiểu biết và kinh nghiệm khi xx 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à xx 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 xx thì làm như vậy khó phân loại hình và rất
tốn thời gian, cho nên xx 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, xx 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 xx
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
- (Trong một vài trường hợp thì có thêm headinclude)
Đố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 bí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à xx 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. Xx 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.
