Top bar background [Archive] - Actinic Community

Runner

30-Jul-2007, 06:18 PM

I want to replace the standard top bar backround with one I have designed and saved as a GIF.

When I use the new file name in the layout it doesn't fill the entire width of the page and seems that it is being tiled. The new design is a combination of a two-colour gradient fill and text and starts to repeat at approx 75% across the page.

Also the height of the displayed background appears to be determined by the height of the company logo layout.

I may not want to use a company logo file.

How can I:

1. Set the height of the top bar background independently?

2. Make the new backgroung image fit the whole width of the page.

The table width setting is 100%.

leehack

30-Jul-2007, 06:32 PM

You provide a URL first off, so we have a chance of knowing what we are working with, there are infinite possibilities in this area, so we need you to help us help you. Sounds like a background image plus a logo is required on initial thoughts.

Runner

30-Jul-2007, 06:41 PM

I am working with trial version of catalog. I do not have a live site. I have attached GIF if that is any help.

Duncan Rounding

30-Jul-2007, 06:43 PM

Post a screen grab of it causing the problem and tell us what theme you are using.

leehack

30-Jul-2007, 06:46 PM

Offine preview on a page and a screen grab then or set up your trial hosting you get free for the trial. Should be very easy to do what you are after, all you need to do is grab a 12 px wide slice off the logo and have this as a repeating x-axis background image.

Runner

30-Jul-2007, 06:51 PM

Please forgive my ignorance. how do I do a screen grab and post it?

Duncan Rounding

30-Jul-2007, 06:53 PM

Do an offline page preview and then press alt-prtscr on the keyboard. Open a graphics program and control-v, a copy of the window will now be seen in the graphics program. Save as jpg and post.#

Lee's told you the solution. Create a slice of the common repeat and set as background repeat-x then float your logo on top of it to the left or right as needed.

EDIT - sorry for jumping in Lee.

leehack

30-Jul-2007, 06:54 PM

Oh boy Keith, you're going to have to delve into html and css shortly to do what you want. I should get yourself a bottle of whiskey or just keep things simple for the time being.

There is a button on your keyboard called something like "PrtScn", when pressed it copies what is on your screen, you then paste that into some image editing software and save it as a jpeg below 100kb in size and then you attach that file to your post in the forum.

leehack

30-Jul-2007, 07:01 PM

EDIT - sorry for jumping in Lee.
Not at all mate, i was just thinking 'glad Dunc's here, this one might be a quick exit for me, first day back, i'm struggling lol'.

All yours mate.

Runner

30-Jul-2007, 07:03 PM

Thanks here it is

leehack

30-Jul-2007, 07:15 PM

Put it in as a right aligned logo and NOT a background image, it will not repeat then.

OR specify that the background image is not to repeat, it will not do that tiling then.

Trust me, do the following, it will be the easiest for you. Create a slice of that logo, grab a 12px wide slice of the left hand side of it, save this to use as the background and put that file name in replacement for the one you have currently included. That will give you a tiling background as per the logo.

You then need to define a logo in site options for product pages AND brochure pages. The file to use for this is the file you are currently using as the background.

Runner

30-Jul-2007, 07:25 PM

If I slice the image I will lose the 'sun' in the right hand bottom corner. Also the text is part of the image. i guess it does not need to be though?

How do I tell it not to repeat the backgroung image?

leehack

30-Jul-2007, 07:27 PM

Create a slice of that logo, grab a 12px wide slice of the left hand side of it
Hence my above instruction?

Duncan Rounding

30-Jul-2007, 07:27 PM

One quick way to point you in some direction (not the most elegant but should be of use). Obviously put the style in your css file and you will also have to adapt the table, but it is a working example when used with the gif slice attached:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<style type="text/css">
#header {
background-image: url(slice.gif);
background-repeat: repeat-x;
}
</style>

</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="header">
<tr>
<td align="right"><img src="CHS_topbar_background_1.gif" width="760" height="100"></td>
</tr>
</table>
</body>
</html>

Runner

30-Jul-2007, 07:33 PM

Thanks both for your help. i do not have time to do this tonight. I will try tomorrow.