How to make a skin for Invision Power Board 2.2.x [long]

  1. Bhavesh Ramburn
    How to make a skin on Invision Power Board for ipb 2.2.x?

    This guide shows you an in-depth information on how to make a skin in invision power board 2.2.x and a few other tips on designing. This method that I am teaching is for fast development and the most efficient way of editing css for the skin. This guide is an improved and modified version of my old skinning guide for ipb 2.1.x which can be found on TAZ. Skinning is another way of saying designing a template, people just got used to the word skin because ipb refers to skin as the design template.

    Quick Mention
    This guide is intended for users who know some HTML & CSS. This guide is good if you want to move into the ipb 2.2.x realm of skinning (making template).

    Introducing this
    Skinning (or designing a template) is not an easy task for most of us. A lot of new users to ipb & general designing gets really confused on where to start skinning. There are different ways in starting to skin/design a template and the most logical way is to plan the design first and then start attacking it with colors and html. But it is personal preference really, it just depends how you like it. Both css and html should be worked on at the same time to make it easier to control. But in an effort to keep most features working on the IP.Board system it is best to edit the pre-configured template as it would be harder to start from scratch.

    Preparing You
    Before we continue to the hard stuff I would recommend you find a good CSS editor to help you edit .css on the fly so that you can see changes instantly.
    The following is a list of editors that I have used & tested out:
    • Dreamweaver
    • Zend Studio
    • In Type
    I prefer using Dreamweaver or a normal text editor such as notepad or wordpad to do css edits as it has a really good and DW has a decent IDE to help you make changes to CSS quickly and easily without much knowledge of CSS. If you are planning on going commando and take on CSS editing via notepad I would recommend having W3S’s css reference list open as they are pretty good.

    Other handy things you may need is the famous CSS reference list[PDF] for IPB. It is a well documented graphical list of id & classes used within the default ipb template. Another handy tool is a really magnificent add-on for Firefox; web developer it is a toolbar which helps you identify ids, classes and provides you with useful tools &l information within a site’s design. Regarding color picking there is no doubt that it would be DefenceMechanism’s color generator or Colorblender’s color picker. And finally having a plethora of different browsers at hand would be great, I especially recommend having opera as your side design browser with your main browser as the main view for development. This is due to Opera’s strict html parse as this helps me reduce errors for all 3 main browsers (ie, ff, opera). I use opera just to see css changes as I have it reload every 1min or 30 sec automatically so it don’t waste my time pressing refresh as it would have been already loaded when I switch to opera from my editor.
    Recommended by many developers and designers it would be best to run your development on a local server either on the current computer or a computer on your network. This is due to the instant saving and upload of the file. The easiest way to setup a local server is by unpacking and running XAMPP. This is totally optional but this would make it faster for you to deploy a lot of templates quickly and easily. Not only you can use it for template development but also modification development. *Refer to its manual for usage of this software.

    There on the server or your normal host you would install another board just for development (yes it is allowed by ips to have 1 development board, as long as the public doesn’t have access to it) where you would use the following structure and post type:
    • A normal forum
    • A redirect forum
    • Sub forums
    • A locked forum
    • Some posts within forums including
      • Closed post
      • Moved post
      • Unapproved post
      • New post
      • Read post
      • Pinned post
      • Announcement post
    The reason for this setup is to allow you to see how different type of content is going to be displayed.

    How to find your way around
    IPB has one of the most friendly interface so it is very easy to work around IPB. To start off we need to enter the admincp. [​IMG] If you have not noticed you can access your admincp through the main board if you have already logged in (see image on the left). Now log into your admincp you will see some tabs at the top of the page. You don’t really need to know anything else apart from Looks & Feel at the moment. [​IMG]On that page you would see something like the image above.
    At the management menu for the skins you would first want to create your own template. To do so locate and press the button on the far top right corner of the list of skins, the one to the right of Skin Sets caption. Once pressed a small popup underneath the button will appear asking you to input a name for the skin set. Just type whatever you want. When you are done hit the ok button.

    Now that you have created a new skin template you will be represented with the list of skins installed on your forum, find your new template that you have created in the list and to the far right of it there will be 4 icons. Here is a preview and definition of what each one is:

    [​IMG]
    1. This shows if this template is used and assigned to an individual forum
    2. This shows if the template is viewable & can be chosen, this can be overwritten in group permission settings
    3. this shows if the template is default or not
    4. Is a drop menu button
    5. Where you edit the template positioning
    6. Where you edit the template bits
    7. Where you edit the CSS in raw
    8. Where you edit the CSS in guided mode/WYSIWYG
    9. These are macro/phrases you can create and use anywhere within any template bit and it should convert the phrase into its full text
    10. These are settings of the skin
    11. This cleans all edits you made to that skin
    12. This is where you can export the skin for publishing and redistribution
    13. This is where you can generate a difference of the original skin to the one you edited, its useful when there is an upgrade in skin
    14. This deletes the skin, there is no undo.
    The only thing you would need to know how to use is the Edit Template HTML, Edit Stylesheet (advance mode) & Edit Settings from the menu. The rest is important too but we will not cover it here as we are aiming to get you skinning in no time.

    The edit template html is quite easy to use. All you have to do is just have to get used to which template bits shows what. The whole skin structure is quite simple to understand. IPB’s general structure lays in All Global HTML. That holds all the template bits used in every page of the board. All Global HTML is a skin group like all the other ones like Board Index, etc… Then those skin groups holds quite a lot of template bits. More information about the source structure of the template will be presented below. All that you have to know now is what does what in the template edit menu; which is illustrated below.
    [​IMG]
    1. Skin Bit name
    2. Template bit variable* This will be explained further down in this guide you just have to know that this is important
    3. The textarea where you will be able to see the html parts and edit them
    4. This is just a visual preference setting, where you can edit the text format, size and width of the textarea (illustrated as id:3)
    5. This closes the current edit panel (not really used most of the time)
    6. When pressed it will save the html you inputed in id:3
    7. This brings up a popup in which you can edit the html, I prefer having this open than having a small space to edit the html
    8. When pressed it will display the small box below it which has id:9,10,11,12,13
    9. This opens up id:2
    10. Will show a popup where you can search up what some macro template outputs.*I myself don’t use it when modifying skin but it can be useful if you are using a lot of macro template bit on your design
    11. Compare version is a really nifty tools which allows you to see the difference from the master template and the current edited template bit. This is useful if you are changing from ipb 2.1.x to 2.2.x template structure
    12. Just a normal restore of the text
    13. Like the caption says
    14. The list of other template bits within the skin group
    15. closes the template bits list
    16. the current template bit
    17. Reverts the edited template to the one in the master template db
    18. Current skin group
    19. List of skin groups installed
    20. The IE icon tells you that you can see a demo of the use of the template.
    Edit stylesheet is pretty simple to use as it is a big textarea containing all the CSS information you need. This part is very important to this guide so you will be using it a lot.

    Edit settings menu is a straight forward form where you change the skins settings such as name, author details and most importantly if you want to cache your css to file which you must do!

    Cacheing the css to file
    To carry on after you created the new template go to Edit Settings to turn on your css into cached files. This is really an important feature to turn on as we will be editing the css directly to see instant changes in the template. Not only this feature is good for development but it is really good if you will have a lot of visitors on your site. This cache feature will allow you to save quite a lot of bandwidth per page as your viewers/users would only load the css files once a while and not every page.
    Now that you have created your cached css file you would want to see the file itself to edit. This is pretty simple if you follow the following direction:
    Go to your template set, click the drop menu and click “Edit settings…” now in the URL of this newly loaded page locate the last digit in the url with the id= infront of it. For example if the URL is: http://localhost/forum/admin.php?adsess=13a78caf61768b76ce64b5dbc6e75589& section=lookandfeel&act=sets&code=edit&id=5
    Then the id for that template set is 5, hence …&id=5 . Now in your text editor browse to forumroot/style_images/css_xx.css where the xx is the template set id, either by locating it under xampp htdocs or direct ftp edit via your chosen editor.

    !!WARNING!!
    Do not save or edit any CSS files through IPB admincp as you will loose the changes. Read below for more information.
    As we are just cheating our way around IPB to allow us for fast development of our skin it is recommened that every night or once a while you copy the content of the css file and past it in the text box in your chosen skin’s advance css edit form(“Looks & feel” > your skin set > “drop menu” > “edit stylesheet advance mode”). This is due to a normal procedure where IPB will overwrite your current css with it’s database version everytime you manipulate any CSS within the admincp. If you are very worried about this get and setup subversion so that you can track you changes to the IPB source. *Another guide on this will be posted about this.

    Using our own images
    Now that we are done with the CSS lets start with the images. First grab hold of your IPB zip that you downloaded from ips and locate & copy “forumfolder/style_images/1/” and rename the folder by pasting the copy to the desktop or anywhere and renaming it by pressing “f2” button on your keyboard and now that you have renamed it move it to your development forum and pasting it in “forumroot/style_image/”. In this tutorial I renamed it to “new_skin” for reference, you can rename it to what you want as long as it got safe characters.
    Now you got to assign that image folder to your skin, so go to “looks & feel” > your template > “drop menu” > “edit settings…” and under “Use image directory?” choose the folder name you made and save.
    Now open your Photoshop or image editing software and create new image replacing the ones found in your image folder that you placed in “styles_images”
    Side note:
    Here is a list of recommended image editors:
    Or you could download the ipb 2.x.x GDK from IPS website in the documentation section.Remember that the GDK is for photoshop or any other image editors that support psd files.
    If you are bad at making images you could request them on the TAZ forums

    Getting to edit the html
    Usually most of the design could be done by just editing images and css but sometimes it may require you to edit some html files are they do interfere with your final objective of the design. This section below is going to try to make you understand some basic functions and features that ipb’s template engine offers and how to use them. You can edit the html via Edit Template HTML from the drop down menu next to your generated skin. More indepth information will be written on this blog about the logic code and how to use them.

    Logic code
    Logic code is the inbuilt tags for ipb to allow you perform certain procedures like if,else,foreach. Back in ipb 2.1.x there were no foreach function enabled onto the main source templates but you could have enabled it back but it was not safe to do so. Now on ipb 2.2.x foreach function has been enabled aswell as a new way of processing the template logic. Other things also changed from 2.1.x to 2.2.x like the ipb.xxx variable macro which converts into $this->ipsclass->. Now in the new template engine you have to type the full $this->ipsclass-> to make it work as it stopped replacing the ipb. macro.

    Other cool things on the new ipb template is the ability to input php code in the source template but it is not that good to use and is surely unsafe if you have more than 1 admin with the ability to edit skin templates. I will show you how to enable it and how to use it below after I show you how the ipb template system works.

    Ipb uses its own template cache system or any other cache system you want to use. Just read their manual for that as I will not cover it in this guide. The cache system is pretty simple as it takes unparsed logic from the db and parses it before writing it to file. The templates are structure in classes and the class name is the skin group name and each function is the name of each template bit.

    Below is an example of a cached template bit, these cache files can be found in yourforumdir/skin_cache/cacheid_%id%
    Code:
    //===========================================================================
    // <ips:cal_birthday_entry:desc::trigger:>
    //===========================================================================
    function cal_birthday_entry($uid=”",$uname=”",$age=”") {
    $IPBHTML = “”;
    //–starthtml–//
    $IPBHTML .= “<li><a href=\”{$this->ipsclass->base_url}showuser=$uid\”>$uname</a> ($age)</li>”;
    //–endhtml–//
    return $IPBHTML;
    }
    From the above you can see that the template bit is actually a function and the data variable are the variable for the function.

    Some use of the logic
    Please note there is a difference in parsing the logic code between ipb 2.1.x. and 2.2.x, which will be explained below.
    A quick note about using variables and arrays:
    if you are using variables you do not need to use these brackets {} where as if you use arrays and objects you have to use the brackets or it will result not displaying the data contained in the object or variable. Example:
    Code:
    variable:
    $thedata
     Array:
    {$thedata[’myvar’]}
     Object:
    {$this->ipsclass->vars[’something’]}
    Continueing… some changes
    As ipb has drop the ipb.xxx macro all variables and arrays in the $this->ipsclass-> needs to be written fully.
    Like below if you use:
    Code:
    {ipb.vars[’something’]}
    This will output as an error.
    The way to do it now is:
    Code:
    {$this->ipsclass->vars[’something’]}
    If…Else Logic
    This time around in ipb 2.2.x there has been a great change in this logic which I like as you can have multi levels of if..else functions aswell as use some php verification function like is_object(), is_array() . And the best thing is that you can add the first dollar sign in the if logic as before in ipb 2.1.x the engine added the first dollar sign automatically thus limiting you. But now we have the liberty to do a lot more.
    In IPB template you can’t just write “if($x == ‘1’){…..” you got to use their own tags. IPB kernel runs and replaces these special logic tags into proper PHP.
    Here is how the if and else function looks like:
    Code:
     <if=”$this->ipclass->vars[’something’] == ‘asdasd’ “>
    echo something here
    <else />
    <if=”$other_statement”>
    else if
    <else />
    else statement
    </if>
    </if>
    *Thanks brandon

    Foreach Logic
    This new logic is my favourite as it saves you from using a lot of template bits in one go.
    It is pretty easy to use just use the following structure:
    Code:
    <foreach=”$member as $member”>
    {$member}
    </foreach>
    Hence:
    Code:
    foreach($mmber as $member)
    {
    $member
    }
    Php Logic
    This is another logic they added which allows you to perform some php process before outputing the HTML. The new tags are:
    Code:
    <php>…</php>
    First you have to enable it in init.php all you have to do is change the following:
    Code:
    define( ‘IPB_ACP_ALLOW_TEMPLATE_PHP’, 0 );  
    into:

    Code:
    define( ‘IPB_ACP_ALLOW_TEMPLATE_PHP’, 1 );   
    Now the thing is that you can’t type a full class in there or even a function as the code will be run before template. For example if I use:
    PHP:
    <php> echo ‘this is an echo’; </php>
    This will be parsed like so in the cache:
    PHP:
    function personal_portal_main($tabs=array(),$member=array(),$comments=",$friends=array(),$visitors=array(),$default_tab=’posts’) {
    $IPBHTML = “”;
    //–starthtml–//
     echo “this is an echo”;
    $IPBHTML .= “<script type=\”text/javascript\” src=\”{$this->ipsclass->vars[’board_url’]}/jscripts/ipb_profile.js\”></script>….
    Which will mean that if you put that php tag anywhere in your template bit it will be processed before the html output. Thus you will see ‘this is an echo’ somewhere before that templat bit was meant to be displayed.
    And the rest is just practice, reading my guides that I will post on my blog and reading other template bits and gradually using the skin system.
    Hopefully this will help you get into learning and creating IPB templates, and I hope you can share some for free.
    If you have any questions please email me on nitr021@gmail.com.
    I would appreciate any comments given anywhere on my blog and on any posts that I have made
    All text is copyrighted to Bhavesh Ramburn. This guide is only to be republished within Theadminzone and has partial ownership and partial commercial use over the content of this article.
    A copy of this guide can be found on my blog sited above.
    All images are screenshots of invision power board using gadwin printscreen

    Original: http://blog.icelabz.net/2007/02/09/how-to-make-a-skin-on-invision-power-board-22x-spec/

    Share This Article

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.