Sign in to follow this  
Followers 0

Adding more post icons


In this tutorial I will explain how to add more post icons :)

Two essential requirements:

The icons must all be the same size (I just used some emoticons to replace the default post icons) , if you do not have equal sizes it will look very messy and unspaced

Make sure you keep the ones you want in the same place (ie icon1.gif is a smile so if replacing it be aware that existing topics that had this will have the replacement)

In this tutorial am going to go from the default of 14 icons to 18 (so I am adding four) , and using some emoticons to replace the existing icons with some slightly better ones

First step is to pick your post icons, name them correctly (icon1.gif , icon2.gif etc etc) and upload them here...

[i]/public/style_extra/post_icons[/i]

So it looks like this:

[IMG]http://img.photobucket.com/albums/v294/yellow_spider/ipb_tutorials/post_icons_3_1.png[/IMG]

Another image so you can see what I have:

[IMG]http://img.photobucket.com/albums/v294/yellow_spider/ipb_tutorials/post_icons_3_2.png[/IMG]

Next step is to edit the template html to allow IPB to display them, take your time with this as its quite easy to get it wrong. Look carefully. :)

ACP > Look / Feel > Skin Manager > (edit skin) > Manage Templates / CSS > Post Screen > PostFormTemplate:

Find...

[code] <ul id='post_icons'>
<li>
<input type="radio" class="input_radio" name="iconid" value="1"<if test="posticon1:|:isset( $formData['postIconSelected']['1'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon1.gif" alt='' />
</li>
<li>
<input type="radio" class="input_radio" name="iconid" value="2"<if test="posticon2:|:isset( $formData['postIconSelected']['2'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon2.gif" alt='' />
</li>
<li>
<input type="radio" class="input_radio" name="iconid" value="3"<if test="posticon3:|:isset( $formData['postIconSelected']['3'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon3.gif" alt='' />
</li>
<li>
<input type="radio" class="input_radio" name="iconid" value="4"<if test="posticon4:|:isset( $formData['postIconSelected']['4'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon4.gif" alt='' />
</li>
<li>
<input type="radio" class="input_radio" name="iconid" value="5"<if test="posticon5:|:isset( $formData['postIconSelected']['5'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon5.gif" alt='' />
</li>
<li>
<input type="radio" class="input_radio" name="iconid" value="6"<if test="posticon6:|:isset( $formData['postIconSelected']['6'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon6.gif" alt='' />
</li>
<li>
<input type="radio" class="input_radio" name="iconid" value="7"<if test="posticon7:|:isset( $formData['postIconSelected']['7'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon7.gif" alt='' />
</li>
<li class='clear'>
<input type="radio" class="input_radio" name="iconid" value="8"<if test="posticon8:|:isset( $formData['postIconSelected']['8'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon8.gif" alt='' />
</li>
<li>
<input type="radio" class="input_radio" name="iconid" value="9"<if test="posticon9:|:isset( $formData['postIconSelected']['9'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon9.gif" alt='' />
</li>
<li>
<input type="radio" class="input_radio" name="iconid" value="10"<if test="posticon10:|:isset( $formData['postIconSelected']['10'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon10.gif" alt='' />
</li>
<li>
<input type="radio" class="input_radio" name="iconid" value="11"<if test="posticon11:|:isset( $formData['postIconSelected']['11'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon11.gif" alt='' />
</li>
<li>
<input type="radio" class="input_radio" name="iconid" value="12"<if test="posticon12:|:isset( $formData['postIconSelected']['12'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon12.gif" alt='' />
</li>
<li>
<input type="radio" class="input_radio" name="iconid" value="13"<if test="posticon13:|:isset( $formData['postIconSelected']['13'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon13.gif" alt='' />
</li>
<li>
<input type="radio" class="input_radio" name="iconid" value="14"<if test="posticon14:|:isset( $formData['postIconSelected']['14'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon14.gif" alt='' />
</li>
<li class='clear'>
<input type="radio" class="input_radio" name="iconid" value="0"<if test="posticon0:|:isset( $formData['postIconSelected']['0'] )"> checked="checked"</if> />&nbsp;&nbsp;{$this->lang->words['picons_none']}
</li>
</ul>[/code]

Replace with:

[code] <ul id='post_icons'>
<li>
<input type="radio" class="input_radio" name="iconid" value="1"<if test="posticon1:|:isset( $formData['postIconSelected']['1'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon1.gif" alt='' />
</li>
<li>
<input type="radio" class="input_radio" name="iconid" value="2"<if test="posticon2:|:isset( $formData['postIconSelected']['2'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon2.gif" alt='' />
</li>
<li>
<input type="radio" class="input_radio" name="iconid" value="3"<if test="posticon3:|:isset( $formData['postIconSelected']['3'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon3.gif" alt='' />
</li>
<li>
<input type="radio" class="input_radio" name="iconid" value="4"<if test="posticon4:|:isset( $formData['postIconSelected']['4'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon4.gif" alt='' />
</li>
<li>
<input type="radio" class="input_radio" name="iconid" value="5"<if test="posticon5:|:isset( $formData['postIconSelected']['5'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon5.gif" alt='' />
</li>
<li>
<input type="radio" class="input_radio" name="iconid" value="6"<if test="posticon6:|:isset( $formData['postIconSelected']['6'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon6.gif" alt='' />
</li>
<li>
<input type="radio" class="input_radio" name="iconid" value="7"<if test="posticon7:|:isset( $formData['postIconSelected']['7'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon7.gif" alt='' />
</li>
<li>
<input type="radio" class="input_radio" name="iconid" value="15"<if test="posticon15:|:isset( $formData['postIconSelected']['15'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon15.gif" alt='' />
</li> <li>
<input type="radio" class="input_radio" name="iconid" value="16"<if test="posticon16:|:isset( $formData['postIconSelected']['16'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon16.gif" alt='' />
</li>
<li class='clear'>
<input type="radio" class="input_radio" name="iconid" value="8"<if test="posticon8:|:isset( $formData['postIconSelected']['8'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon8.gif" alt='' />
</li>
<li>
<input type="radio" class="input_radio" name="iconid" value="9"<if test="posticon9:|:isset( $formData['postIconSelected']['9'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon9.gif" alt='' />
</li>
<li>
<input type="radio" class="input_radio" name="iconid" value="10"<if test="posticon10:|:isset( $formData['postIconSelected']['10'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon10.gif" alt='' />
</li>
<li>
<input type="radio" class="input_radio" name="iconid" value="11"<if test="posticon11:|:isset( $formData['postIconSelected']['11'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon11.gif" alt='' />
</li>
<li>
<input type="radio" class="input_radio" name="iconid" value="12"<if test="posticon12:|:isset( $formData['postIconSelected']['12'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon12.gif" alt='' />
</li>
<li>
<input type="radio" class="input_radio" name="iconid" value="13"<if test="posticon13:|:isset( $formData['postIconSelected']['13'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon13.gif" alt='' />
</li>
<li>
<input type="radio" class="input_radio" name="iconid" value="14"<if test="posticon14:|:isset( $formData['postIconSelected']['14'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon14.gif" alt='' />
</li>
<li>
<input type="radio" class="input_radio" name="iconid" value="17"<if test="posticon17:|:isset( $formData['postIconSelected']['17'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon17.gif" alt='' />
</li>
<li>
<input type="radio" class="input_radio" name="iconid" value="18"<if test="posticon18:|:isset( $formData['postIconSelected']['18'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/icon18.gif" alt='' />
</li>
<li class='clear'>
<input type="radio" class="input_radio" name="iconid" value="0"<if test="posticon0:|:isset( $formData['postIconSelected']['0'] )"> checked="checked"</if> />&nbsp;&nbsp;{$this->lang->words['picons_none']}
</li>
</ul>[/code]

I've added two extra ones to the top line (15 and 16) and two to the second line (17 and 18)

To add more (or less) , note the structure of each post icon...

[code] <input type="radio" class="input_radio" name="iconid" value="X"<if test="posticonX:|:isset( $formData['postIconSelected']['X'] )"> checked="checked"</if> />&nbsp;
<img src="{$this->settings['mime_img']}/style_extra/post_icons/iconX.gif" alt='' />
</li>[/code]

X being the icon ID, note it appears four times for each.

To force a new line, you`ll notice instead of having a...
[code]<li>[/code]

You use a [code]<li class='clear'>[/code]

... for each starting icon of that new line.

This is something I would highly recommend you try on a test board till you are happy with it as it can get messy if you get it anything wrong, its not difficult to do but you do need to watch the spacing carefully.

My end result screenshot:

[IMG]http://img.photobucket.com/albums/v294/yellow_spider/ipb_tutorials/post_icons_3_3.png[/IMG]



0 Comments

There are no comments to display.