Jump to content

All In One IPB Skinning Reference


slushpuppy
 Share

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.

 

Pre-Requisites:

 

 

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:

 

347c4a2bec6c5e43fd7574122f24a98d.png

 

 

4b01b151ffc09873c4fbbbe427013042.png

 

 

 

9369e0642799781c8060e27b0f7ebf34.png

 

 

Then follow instructions later in the reference manual.

 

 

How to access Skin Styles:

 

Same as before, but click on styles first

 

 

0eb4cf76467b6aa8373fc3456afff36f.png

 

4f60bcd86384a6b2dc891842fd728bda.png

 

 

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

 

b8e549b19b59b99246e8bcc42c556f61.png

 

 

 

04e46dd137ee4d2d6760cb0775e0d1de.png

 

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. :

 

8fe8609b1df0b1042d22f9bfbac3c6ef.png

 

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' />

 

And

 

 

<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
 Share

  • Recently Browsing   0 members

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