Check out the FREE chatroom mod for IPB 3.x

IPB 2.1.x Simple Skin Tutorial by steve777

Copyright Stephen Jeffery

You are not allowed to copy or reproduce in any way without prior permission from myself, no exceptions.

This tutorial is a basic guide and in no way covers every aspect of skinning but will hopefully give you a general idea.

Still interested ... ok then let's gets started

First of all you will need to have a general idea of what kind of colours and layout (if fixed width or otherwise) you want.

Now go into admincp >> look & feel tab >> skin manager >> click box as shown in pic below



and enter a skin name of your choice (for this tutorial I am going to use newskin) then click the 'Go' button.

after clicking the go button ipb will create the templates and css for your newskin (as shown in next pic).



Now, unfortunately although it creates the templates and css it does not create a folder for the images and so we have to do this manually.

You will need to create the 'newskin' images folder by using ftp prog (or cPanel) to access your forum root folder on your server then go to the style_images folder and create 'newskin' folder.

Once this is done we then need to copy all files and folders from style_images/1 folder to 'newskin' folder, if this is not done then errors will occur and/or images will not show.

Once done we need to go back into admincp >> look & feel tab >> skin manager and click the options button/image on far right of our 'newskin' and select edit settings



We now need to change the style_images folder to the 'newskin' we created earlier by selecting it from the drop down menu (as shown in next pic).



If required you can also enter your details in the boxes below (author name etc etc).

Then click the 'Edit Skin Settings' button at bottom of screen.

If all goes well then should show you following image



That is the easy part done, now for the hard part.

Next you will have to create your images (logo, buttons and any backgrounds ... e.g. for maintitle background, logo background etc etc) using a graphics program like photoshop, paintshop pro or other similar prog that can save images in .gif or .jpg or even .png format)

Once the images have been created and saved to your hard drive we then to get them into the ipb forum.

The best way (and quickest) is to just overwrite the original images with your own (if you right click the images while viewing your 'newskin' in ipb and select properties you will find the image filename .. just overwrite this image with your own using same filename).

If you decide to use different filenames for the images then you will have to go through all the stylesheet, macro's and templates to change the filenames of the images to your filenames (which will be a long job) so as said best way is to overwrite the original images with yours using same filenames (and where possible the same size in width & height otherwise you may have to go through the stylesheet and change the sizes for the images).

However, the logo will be the easiest to change the height for as only need to change one part in css stylesheet (logostrip)

Once this has been achieved you should have the basics of your skin showing when selecting your 'newskin' from the dropdown menu at bottom of page of forum (or setting 'newskin' as your default skin by clicking the image at side of the options box in admincp >> look & feel tab >> skin manager).

All ok so far ? ... good.

Now we need to go into the advanced css to change colours and that would be a seperate tutorial or there may already be some tutorials or questions posted covering or asking about css.

For starters in 2.1 css could try this