Publishing System Settings Logout Login Register
IPB 2.2 Forum Skinning Guide! Inc. Complete CSS Guide!
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Rating
Add to Favorites
Posted on January 23rd, 2007
17591 views
General Website Development


Setting up the Skin


1. Login to your ACP

2. Select the "Look & Feel" Tab

Now we need to create a new skin, click the drop down box to the right of the main header Skin Sets. You should get a box appear like this:



Enter the name of your skin, and press Go. You will then get a Invision Power Board Message box appear, telling you the skin was created and the cache / macros etc has been created. If anything failed, you need to fix the problem. If you dont know how to fix the problem, we will be willing to help you. Just post a new topic over in General Help and someone will be willing to help you. It may not be me that helps, but there are lots of friendly people who will know how to fix your issue.

You should now have something like this, in your list of skins.



Obviously saying the name of your skin, instead of My Skin.

Now we are going to configure the skin. Click the drop down menu, to the right of your skin name. If you are not sure what I mean, check the image below.



You will then get a drop down box appear. Select the Edit Settings option. As shown in image below.



You will now see a page that has many settings for your skin. I am going to help you configure the settings correctly.

The first box is for your skin name, if you want to change the name edit the text in that box. If not move on to the next option, Hide from members?. Do you want members on your forum to be able to use this skin, or do you want it invisible from members? Select yes to make it invisible. Do you want this skin as your forum default? If you check the box, all members and guests will see this skin. Move on to Image Options. Now we need to decide, are you going to create your own set of images.. or use the IPB default images? If you want to use the default images, select the image directory named 1 from the drop down. Are you going to create your own emoticons, or use the default? Select default from the next drop down to use the default emoticons. Next part is pretty much optional. You can fill in your details if you wish, you do not have to. If you chose to create your own image set, select the default images for now and we will go back in a minute.

Press Edit Skin Settings. It will not update the cache files etc.

If you chose to use your own image set, then we need to create this image set right. So open up your FTP client, or login to cPanel file manager or whatever. Just get to the place you use to manage your site files. In the forum, select the directory style_images. Now you will see the directory called 1, this is the image set for the IPB Default Skin. So, go ahead and create a new directory. Name is the same as your skin. In my case I would create a new directory called My Skin. You should now have an empty directory, open up the directory called 1 and copy everything inside the directory including sub-directories and paste into your new directory. You should now have 2 directorys with exactly the same contents. Now we need to edit the skin settings again, so repeat the step where you click the drop down box next to your skin in the ACP. Now you should have the settings page again, go down to Image Options and select your directory you just created from the drop down menu. Then press Edit Skin Settings. Your skin now uses your own set of images, but there not your own images yet. We will do that later.

Now you may be wondering why we copied the contents of directory 1, to your own directory. There is a perfectly good reason for this, the 1 directory contains lots of images for the skin that you probably wont need to replace. So its easier to replace the ones you need. So when we go to create our new images, we will overwrite the image in our own directory. That will then appear on our own skin.

Now go to your board, and look at your skin. If its not already selected at the bottom left of the page, select it. Like below.



Click on the name of your skin, the page should reload using your skin. Now at the moment, your skin should be exactly the same as the default. That's ok, we are going to edit it now.

In the next few pages, you will learn to completely customize the skin how you want it!

Next Page
Pages: 1 2 3 4 5 6
Dig this tutorial?
Thank the author by sending him a few P2L credits!

Send
Adam

This author is too busy writing tutorials instead of writing a personal profile!
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top