Trying to import custom title image and 2 more images
 

I am using skyblue template. How do I replace the default title with my custom title image (centered) and 2 images (1 at left top and 1 at right top) i.e. where and how in the css code do I add these 3 png files (or is there an interface)?

center image - 504X360 pixels
top left image - 610X472 pixels
top right image - 610X472 pixels


My site is - www.travelchronicles.org

It should be in the header template, you can find that through the AdminCP > Styles & Templates > Style Manager > All Style Options

Or Style Manager > Edit Templates > Header

Once there just search out the image :)

I added my left image "tell.png" like this.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div align="left"><a name="top" href="index.php"><img src="$stylevar[imgdir_misc]/tell.png" alt="" border="0"></a></div></td>
</tr>
</table>

It increased my padding (I believe) 10 fold. How do I reel it back in so, my header spacing is not gigantor? Also, how would I add my center and right image as these don't already exist in the css header.

You can set an ID or Class for their divs to give them custom CSS.


Then to the CSS parts at the bottom of the "all style options" section:


and whatever CSS you may need, since now the only CSS that will apply to those 3 images will be whatever you put in the second bit of code.

This is what I'd do, I'm sure there might be other, better ways to do it, though :P

You lost me. Can you give me an example how you would code it and where would you put the code?

--------------- Added [DATE]1298508041[/DATE] at [TIME]1298508041[/TIME] ---------------

okay, i see the code now (I was logged out). I added the divs in the header and the padding in the additional css definitions block. Now how do I get my padding to shrink up?

--------------- Added [DATE]1298508391[/DATE] at [TIME]1298508391[/TIME] ---------------

I changed my padding but it did not take:

#headerleft
{
padding:1px 1px 1px 1px;
}
#header
{
padding:1px 1px 1px 1px;
}
#headerright
{
padding:1px 1px 1px 1px;
}

firstly, if it's all just going to be 1px, you don't need to denote all 4.

If you think something else is affecting your CSS, you can add !important to the tag, which tells the browser to ignore every other style but this for this item.

Though I don't really know how your code is set up, so I can't really see what's going on :P

Also, sorry, I think you should add <td> wrapping to all 3 images, I may have forgotten that

I modified those 3 things and it brought the images from diagonal to side by side, but just still need to get them closer. This is a fresh install of 3.8.6, brand new.

--------------- Added [DATE]1298563166[/DATE] at [TIME]1298563166[/TIME] ---------------

What code would you like to see. Here is my Header/Headerinclude code and Additional CSS Definitions:








--------------- Added [DATE]1298593094[/DATE] at [TIME]1298593094[/TIME] ---------------

played around with the code a little to my dismay, it got worse (see travelchronicles.org).