How to make a skin for Invision Power Board 2.2.x [long]

Bhavesh Ramburn

Quantity Surveyor
Joined
Jan 19, 2006
Messages
2,757
nitr021 submitted a new Article:

How to make a skin for Invision Power Board 2.2.x [long]

How to make a skin on Invision Power Board for ipb 2.2.x?

This guide shows you an in-depth information on how to make a skin in invision power board 2.2.x and a few other tips on designing. This method that I am teaching is for fast development and the most efficient way of editing css for the skin. This guide is an improved and modified version of my old skinning guide for ipb 2.1.x which can be found on TAZ. Skinning is another way of saying designing a template, people just got used to the word skin because ipb refers to skin as the design template.

Quick Mention
This guide is intended for users who know some HTML & CSS. This guide is good if you want to move into the ipb 2.2.x realm of skinning (making template).

Introducing this
Skinning (or designing a template) is not an easy task for most of us. A lot of new users to ipb & general designing gets really confused on where to start skinning. There are different ways in starting to skin/design a template and the most logical way is to plan the design first and then start attacking it with colors and html. But it is personal preference really, it just depends how you like it. Both css and html should be worked on at the same time to make it easier to control. But in an effort to keep most features working on the IP.Board system it is best to edit the pre-configured template as it would be harder to start from scratch.

Preparing You
Before we continue to the hard stuff I would recommend you find a good CSS editor to help you edit .css on the fly so that you can see changes instantly.
The following is a list of editors that I have used & tested out:
  • Dreamweaver
  • Zend Studio
  • In Type
I prefer using Dreamweaver or a normal text editor such as notepad or wordpad to do css edits as it has a really good and DW has a decent IDE to help you make changes to CSS quickly and easily without much knowledge of CSS. If you are planning on going commando and take on CSS editing via notepad I would recommend having W3S’s css reference list open as they are pretty good.

Other handy things you may need is the famous CSS reference list[PDF] for IPB. It is a well documented graphical list of id & classes used within the...

Read more about this article here...
 
Last edited by a moderator:

IFC

Fan
Joined
May 29, 2006
Messages
573
Awesome stuff. Thanks for all your hard work sharing this with us.
 

Bhavesh Ramburn

Quantity Surveyor
Joined
Jan 19, 2006
Messages
2,757
np,
If you like more will come in your way within 2-3 days. I was thinking of writing a sequel of guides on how to make components from scratch and the WHY and HOW of each part. Ill probably get around 3-4 parts on that.

thanks
 

Sunlite

full moons just wonder
Joined
Aug 30, 2006
Messages
7,340
Thanks bhavesh for this excellent article, and I'm sure many will bennefit from it :)
 

CasinoSlot

Aspirant
Joined
May 5, 2009
Messages
20
Bookmarked In Permanent Help Category

Awesome stuff. Thanks for all your hard work sharing this with us.

I agree.
Totally awesome help.
I've "Bookmarked In Permanent Help Category"
This is what I was hoping to find in this forum - real help!!

Thanks

:banana:
 

ctimes

Participant
Joined
Mar 9, 2009
Messages
62
Thank you I hope to see something like this for vB eventually it was very informative for those running IPB.
 
Top