What's RIP skin: Rip means copy, copy theme from a forum which you feel good but it has never shared yet . It's seem not a good job, but many people who develop VBB is interested in!
Starting work
With some other tuts, designer ask you to seperate all images, and then code, but according to xx, it's hard to do and take many time. So xx do it parallel with code and take images.
Tools need:
- An uploadable FTP software (such as cuteFTP or FlashFXP)
- Firefox + Internet Explorer (you need both them to check)
-Some knowledge about template and html code.
- And the forum which content the skin you want
First, go to admincp > Styles & Templates > Style Manager > Add New Style. Name the skin, select no parent, and click save.
1/ CSS
First we will process CSS and images include
go to the index page of the forum you want to rip, view page source scroll down, and you will see <!-- CSS Stylesheet --> with green color. below it is black code. Copy from body { to the end of the black code (in front of </style> with purple color)
Come back to you new skin (you've just created it above), select All style option. Scroll down and you will see Additional CSS Definitions.there're 2 boxes, the first box already have code, delete all, and paste the source you've just copy from other skin, click save.
So, your skin have some color without images. You must see css to get images, go through the skin, if you see images, right click and copy image location, paste on the browser address bar, and then save. You must take a look with the folder which content this images, so you must create the same folder.
Note: Some forum save css in a file, and insert to css part.And you just download this css file and the insert to css part with the same code.
2/ Structure
As you see, a skin include many template, but there're just some structure templates :
- Header (include banner)
- Navbar (some skins not have)
- FORUMHOME
- Forumhome_forumbit_level1_nopost (style of category in index)
- Footer
- In some case, it's have headinclude
There some complex skins so you must see other templates (but it's not many skins like that)
it's hard to tell you this part because every skin has itself structure,
If you've ever hack some mods with modifying template you will see every template has begin and end point, as <!-- begin --> v? <!-- /end -->
Ex: <!-- logo --> and <!-- /logo -->
in this example, the code between <!-- logo --> and <!-- /logo --> is logo code, and it stand in header templte. You just copy this code, and paste to header template, replace to logo part of default skin. Don't forget to take images as you do with css . And REMEMBER to put them in the correct folder.
When you see a tag but you don't know where is it, just search in template in admincp.Step by step, you must go through the page source code, and remember to get images on the same time.
Some notes
- When you view source in index page, categories will repeat, you just need to copy this style part just one time
- In templates have vbb phrases such as navbar, forumhome_forumbit_level1_nopost?they not have phrases as you see in index page, they use vbphrase ($vbphrase[ ]) so that you can change language. So when you copy, it's not real to copy 100% every things, but you need to replace by there vbphrases.
- when you copy code, you must take a look to tags, they must have both begin and end tag?or they will be askew.
When ripping, your new skin will be askew (you will see that), so, you can fix it by viewing pagesource of you forum, and find the different code, copy this different and seach in template, then fix it.
3. Complete the left things
When you cpmlete copying code as above, you've done 90%, there're just some images left, so you must save there images and put them in the correct folders. (such as button, smiles...)
Note: You must enter the image path of all style option to change the paths to the coorect folder in your host . And delete all in title image (it's default logo of vbb)
4/ Check it
Start it by using Internet Explorer to show your forum, and check if they're some mistake. If it has mistakes, view pagesource again, and fix as you do above.
And when you use IE, if there're some images left, you will see a blank picture with a cross sign (you won't see anything if using Firefox)
Starting work
With some other tuts, designer ask you to seperate all images, and then code, but according to xx, it's hard to do and take many time. So xx do it parallel with code and take images.
Tools need:
- An uploadable FTP software (such as cuteFTP or FlashFXP)
- Firefox + Internet Explorer (you need both them to check)
-Some knowledge about template and html code.
- And the forum which content the skin you want
First, go to admincp > Styles & Templates > Style Manager > Add New Style. Name the skin, select no parent, and click save.
1/ CSS
First we will process CSS and images include
go to the index page of the forum you want to rip, view page source scroll down, and you will see <!-- CSS Stylesheet --> with green color. below it is black code. Copy from body { to the end of the black code (in front of </style> with purple color)
Come back to you new skin (you've just created it above), select All style option. Scroll down and you will see Additional CSS Definitions.there're 2 boxes, the first box already have code, delete all, and paste the source you've just copy from other skin, click save.
So, your skin have some color without images. You must see css to get images, go through the skin, if you see images, right click and copy image location, paste on the browser address bar, and then save. You must take a look with the folder which content this images, so you must create the same folder.
Note: Some forum save css in a file, and insert to css part.And you just download this css file and the insert to css part with the same code.
2/ Structure
As you see, a skin include many template, but there're just some structure templates :
- Header (include banner)
- Navbar (some skins not have)
- FORUMHOME
- Forumhome_forumbit_level1_nopost (style of category in index)
- Footer
- In some case, it's have headinclude
There some complex skins so you must see other templates (but it's not many skins like that)
it's hard to tell you this part because every skin has itself structure,
If you've ever hack some mods with modifying template you will see every template has begin and end point, as <!-- begin --> v? <!-- /end -->
Ex: <!-- logo --> and <!-- /logo -->
in this example, the code between <!-- logo --> and <!-- /logo --> is logo code, and it stand in header templte. You just copy this code, and paste to header template, replace to logo part of default skin. Don't forget to take images as you do with css . And REMEMBER to put them in the correct folder.
When you see a tag but you don't know where is it, just search in template in admincp.Step by step, you must go through the page source code, and remember to get images on the same time.
Some notes
- When you view source in index page, categories will repeat, you just need to copy this style part just one time
- In templates have vbb phrases such as navbar, forumhome_forumbit_level1_nopost?they not have phrases as you see in index page, they use vbphrase ($vbphrase[ ]) so that you can change language. So when you copy, it's not real to copy 100% every things, but you need to replace by there vbphrases.
- when you copy code, you must take a look to tags, they must have both begin and end tag?or they will be askew.
When ripping, your new skin will be askew (you will see that), so, you can fix it by viewing pagesource of you forum, and find the different code, copy this different and seach in template, then fix it.
3. Complete the left things
When you cpmlete copying code as above, you've done 90%, there're just some images left, so you must save there images and put them in the correct folders. (such as button, smiles...)
Note: You must enter the image path of all style option to change the paths to the coorect folder in your host . And delete all in title image (it's default logo of vbb)
4/ Check it
Start it by using Internet Explorer to show your forum, and check if they're some mistake. If it has mistakes, view pagesource again, and fix as you do above.
And when you use IE, if there're some images left, you will see a blank picture with a cross sign (you won't see anything if using Firefox)