Jump to content


Welcome to DevFuse Forums


Sign In  Log in with Facebook

Create Account
Welcome to DevFuse Forums, like most online communities you must register to view or post in our community, but don't worry this is a simple free process that requires minimal information for you to signup. Be apart of DevFuse Forums by signing in or creating an account.
  • Start new topics and reply to others
  • Subscribe to topics and forums to get email updates
  • Get your own profile page and make new friends
  • Send personal messages to other members.
 
Guest Message by DevFuse

Tutorial info Visit support topic

  • Added on: Aug 07 2010 05:37 AM
  • Views: 3270
 


Adding more post icons

Posted by AndyF on Aug 07 2010 05:37 AM
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...

/public/style_extra/post_icons

So it looks like this:

Posted Image

Another image so you can see what I have:

Posted Image

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

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

Replace with:

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

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

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

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

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

You use a
<li class='clear'>

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

Posted Image

Powered by Tutorials 1.5.1 © 2016, by Michael McCune