How to make a skin on Invision Power Board

Bhavesh Ramburn

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

How to make a skin on Invision Power Board

How to make a skin on Invision Power Board?

Disclaimer: This guide is for users who know html and CSS well & want to start learning how to make templates on ipb.

Intro:
Skinning (or designing a template) is not an easy task for some. The major question is where to start skinning, for some it could be editing the html and then the CSS, but in my personal experience it would be best to start changing the CSS of the site first and then adding the rest. Also every time when making a new skin there is a need edit/create images, but hopefully you can request and find most graphics on both TAZ and Invisionize.

Preparing:
First thing first, you need to open up a good text editor; I use DreamWeaver as it has a good CSS syntax recognition and a built in xhtml validator and other validators. Next you need a browser or 3. I have Firefox, IE & Opera open to test out xhtml and CSS to see if the xhtml and CSS works on all 3 main browsers. But for browser designing I recommend opera because it has a very strict reading of CSS and xhtml, even though I never use it as much as Firefox, opera helps me a lot in finding errors in script so that it is compliant to all browsers and users. Now to help you with color management I recommend opening a good paint tool or a web color picker (http://www.defencemechanism.com/color/). I use Photoshop so that I can make a color strip and as well pick good colors on their color picker.
Also you would need a server to run the board software and view the board fully, but it is not totally necessary as you can run a localhost using XAMPP (http://www.apachefriends.org/en/xampp.html). I prefer Xampp as it is fast and you can quickly save the edited pages and see effects instantly. (I will not cover the setup and use of Xampp in this guide). In this guide we recommend setting up a separate board as a development board to develop your skin.
On the development forum you should have:
  • A normal forum
  • A redirect forum
  • Sub forums
  • A locked forum
  • Some posts within forums including
    • Closed post
    • Moved post
    • Unapproved post
    • New post
    • Read post
    • Pinned post
    • Announcement post
Starting off:
Once that you have set up a separate development board login into the admin control panel. Now I am going to show you how to...

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

JoshB

TalkSTAR
Joined
Mar 5, 2006
Messages
2,020
I like it, but I wanna learn to be able to do the "graphicsy" side of things. A guide that will say like a simple guide on changing the default invision skin to a red one, just to get used to doing that side of things.
 

Bhavesh Ramburn

Quantity Surveyor
Joined
Jan 19, 2006
Messages
2,757
JoshB said:
I like it, but I wanna learn to be able to do the "graphicsy" side of things. A guide that will say like a simple guide on changing the default invision skin to a red one, just to get used to doing that side of things.
do you know any css?

the guide shows you where the images are located just follow it and change the images
 

IpbWiki

Adherent
Joined
Mar 4, 2006
Messages
475
good guide, pitty it doesn't cover the data variables, it's the thing I was looking for...
 

Bhavesh Ramburn

Quantity Surveyor
Joined
Jan 19, 2006
Messages
2,757
IpbWiki said:
good guide, pitty it doesn't cover the data variables, it's the thing I was looking for...
there is a massive guide on ipsbeyond about that, try visit their wiki
 

jophlet

Aspirant
Joined
Sep 1, 2006
Messages
16
How can i customize/configurate the message board fonts from black to white or yellow in the iinvision blue template?
 

Bhavesh Ramburn

Quantity Surveyor
Joined
Jan 19, 2006
Messages
2,757
look in the css under "body" tag and change "color:" to white or #fff
 

skandalouz

Neophyte
Joined
Dec 1, 2006
Messages
7
awesome tutorial, i'll be needing this soon. I've tried skinning IPB before, but all i ended up with was customizing an older skin by simply overwriting images and the hex colors in the css
 

Bhavesh Ramburn

Quantity Surveyor
Joined
Jan 19, 2006
Messages
2,757
skandalouz said:
awesome tutorial, i'll be needing this soon. I've tried skinning IPB before, but all i ended up with was customizing an older skin by simply overwriting images and the hex colors in the css
nice to hear it helped out, but this tutorial is just the start as there is a lot more going on that you can do
 

McAwesome

idiot
Joined
Dec 14, 2006
Messages
123
Question for you--which I think is relevant to this thread--how has the "make your own skin" changed for IPB 2.2.x?
 

PalePhoenix

Prince of Dorkness
Joined
Dec 11, 2005
Messages
11,951
Faster!

nitr021 said:
wheneve i get time i post new stuff that i find, and once that i am confortable with it I will write a guide for 2.2 or amend this one to include 2.2
Ja, get on that Kapz, before I have to crack the whip on my skinning moderator again. He was just whining that Duggy's site is down. ;)
 
Top