How to make a skin on Invision Power Board

  1. Bhavesh Ramburn
    How to make a skin on Invision Power Board?

    Disclaimer: This guide is for users who know html and CSS well & want to start learning how to make templates on ipb.

    Intro:
    Skinning (or designing a template) is not an easy task for some. The major question is where to start skinning, for some it could be editing the html and then the CSS, but in my personal experience it would be best to start changing the CSS of the site first and then adding the rest. Also every time when making a new skin there is a need edit/create images, but hopefully you can request and find most graphics on both TAZ and Invisionize.

    Preparing:
    First thing first, you need to open up a good text editor; I use DreamWeaver as it has a good CSS syntax recognition and a built in xhtml validator and other validators. Next you need a browser or 3. I have Firefox, IE & Opera open to test out xhtml and CSS to see if the xhtml and CSS works on all 3 main browsers. But for browser designing I recommend opera because it has a very strict reading of CSS and xhtml, even though I never use it as much as Firefox, opera helps me a lot in finding errors in script so that it is compliant to all browsers and users. Now to help you with color management I recommend opening a good paint tool or a web color picker (http://www.defencemechanism.com/color/). I use Photoshop so that I can make a color strip and as well pick good colors on their color picker.
    Also you would need a server to run the board software and view the board fully, but it is not totally necessary as you can run a localhost using XAMPP (http://www.apachefriends.org/en/xampp.html). I prefer Xampp as it is fast and you can quickly save the edited pages and see effects instantly. (I will not cover the setup and use of Xampp in this guide). In this guide we recommend setting up a separate board as a development board to develop your skin.
    On the development forum you should have:
    • 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
    Starting off:
    Once that you have set up a separate development board login into the admin control panel. Now I am going to show you how to create a new blank template to work on; first go to “looks & Feel” tab, there you will see a list of templates already installed on your board system. To create a new template click the button in the table header (on the far right of “Skin Sets”), now a drop menu will appear asking for a name for a new template, type anything you want here, for this tutorial I have used “test skin” and I will refer to that throughout the tutorial.
    Now that you have created a new skin template you will be represented with the list of skins installed on your forum, now find your new template that you have created and to the far right of its name there will be several buttons. Here is a preview and definition of what each one is:
    http://www.theadminzone.com/forums/attachment.php?attachmentid=1128&stc=1&d=1155481002
    • This shows if this template is used and assigned to an individual forum
    • This shows if the template is viewable & can be chosen, this can be overwritten in group permission settings
    • this shows if the template is default or not
    • Is a drop menu button
    • Where you edit the template positioning
    • Where you edit the template bits
    • Where you edit the CSS in raw
    • Where you edit the CSS in guided mode/WYSIWYG
    • These are macro/phrases you can create and use anywhere within any template bit and it should convert the phrase into its full text
    • These are settings of the skin
    • This cleans all edits you made to that skin
    • This is where you can export the skin for publishing and redistribution
    • 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
    • This deletes the skin, there is no undo.
    Now that you know where most things are let’s go get started on the CSS. First go to the “edit settings…” under the drop menu and then go under “cache CSS to text file” and check yes. Now this means that all the CSS will load in a separate folder and this means that you can edit that CSS file and save it fast to see instant changes on your board. Now you need to locate the CSS of the current template you made, first go to your template set, click the drop menu and click “edit settings…” now in the URL of edit settings there is a number at the end 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.
    Warning: do not save or edit any CSS tags through IPB admincp as you will loose the changes. Read below for more information.

    Now that you have located your CSS you may now start editing the CSS tags to change color, font, positioning, etc… I recommend referring to http://www.duggyd.co.uk/css/ipb2_1/index.htm when you want to edit the CSS, it has been really useful every time, but some of the tags are outdated and needs to be renewed so you got to look at the source sometime.

    Now once that you have finish editing the CSS copy the whole CSS from your text editor and then go to “Looks & feel” > your skin set > “drop menu” > “edit stylesheet advance mode” and paste the source from your text editor to the text box overwriting the current text and press save so that it saves the edits to database so that when you export it keeps the CSS and you don’t loose anything. This way is delicate to handle but very useful and fast.

    Now that we are done with the CSS lets start with the images. First grab hold of your IPB zip that you downloaded 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 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”, 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”

    A quick note editing the images are optional, you can find great images replacing the ones in the folder you made either on TAZ or Invisionize.com.

    Now lets go edit template bits, go to “looks & feel” > your skin > popup menu > and click “Edit template HTML”

    Now you will see something like this:
    http://www.theadminzone.com/forums/attachment.php?attachmentid=1129&stc=1&d=1155481002

    All these links are template groups; they represent a group where there are 100’s more of smaller templates. Once you click one of those links a new frame will open and display all the smaller templates within that group.

    http://www.theadminzone.com/forums/attachment.php?attachmentid=1130&stc=1&d=1155481002

    And once you click one of the template bit a smaller frame will open showing you the actual source of the template. As there are loads of template bits it is very hard to show all of the template bits in this tutorial. But you can find parts of the html through “skin Search & Replace” link which can be found on the left hand side of the screen.

    http://www.theadminzone.com/forums/attachment.php?attachmentid=1131&stc=1&d=1155481002

    Let’s get back to the template editing.
    Below is an example of what the source editor will look like:
    http://www.theadminzone.com/forums/attachment.php?attachmentid=1132&stc=1&d=1155481171

    On top of this frame there is “save template bit” when clicked it will save the source.

    On the template editor there is a small button on the top right corner, once clicked a menu will show up.
    http://www.theadminzone.com/forums/attachment.php?attachmentid=1133&stc=1&d=1155481171

    The “edit data variables” link is a link to attributes to the function, normally if you are editing the default skin bits you don’t really need to edit them but if you decide to make your own edits and want to create your own things, but we are not going to cover that in details but just explain why it is there.

    The “compare Versions” link is useful if you want to see what changes where made to the original template, it is extremely useful when there is a master template upgrade.

    That would be all you would need to know from this.


    Now I will show you some of the logic code that IPB uses.

    Intro
    IPB uses function and classes for their template. Since version 2.1.x all the template bits are now found in “rootfolder/cache/skin_cache/cacheid_x”.

    Below is how the template bit function looks like:


    PHP:
    function forum_show_rules_link($rules="") {
      
    $IPBHTML "";
      
    //--starthtml--//
       
       
      
    $IPBHTML .= <<<EOF
      <!-- Show FAQ/Forum Rules -->
      <div class="ruleswrap">
                  &nbsp;<{F_RULES}>&nbsp;<b><a href="
    {$this->ipsclass->base_url}act=SR&amp;f={$rules['fid']}">{$rules['title']}</a></b>
      </div>
      EOF;
       
      //--endhtml--//
      return 
    $IPBHTML;
      }
    Now that you know how IPB creates and read it lets move on.
    IPB saves all template bits onto Database and then from there it generates PHP template classes to be used quickly when loading a page. As IPB tries to increase it’s software’s security it does not allow any raw php tags to be used within the template bits itself, so they made IPB logic, at the moment IPB is using some variable/array replacement and if...else function and are planning to add foreach function and other functions onto the template system. Well they have already made the classes and works pretty well, “I think!”, they included it in their ips_kernel folder under the file name class_template_engine.php it basically have the same functions but have new logic preg_replace which allows foreach function to be used within the template. Let’s not worry about that and concentrate on what is already there.

    Variables and arrays
    In IPB template edit you can use predefined variables from the function attributes or the global ipsclass array. To use the global ipsclass array just use:


    Code:
    IPB.xxxx
       
    
    And it will convert into

    Code:
    $this->ipsclass->xxxx
    And for variables just use normal variable with dollar sign within the template bit, like the following:

    Code:
    $hello
    That will output the variable of $hello

    And for arrays use brackets, like the following:

    Code:
    {$hello[‘data’]}


    If…Else logic
    In IPB template you can’t just write “if($x == ‘1’){…..” you got to use their own tags, it is sort of like bbcode but is not bbcode. IPB kernel runs and replaces these special logic tags into proper PHP due to security.

    Here is how the if and else function looks like:

    Code:
    <if="ibf.vars['threaded_per_page'] == 10">
      html here
      </if>
      <else if="ibf.vars['threaded_per_page'] >= 100 or some_var == 'this'">
      html here
      </if>
      <else if="show['this'] > 100">
       html here
      </if>
      <else>
      html here
      </else>
    
    Note that when using <if=” on any variable or array you don’t need to put the dollar sign after I don’t know if it is a bug but this is how it runs. So this means that:

    Code:
    <if=”x == 1”>
       
      </if>
    
    Will equal to the following in PHP

    Code:
    If($x == 1)
      {
       
      }
    
    And if you do put the dollar sign like the following you may have errors.

    <if=”$x == 1”>
    </if>

    Hence:


    Code:
    If($$x == 1)
      {
       
      }
       
    
    So it would be bad to use that, but that doesn’t mean it would work on any other variables following it, example:

    Code:
      <if=”hello == 1 && $test == 2”>
      </if>
    
    Hence:


    Code:
    If($hello == 1 && $test == 2)
      {
       
      }
    
    And the following is not going to work:


    Code:
    <if=”hello == 1 && test == 2”>
      </if>
    
    Hence:


    Code:
    If($hello == 1 && test == 2)
      {
       
      }
    
    And the rest is just practice 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 TAZ-guide[at]icelabz.net
    If you want smaller tips and guides check my blog at http://blog.icelabz.net, I would appreciate any comments given.

    All text is copyrighted to Bhavesh Ramburn. This guide is only to be republished within TAZ 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

    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.