DevFuse Forums - Tutorials: IP.Board 3 http://www.devfuse.com/forums/tutorials/category/1-ip-board-3/ Wed, 08 Sep 2010 18:49:44 +0000 1800 IP.Board (IPB) 3 tutorials and articles. Marking new PM counter in red http://www.devfuse.com/forums/tutorials/article/75-marking-new-pm-counter-in-red/
With the arrival of the 3.0.x series there was no need for this since we had a pm popup option. However as this has changed to notifications with 3.1.x, some have expressed an interest in having the pm counter to be more visible again. This is very easy to achieve. :)

A small css edit is needed, nothing more. Thanks to Morrigan for pointing me in the right direction with this.

ACP > Look / Feel > Skin Manager > (choose skin) > Manage Templates / CSS > CSS > ipb_styles.css

Find this section (its about 1/4 the way down)...
	#user_navigation #new_msg_count {
		background-color: #528f6c;
		font-weight: bold;
		font-size: 0.9em;
		padding: 3px 7px;
		top: 0px;
		left: 45px;
		position: absolute;
	}


Change the background-color line to suit.

Two quick examples with screenshots:

Red:
background-color: #ff3300;


Posted Image

Blue:
background-color: #3399ff;


Posted Image

Don't like those ? , there is a quick reference of sensible colours to choose from here > http://html-color-codes.com

You may need to re-cache the skin and / or hard fresh your board index to see the change. :)

Note: This will only effect it initially, if you have more than one message once you read one it will change back, this is intentional (and easier to do) as its intended to just highlight the initial need to check your inbox.]]> Sun, 08 Aug 2010 12:06:53 +0000 75 AndyF 1 Adding more post icons http://www.devfuse.com/forums/tutorials/article/74-adding-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> /> 
				<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> /> 
				<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> /> 
				<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> /> 
				<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> /> 
				<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> /> 
				<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> /> 
				<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> /> 
				<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> /> 
				<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> /> 
				<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> /> 
				<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> /> 
				<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> /> 
				<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> /> 
				<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> />  {$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> /> 
				<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> /> 
				<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> /> 
				<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> /> 
				<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> /> 
				<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> /> 
				<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> /> 
				<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> /> 
				<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> /> 
				<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> /> 
				<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> /> 
				<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> /> 
				<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> /> 
				<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> /> 
				<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> /> 
				<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> /> 
				<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> /> 
				<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> /> 
				<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> />  {$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> /> 
				<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]]> Sat, 07 Aug 2010 11:37:07 +0000 74 AndyF 1 Image Background in Username http://www.devfuse.com/forums/tutorials/article/73-image-background-in-username/
Posted Image
Posted Image

In your ACP, add into usergroups/Group Formatting Prefix:

<span style="font-weight:bold;border:silver solid 1px;color:#FF0000;background-image:url('http://www.xxxxxxxxxxx/forums/public/background1.gif')" >




Font-weight,border: and color: can all be edited to suit your own needs,
Hope this helps anyone else who is trying to do this

John :)]]> Fri, 06 Aug 2010 10:00:30 +0000 73 planetby 1 Hiding the latest visitors block http://www.devfuse.com/forums/tutorials/article/72-hiding-the-latest-visitors-block/
This is easy to achieve with a small skin edit.

ACP > Look / Feel > Skin Manager > (choose skin) > Manage Templates / CSS > Profiles > ProfileModern

Find (about 3/4 the way down)...
<if test="latest_visitors:|:$member['pp_setting_count_visitors']">


Change to 
<!--<if test="latest_visitors:|:$member['pp_setting_count_visitors']">


Scroll down a bit, find...
					<p class='no_messages'>{$this->lang->words['no_latest_visitors']}</p>
				</if>
			</div>
		</if>


Change to...
					<p class='no_messages'>{$this->lang->words['no_latest_visitors']}</p>
				</if>
			</div>
		</if>-->


That will hide it neatly. :)]]> Sat, 24 Jul 2010 18:24:04 +0000 72 AndyF 1 <![CDATA[Adjusting Today's Top Posters]]> http://www.devfuse.com/forums/tutorials/article/71-adjusting-todays-top-posters/
A small file edit is required. Connect via FTP.

Open /hooks/boardIndexTopPosters_**number**.php

Find...(around line 61)
'limit'	   => array( 0, 9 ),


Adjust the 9 there, taking care not to disturb the rest of the syntax or any other lines.

Save. :)

I would recommend you stay with a multiple of 3 to keep it tidy, the most common value here to replace the default of 9 is typically 6 or 3.

You will need to re-perform this edit if the hook is recached (such as an upgrade) but it will only take a moment to do so.]]> Sun, 11 Jul 2010 19:41:08 +0000 71 AndyF 1 Adusting the number of Recently Added Topics http://www.devfuse.com/forums/tutorials/article/70-adusting-the-number-of-recently-added-topics/
Connect via FTP.

Look in \admin\applications\forums\sources\classes\forums\

Edit class_forums.php, around line 2495, find...
$_topics = array_slice( $topicIDs, 0, 5 );


Adjust the 5 there to what you require (3 or 10 seems to be popular choices, although setting this too high can cause performance issues) and save, taking care not to disturb any other lines or the syntax.]]> Tue, 06 Jul 2010 11:01:51 +0000 70 AndyF 1 <![CDATA[Restoring the 'About Me' tab as default]]> http://www.devfuse.com/forums/tutorials/article/69-restoring-the-about-me-tab-as-default/
Two small files edits are needed.

Connect via FTP

Open /admin/applications/members/extensions/profileTabs/status.conf.php

Find...(about line 50)
$CONFIG['plugin_order'] = 1;


Change to...
$CONFIG['plugin_order'] = 2;


Save.


Open /admin/applications/members/extensions/profileTabs/aboutme.conf.php

Find...(about line 50)
$CONFIG['plugin_order'] = 2;


Change to...
$CONFIG['plugin_order'] = 1;


Save.


You are done. :) , two quick screenshots of before and after:

Posted Image

Posted Image]]> Mon, 05 Jul 2010 12:30:37 +0000 69 AndyF 1 Hiding Board Statistics From Guests http://www.devfuse.com/forums/tutorials/article/68-hiding-board-statistics-from-guests/
ACP > Look / Feel > Skin Manager > (choose skin) > Click grey button on right > Manage Templates / CSS >

Board Index > BoardIndexTemplate

About 3/4 the way down, find...
<div id='board_statistics' class='statistics general_box clearfix'>


Change to...
<if test="$this->memberData['member_id']"><div id='board_statistics' class='statistics general_box clearfix'>


Scroll to the end of that template, find...
</if>


Change to...
</if></if>


Save the changes and you're done :)]]> Thu, 01 Jul 2010 17:18:29 +0000 68 AndyF 1 Adding custom avatars http://www.devfuse.com/forums/tutorials/article/67-adding-custom-avatars/
Firstly, collect the avatars you wish to add (.gif, .jpg and .png are suitable, do not use .bmp) and put them into a folder each on your desktop. Name each folder appropriately. It's best not to put more than about 20 to 30 into each folder. You can name the avatars numerically or however you wish. Obviously you cannot have two with the same name in the same folder.

Posted Image

Remember you cannot use a space in the folder name. If you wish to have a space use an underscore, so for example "cats and dogs" becomes "cats_and_dogs", the underscore will not show on your board.

Connect via FTP. Look inside /public/style_avatars. By default it will look something like this:

Posted Image

The images that are just in that directory are the ones in the "Base Gallery" , you can also see the two default avatar directories present here too. You can remove those if you wish to.

Download the index.htm file you see and place a copy of it into each folder you have created on your desktop. You can see here I have added the index.htm file into the the 'dice' folder I made. Adding this file will prevent the directory being listed if someone visits it directly, and is a sensible measure to take.

Posted Image

Simply upload your newly created folders into /public/style_avatars now. The permissions should be OK, but if in doubt ensure the directories you uploaded are 755 and the avatars themselves are 644.

You can see from my example, I have simply added my new folders to the existing ones:

Posted Image

Which results in the folders being listed:

Posted Image

And finally the avatars themselves:

Posted Image]]> Sat, 26 Jun 2010 11:05:59 +0000 67 AndyF 1 Adjusting status updates limit for 3.1.x http://www.devfuse.com/forums/tutorials/article/66-adjusting-status-updates-limit-for-31x/
Connect via FTP.

Look in /admin/applications/members/sources/classes/hooks/gateway.php

Find (near the end of the file, around line 84)...
$statuses = $statuses = $this->registry->getClass('memberStatus')->fetch( $this->memberData, array( 'limit' => 10, 'status_is_latest' => 1 ) );


Change the 10 there to what you require (3 or 5 seems to be a popular choice), taking care not to disturb any of the syntax and save. :)]]> Sat, 26 Jun 2010 11:05:04 +0000 66 AndyF 1