For the past 10 years, Invision Power Services Inc. has been making Invision Power Board, commonly referred to as IPB, a PHP and MySQL based forum software that has been used on the community websites of entities such as NASA, NBC, O'Reilly and Skype.
Creating your own skin, or design template for IPB requires a bit of HTML and a lot of CSS knowledge. However, by building your own custom skin, you can completely customise the look and feel of your forum.
- Skill level:
Things you need
- FTP program
- CSS editor
- Image editor
Create a development board. When making a new skin for IPB, it is best to start with a fresh installation of the forum. This will ensure that if you make any mistakes, it will not affect your main forum. Put a fresh installation of Invision Power Board on your web host or on your local host using a server application such as XAMPP.
Populate your forum with some test posts and data. You want to add some data to your forum so you can see how your style changes will affect it. At a minimum, you'll want to have a normal forum, a redirect forum, a sub forum and a locked forum. You'll also want to create some posts into your forum including a closed post, a moved post, an unapproved post, a new post, a read post, a pinned post and an announcement post.
Log in to your admin control panel. Click on the "Looks & Feel" tab. This will show you a list of skins already installed.
Click the "New Template" button in the table header. In the resulting drop-down, give your new skin a name. Once the template is created, click on its name to go to the skin page.
Click the "Edit Settings" button and set "Cache CSS to text file" to "Yes." This will help speed up your CSS development.
Find the ID number of your new template set. Click on the "Edit Settings" button again and inspect the URL in your web browser. At the end of the URL, there should be a number. This is the ID number of your skin.
Download your style sheet. Launch your FTP program and navigate to your forum installation. Under the forum root, your style sheet is located under "/style_images/css_ID.css" where ID is the ID number of your style sheet.
Edit your style sheet. Using your favourite CSS editor, add and modify your CSS tags and rules to your liking.
When you are finished editing, return to the "Looks & Feel" menu of your forum. Select your new skin, then select "Drop Menu." Under that menu, select "Edit Stylesheet Advanced Mode." Copy and paste the CSS from your editor into the text box of the style sheet page. Save your changes.
Create images to match the look and feel of your board. Start by downloading a reference set of images. You can find these under your forum root in the folder "style_images." Download this folder to your desktop and rename the folder to match the name of your skin that you are creating.
Work through the images by editing them in an image editor or creating your own. You'll want to keep the image names the same to make sure everything loads properly when you upload your new image folder back to your forum.
Upload your new image set folder into the "style_images" folder and assign them to your skin set. You can assign the images by navigating to your template under the "Looks & Feels" tab, then selecting edit settings. Under the "Use Image Directory?" field, choose the name of the folder you just uploaded.
Further customise the HTML of the forum by selecting "Edit template HTML" from the "Looks & Feel" menu. This will show you a list of all the templates used in creating the board. To edit, simply navigate to the template you want to change and modify the HTML. When you are finished editing, select the "Save Template Bit" button.
Tips and warnings
- When you are finished editing, it is best to view your modifications with a number of popular web browsers to make sure the forum looks as you intended for all of your visitors.
- Always make a backup folder of your images, style sheet and HTML bits before you begin editing so you can return to them if you make a mistake.
- 20 of the funniest online reviews ever
- 14 Biggest lies people tell in online dating sites
- Hilarious things Google thinks you're trying to search for