How to Make Invisionfree Skins

Written by michelle clark
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Make Invisionfree Skins
Skin your Invisionfree forum. (forum image by dinostock from

Finding an Invisionfree forum can be a daunting process for the new forum administrator, and creating a suitable skin can prove challenging as well. Invisionfree skins have two main skin tools: "Board Wrappers" and "Manage Style Sheets." Use these tools to create a customised skin for an Invisionfree forum.

Skill level:

Things you need

  • An Invisionfree forum with you registered as the administrator

Show MoreHide


  1. 1

    Choose a simple, three-colour scheme for your skin that has two similar colours very close in shade, and one strong, contrasting colour. For example, choose white, off-white and red, or two shades of navy blue and orange. The palette creation tool at is helpful for this step.

  2. 2

    Change the hex code body bgcolor="#FFFFFF" to one of the colours you chose earlier. Find this at the very top of the "Header & Body" text area box in the "Board Wrappers" option under "Skinning & Styles" in the Admin CP. The hex code is #FFFFFF in the original board skin, and the palettes will give a hex code for each color.The darkest colour or the brightest colour in the palette are often the most effective as a background colour.

  3. 3

    Go to "Manage Style Sheets" under "Skinning & Styles" in the Admin CP. Copy all of the text in the text area box and paste it into a simple text editor like Microsoft Notepad, which gives the ability to use "Find" and "Find and Replace." This is the CSS style sheet for the forum design.

  4. 4

    Find the category headers, which are the light blue titles on the original skin that have a section of boards underneath on the main index view of the forum. Search in your text editor for ".maintitle." Remove "<#IMG_DIR#>/tile_back.gif," but leave the parenthesis. Paste background-colour: #000000; right after the {, leaving a space before and after the pasted text. Replace the hex code with the hex code of the bright, contrasting colour in your palette. If the text is hard to read, replace both of the hex codes in .maintitle and .maintitle a:link for colour: #FFFFFF for a light text or #000000 for a dark text, or use one of the other colours in your palette.

  5. 5

    Follow the same steps as in Step 4 for element ".titlemedium," which is found right above ".maintitle," which will change the colour of the board titles. Use one of the other colours and a contrasting text colour.

  6. 6

    Search in your text editor for post 1. The post 2 element should be right underneath post 1. Change the hex code in post 1 to one of your similar palette colours, and in post 2 replace the hex code with the other similar colour. The lighter colour in both elements works well, too.

  7. 7

    Do a search in the text editor for #FFFFFF, and replace all instances with the slightly lighter colour. Do the same for #E4EAF2 and #F5F9FD.

  8. 8

    Continue the same process as in Step 7 to replace hex codes #D1DCEB, #DFE6EF, #BCD0ED and #C2CFEF with the darker colour.

  9. 9

    Search for "postlinksbar" and remove the background image link, leaving the parenthesis intact.

  10. 10

    Scroll to the top of the page of the CSS in your text editor. Find the a:link, a:visited, a:active elements. Change colour: #000 to the hex code of your contrasting colour. Copy and paste the CSS back into the Invisionfree CSS text area box, and hit "Edit CSS" at the bottom of the page.

Tips and warnings

  • Switching the colour choices in different elements can create a completely different effect. In the CSS Style Sheet, the name at the front of the element corresponds with the forum element. The Invisionfree Support forum has a list that explains each CSS element in detail for further customisation.
  • Images are effective in forum skins, but visitors are often frustrated by images that are too bright and busy. Gradient images can be used as category and board title bars, and seamlessly tiled images are effective backgrounds. Many forums on Invisionfree will fill requests for graphics and have ready-made graphics available for use.
  • If you make mistakes that you cannot fix, the Invisionfree Support forum has default board wrappers and CSS.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.