slushpuppy Posted October 9, 2014 Report Share Posted October 9, 2014 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: You will need ACP a fair bit of basic CSS knowledge Knowledge of hexadecimal color codes: http://html-color-codes.info/ and the animate skin install. 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 More sharing options...
slushpuppy Posted October 9, 2014 Author Report Share Posted October 9, 2014 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' /> 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 More sharing options...
slushpuppy Posted October 9, 2014 Author Report Share Posted October 9, 2014 reserved Link to comment Share on other sites More sharing options...
slushpuppy Posted October 9, 2014 Author Report Share Posted October 9, 2014 reserved Link to comment Share on other sites More sharing options...
Batman Posted October 9, 2014 Report Share Posted October 9, 2014 Nothing can beautify LT forums. inb4obsessed. Link to comment Share on other sites More sharing options...
ibro Posted October 9, 2014 Report Share Posted October 9, 2014 Gj slush puppy! Help the needy! Link to comment Share on other sites More sharing options...
Wardy Posted October 9, 2014 Report Share Posted October 9, 2014 Well needed topic, although I would have thought anyone responsible for site administration would know this stuff by now. It's pretty basic CSS knowledge ^.^ Link to comment Share on other sites More sharing options...
Derbs Posted October 9, 2014 Report Share Posted October 9, 2014 should help some people out Link to comment Share on other sites More sharing options...
Sharkbrew Legend Posted October 9, 2014 Report Share Posted October 9, 2014 Well needed topic, although I would have thought anyone responsible for site administration would know this stuff by now. It's pretty basic CSS knowledge ^.^ ^ Link to comment Share on other sites More sharing options...
cassidy69 Posted October 9, 2014 Report Share Posted October 9, 2014 can you beautify my sig by allowing GIFS again? Link to comment Share on other sites More sharing options...
Black Kid Posted October 9, 2014 Report Share Posted October 9, 2014 Goodjob slushpuppy <3 Link to comment Share on other sites More sharing options...
iDrawdee Posted October 9, 2014 Report Share Posted October 9, 2014 well this is cool, sadly i cant do any of it Link to comment Share on other sites More sharing options...
OnFleek Posted March 7, 2020 Report Share Posted March 7, 2020 thanks so much Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now