Advanced Inner Border/Image Border

We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.

Join our community!

If you're already a member please log in to your account to access all of our features:

Advanced Inner Border/Image Border
Topic Started: Feb 22 2006, 10:43 AM (15,952 Views)
Nicola	Feb 22 2006, 10:43 AM Post #1
..... Posts: 15,419 Group: Global Support Team Member #28,661 Joined: August 29, 2004 I'm Browsing With Firefox 3	Advanced Inner Border/Image Border This is a simple guide on how to get effects like those shown in the preview images, on your board. NOTE: Make sure you are putting things in the correct places. Make sure all the images you are inserting into the code is for the right position. Inner: The border that goes around the main categories and cuts off under the userlinks. Outer: The main border that goes around the entire forum, including the inner border. Inner Border (simple) This code is a simple border as seen in the preview. It is simply two tables with CSS properties to them. AdminCP ›› Board Wrapper ›› Header and Body Quote: <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" alink="#000000" vlink="#000000"> <table align="center"> <td width="750px" style="background-color: #HEX; padding: 2px 2px 2px 2px; border: 0px solid;"> <% BOARD HEADER %> <table align="center"> <td width="750px" style=" background-color: #HEX; padding: 2px 2px 2px 2px;"> <% NAVIGATION %> <% BOARD %> <% STATS %> Red: The MAIN table background colour. Blue: The INNER table background colour. Purple: The WIDTHS you wish to set for the tables. Padding: Depending on how you want your tables to look, you will need to edit the padding to suit your needs. Note that this is exactly like CSS padding. Border: The border is set to 0 in the code, but if you want to give it a simple border in the normal CSS way around the forum, set it to 1, or a higher value if you want the border thicker. Inner Image Borders Below are the codes needed to produce an image border inside normal image borders, and a brief explanation of how to make them work for you. Preview: Please note I didn't have the time to make proper image borders, so the image border preview is just me playing with Nephoria in photoshop. But you get the general idea. AdminCP ›› Board Wrapper ›› Header and Body Replace the contents of the Header and Body with the following code. Quote: <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" alink="#000000" vlink="#000000"> <center><table cellpadding="0" cellspacing="0" width="760" bgcolor="#HEX"> <tr> <td><img src="Outer top left" /></td><td width="100%" background="Outer top"></td><td><img src=" Outer top right" /></td></tr> <tr> <td background="Outer left"><img src="Outer left"/></td><td style="padding: 0px 2px 0px 0px"> <% BOARD HEADER %> <center><table cellpadding="0" cellspacing="0" width="760" bgcolor="#HEX"> <tr> <td><img src="Inner top left" /></td><td width="100%" background="Inner top"></td><td><img src="Inner top right" /></td></tr> <tr> <td background="Inner left"><img src="Inner left"/></td><td style="padding: 0px 2px 0px 0px"> <% NAVIGATION %> <% BOARD %> <% STATS %> NOTE: Make sure you realise which image you are putting into each area. AdminCP ›› Board Wrapper ›› Footer Quote: </td><td background="Inner Right"><img src="Inner right" /></td></tr> <tr> <td><img src="Inner Bottom Left" /></td><td background="Inner Bottom"></td><td><img src="Inner Bottom Right" /></td></tr></table> </td><td background="Outer Right"><img src="Outer Right" /></td></tr> <tr> <td><img src="Outer Bottom Left" /></td><td background="Outer Bottom"></td><td><img src="Inner Bottom Right" /></td></tr></table> NOTE: When adding extra codes to your footer, make sure they go before the Footer code posted here, otherwise the borders will cease working. Red: The MAIN table background colour. Blue: The INNER table background colour. Purple: The WIDTHS you wish to set for the tables. Padding: In theory the padding does not need to be edited, and should work with all image sizes. However if you find your borders are not working as well as you hoped, it is advised that you edited the padding until it looks correct.



1 user reading this topic (1 Guest and 0 Anonymous)


« Previous Topic · Skinning Documentation · Next Topic »