Check out the FREE chatroom mod for IPB 3.x
  |
|
Faq - 3 Image Header & Footer
|
 Dec 6 2003, 01:57 AM
Post
#1
|
|
 All your questions are belong to us!  Group: Members Posts: 6,578 Joined: 18-April 03 From: Australia Member No.: 4,389 IPB Version: 2.0.x  |
This FAQ will help you get a 3 image header onto your forums. This will overwrite the tile_back image that was made for the default invisionboard skin.
This tutorial was made for invisionboard version 1.2+ (It's been tested on my own forums with version 1.3) Note: the code has my sizes in it and my widths please change what's in the tags of the code further on. (change the table width, height and change the image width and height) Header ################################################## Step 1.*Optional Rename your three images to: tile_back_left, tile_back, tile_back_right (.gif would be preferable) If you use your own image names you will need to customise this tutorial to fit around the file names. ################################################## Step 2. Upload these images to your style_image/#/ folder. ################################################## Step 3. GOTO: Admin CP > Skin & Templates > HTML Templates > Manage HTML > Board Index Sections > Start Category Table > Find: CODE <div class="tableborder"> <div class='maintitle' align='left'><{CAT_IMG}> <a href="{$ibforums->base_url}c={$Data['id']}">{$Data['name']}</a></div> Replace with: CODE <table cellspacing="0" width="100%" height="23"> <tr> <td width="1%"> <img border="0" src="style_images/<#IMG_DIR#>/tile_back_left.gif" width="95" height="23"></td> <td width="98%" background="style_images/<#IMG_DIR#>/tile_back.gif"> </td> <td width="1%"> <img border="0" src="style_images/<#IMG_DIR#>/tile_back_right.gif" width="95" height="23"></td> </tr> </table> <div class="tableborder"> ################################################## Step 4. GOTO: Admin CP > Skin & Templates > HTML Templates > Manage HTML > Forum Index Sections > Forum Page Header > Find: CODE <div class="tableborder"> <div class='maintitle'><{CAT_IMG}> {$data['name']}</div> Replace with: CODE <table cellspacing="0" width="100%" height="23"> <tr> <td width="1%"> <img border="0" src="style_images/<#IMG_DIR#>/tile_back_left.gif" width="95" height="23"></td> <td width="98%" background="style_images/<#IMG_DIR#>/tile_back.gif"> </td> <td width="1%"> <img border="0" src="style_images/<#IMG_DIR#>/tile_back_right.gif" width="95" height="23"></td> </tr> </table> <div class="tableborder"> ################################################## Step 5. GOTO: Admin CP > Skin & Templates > HTML Templates > Manage HTML > Topic View Section > Header > Find: CODE <div class="tableborder"> <div class='maintitle'><{CAT_IMG}> <b>{$data['TOPIC']['title']}</b>{$data['TOPIC']['description']}</div> Replace with: CODE <table cellspacing="0" width="100%" height="23"> <tr> <td width="1%"> <img border="0" src="style_images/<#IMG_DIR#>/tile_back_left.gif" width="95" height="23"></td> <td width="98%" background="style_images/<#IMG_DIR#>/tile_back.gif"> </td> <td width="1%"> <img border="0" src="style_images/<#IMG_DIR#>/tile_back_right.gif" width="95" height="23"></td> </tr> </table> <div class="tableborder"> ##################################################  ################################################## Footer ################################################## Step 1.*Optional Rename your three images to: ftile_back_left, ftile_back, ftile_back_right (.gif would be preferable) If you use your own image names you will need to customise this tutorial to fit around the file names. ################################################## Step 2. Upload these images to your style_image/#/ folder. ################################################## Step 3. GOTO: Admin CP > Skin & Templates > HTML Templates > Manage HTML > Board Index Sections > End Category Row > Find: CODE <tr> <td class='darkrow2' colspan="5"> </td> </tr> </table> </div> <br /> Replace with: CODE </table> </div> <table cellspacing="0" width="100%" height="23"> <tr> <td width="1%"> <img border="0" src="/style_images/1/ftile_back_left.gif" width="95" height="23"></td> <td width="98%" background="style_images/<#IMG_DIR#>/ftile_back.gif"> </td> <td width="1%"> <img border="0" src="style_images/<#IMG_DIR#>/ftile_back_right.gif" width="95" height="23"></td> </tr> </table> <br /> ################################################## Step 4. GOTO: Admin CP > Skin & Templates > HTML Templates > Manage HTML > Forum Index Sections > Forum Page Header > Find: CODE </table> <!--IBF.FORUM_ACTIVE--> <div align='center' class='darkrow2' style='padding:4px'>{$ibforums->lang['showing_text']}{$ibforums->lang['sort_text']} <input type='submit' value='{$ibforums->lang['sort_submit']}' class='forminput' /></div> </div> </form> <br /> Replace with: CODE </table> <!--IBF.FORUM_ACTIVE--> <div align='center' class='darkrow2' style='padding:4px'>{$ibforums->lang['showing_text']}{$ibforums->lang['sort_text']} <input type='submit' value='{$ibforums->lang['sort_submit']}' class='forminput' /></div> </div> </form> <table cellspacing="0" width="100%" height="23"> <tr> <td width="1%"> <img border="0" src="style_images/<#IMG_DIR#>/ftile_back_left.gif" width="95" height="23"></td> <td width="98%" background="style_images/<#IMG_DIR#>/ftile_back.gif"> </td> <td width="1%"> <img border="0" src="style_images/<#IMG_DIR#>/ftile_back_right.gif" width="95" height="23"></td> </tr> </table> <br /> ################################################## Step 5. GOTO: Admin CP > Skin & Templates > HTML Templates > Manage HTML > Topic View Section > Footer > Find: CODE <!--IBF.TOPIC_ACTIVE--> <div class="activeuserstrip" align="center">« <a href='{$ibforums->base_url}showtopic={$data[TOPIC]['tid']}&view=old'>{$ibforums->lang['t_old']}</a> | <strong><a href='{$ibforums->base_url}showforum={$data['FORUM']['id']}'>{$data['FORUM']['name']}</a></strong> | <a href='{$ibforums->base_url}showtopic={$data[TOPIC]['tid']}&view=new'>{$ibforums->lang['t_new']}</a> »</div> </div> <br /> Replace with: CODE <!--IBF.TOPIC_ACTIVE--> <div class="activeuserstrip" align="center">« <a href='{$ibforums->base_url}showtopic={$data[TOPIC]['tid']}&view=old'>{$ibforums->lang['t_old']}</a> | <strong><a href='{$ibforums->base_url}showforum={$data['FORUM']['id']}'>{$data['FORUM']['name']}</a></strong> | <a href='{$ibforums->base_url}showtopic={$data[TOPIC]['tid']}&view=new'>{$ibforums->lang['t_new']}</a> »</div> </div> <table cellspacing="0" width="100%" height="23"> <tr> <td width="1%"> <img border="0" src="style_images/<#IMG_DIR#>/ftile_back_left.gif" width="95" height="23"></td> <td width="98%" background="style_images/<#IMG_DIR#>/ftile_back.gif"> </td> <td width="1%"> <img border="0" src="style_images/<#IMG_DIR#>/ftile_back_right.gif" width="95" height="23"></td> </tr> </table> <br /> ##################################################  ################################################## Remember to customise this code with your own width and height; i used my sizes in this! What ibplanet would look like if they used this tutorial and my images!  Preview An online example of this what this tutorial will turn out like is my very own site  http://www.onlinediscussion.net/ ################################################## A frequently asked question on this frequently asked question: Where's my category/board statistic text!? Answer: I've removed it  If you want it back... you'll have to do this...GOTO: Admin CP > Skin & Templates > HTML Templates > Manage HTML > Board Index Sections > Start Category Table > Find: CODE <table cellspacing="0" width="100%" height="23"> <tr> <td width="1%"> <img border="0" src="style_images/<#IMG_DIR#>/tile_back_left.gif" width="95" height="23"></td> <td width="98%" background="style_images/<#IMG_DIR#>/tile_back.gif"> </td> <td width="1%"> <img border="0" src="style_images/<#IMG_DIR#>/tile_back_right.gif" width="95" height="23"></td> </tr> </table> <div class="tableborder"> Replace With: CODE <table cellspacing="0" width="100%" height="23"> <tr> <td width="1%"> <img border="0" src="style_images/<#IMG_DIR#>/tile_back_left.gif" width="95" height="23"></td> <td width="98%" background="style_images/<#IMG_DIR#>/tile_back.gif"><{CAT_IMG}> <a href="{ibf.script_url}c={$Data['id']}">{$Data['name']}</a></td> <td width="1%"> <img border="0" src="style_images/<#IMG_DIR#>/tile_back_right.gif" width="95" height="23"></td> </tr> </table> <div class="tableborder"> Put some font tags (e.g. span tags) to change the colour, centre, etc. around this code: CODE <{CAT_IMG}> <a href="{ibf.script_url}c={$Data['id']}">{$Data['name']}</a> Or put it back to maintitle (the style). But remember to configure your .maintitle style in your style sheets! Do this in Start Board Statistics Table aswell! ################################################## -------------------- |
 |
 
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 18th March 2010 - 06:55 PM |
|
Search Engine Keywords
|