Customizing header and logo [Archive]

Joeychgo

08-23-2005, 09:50 PM

Its actually pretty easy. I have a similar header on my sites (except this one) Ill use my header at www.lincolnvscadillac.com (http://www.lincolnvscadillac.com) as an example.

First you need a graphic. 800 x 100 or so. The center area needs to be uniform horizontally.

Take that graphic and cut it into 3 pieces. a Left side, a Right side and a sliver about 5 pixels wide taken from the center.

Here is what you get:

Left Side:
http://www.lincolnvscadillac.com/images/lvc_header_left.jpg

Right Side:
http://www.lincolnvscadillac.com/images/lvc_header_right_2.jpg

Slice: (this is your background)
http://www.lincolnvscadillac.com/images/lvc_header_bg.jpg

Ok -- Now that you have your graphics done, and have uploaded it to your server - Here is the code you use:

</FONT>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="88" align="left" background="Path to your Background Image"><a href="Homepage URL"><img src="Path to your Left Image" width="357" height="88" border="0"></a></td>
<td height="88" align="right" background="Path to your Background Image"><a href=Homepage URL><img src="Path to your Right Image" width="299" height="88" border="0"></a></td>
</tr>
</table>

Be sure to change the image dimensions to match your particular images.

Here is the exact code I use on lincoln vs cadillac for you to compare. What I have is slightly different as I have added alt tags to the images and a fe other things - but you'll see how yours should look.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="88" align="left" background="http://www.lincolnvscadillac.com/images/lvc_header_bg.jpg"><a href="http://www.lincolnvscadillac.com"><img src="http://www.lincolnvscadillac.com/images/lvc_header_left.jpg" alt="Forum and Club for Lincoln and Cadillac owners of the Cadillac CTS, Cadillac Seville, Lincoln LS, Lincoln Mark VIII " width="357" height="88" border="0"></a></td>
<td height="88" align="right" background="http://www.lincolnvscadillac.com/images/lvc_header_bg.jpg"><a href="http://www.lincolnvscadillac.com/tech" target="_blank"><img src="http://www.lincolnvscadillac.com/images/lvc_header_right_2.jpg" alt="do it yourself car repair" width="299" height="88" border="0"></a></td>
</tr>
</table>

<FONT face="Geneva, Arial, Helvetica, sans-serif">

Thank you for visiting. This is our website archive. Please visit our main website by clicking the banner above. vBulletin FAQ is dedicated to helping the forum owner build, manage and profit from his vBulletin Forum vBulletin Web Hosting - Free skins and styles for your vBulletin - Search Engine Optimization

vBulletin FAQ Forums > Building and Managing Your vBulletin Community > Setting up and Customizing your Forum > Customizing header and logo PDA Customizing header and logo quark 08-23-2005, 02:27 PM Hi, I just installed vB and would like to customize the header and logo. I like the setup in webmastertalk.co.uk (http://www.webmastertalk.co.uk). Is it easy to implement? (extend the white background to the top, make a header table with border and filled with color.) Thanks a lot! Best regards, Jin Joeychgo 08-23-2005, 09:50 PM Its actually pretty easy. I have a similar header on my sites (except this one) Ill use my header at www.lincolnvscadillac.com (http://www.lincolnvscadillac.com) as an example. First you need a graphic. 800 x 100 or so. The center area needs to be uniform horizontally. Take that graphic and cut it into 3 pieces. a Left side, a Right side and a sliver about 5 pixels wide taken from the center. Here is what you get: Left Side: http://www.lincolnvscadillac.com/images/lvc_header_left.jpg Right Side: http://www.lincolnvscadillac.com/images/lvc_header_right_2.jpg Slice: (this is your background) http://www.lincolnvscadillac.com/images/lvc_header_bg.jpg Ok -- Now that you have your graphics done, and have uploaded it to your server - Here is the code you use: </FONT> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="88" align="left" background="Path to your Background Image"><a href="Homepage URL"><img src="Path to your Left Image" width="357" height="88" border="0"></a></td> <td height="88" align="right" background="Path to your Background Image"><a href=Homepage URL><img src="Path to your Right Image" width="299" height="88" border="0"></a></td> </tr> </table> Be sure to change the image dimensions to match your particular images. Here is the exact code I use on lincoln vs cadillac for you to compare. What I have is slightly different as I have added alt tags to the images and a fe other things - but you'll see how yours should look. <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="88" align="left" background="http://www.lincolnvscadillac.com/images/lvc_header_bg.jpg"><a href="http://www.lincolnvscadillac.com"><img src="http://www.lincolnvscadillac.com/images/lvc_header_left.jpg" alt="Forum and Club for Lincoln and Cadillac owners of the Cadillac CTS, Cadillac Seville, Lincoln LS, Lincoln Mark VIII " width="357" height="88" border="0"></a></td> <td height="88" align="right" background="http://www.lincolnvscadillac.com/images/lvc_header_bg.jpg"><a href="http://www.lincolnvscadillac.com/tech" target="_blank"><img src="http://www.lincolnvscadillac.com/images/lvc_header_right_2.jpg" alt="do it yourself car repair" width="299" height="88" border="0"></a></td> </tr> </table> <FONT face="Geneva, Arial, Helvetica, sans-serif"> quark 08-24-2005, 11:35 AM Thanks Joeychgo. It helps a lot.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35