Jump to content

All In One IPB Skinning Reference


Recommended Posts

This will be continuously updated topic showing you the magic of skinning for IP Boards. Majority of the clans use Animate, so I will base this tutorial off the animate skin.





In this reference, I will be using "IMG_UR" and "COLOR_CODE". These are placeholders for DIRECT image url(e.g. http://imgur.com/sdfer3.png) and the hexadecimal color code(e.g. #FFFFFF respectively).



Also there will be 2 kind of files I will be often editing, the skin template and the  skin style file.


skin template files do not have an extension, i.e. the .XX at the back

skin style files do have an extension, i.e. the .CSS at the back


How to access Skin Templates:












Then follow instructions later in the reference manual.



How to access Skin Styles:


Same as before, but click on styles first








Finally a file should appear, make sure you scroll all the way to the bottom:








Start your cursor there ^^ before the end of the file

Link to comment
Share on other sites

How do I beautify the forum header? E.g. :




Add this code to the bottom of the skin style file-ipb_styles.css:



.ipsBox,.maintitle,.ipsSideBlock h3, .general_box h3,.box,.bar,.statistics_head {
    background: url('IMG_UR') repeat scroll 0% 0% #COLOR_CODE;






How do I change the scrolling banner at the top:


Add this code to the bottom of the skin style file-ipb_styles.css:



#branding {

   background: url('IMG_UR') repeat-x scroll center top #000;






How do I change image of the forum marker(or forum read/unread icons) without FTP?


Go to template file > Forum View-> forumIndexTemplate


Search for



<img src='{$this->settings['img_url']}/f_icon_read.png' />





<img src='{$this->settings['img_url']}/f_icon.png' />



And replace all occurrence with




<img src='IMG_UR' />


Do note that you will need 2 different image urls if you want to implement unread and read icons.


Just replace "{$this->settings['img_url']}/f_icon.png" with unread image url


and {$this->settings['img_url']}/f_icon_read.png with read image url



*Sometimes you will also need to do the same changes under Board Index>boardindextemplate

Link to comment
Share on other sites

  • 5 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...