PDA

View Full Version : Customization of Header & Background Modern Flyout Desig


tiki girl
6th Mar 2006, 09:51 AM
I need help customizing my header for my bar store - www.homebargear.com The header is not even with the other border. The header was uploaded as jpeg file with dimensions of 755 x 155. When I checked on it after it was published the size decreased to 683 x 140. What code would I need to change to fix this? I would also like to change the color of my background (outside of the table) from blue to black. Where would I go to change this?

P.S. I am using the Modern - Style - Flyout Design
KarenMac
6th Mar 2006, 11:18 AM
Joan,

I believe youd have to upload a background patch of black and then call for it in your page.html, I beleive that would change it for the header as well. I use that template as well.
You need to put it in this area here between the head statements:


<html>

<head><TEMPLATE FIELD="OUT_PAGETITLE">
</TEMPLATE>

<title>$$VALUE$$</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<meta NAME="template-id" CONTENT="t95">
<meta NAME="source-name" CONTENT="page.html">
<TEMPLATE IMPORT="designspec.html">
</head>


just before the </head> is where i would start, you can also try a statement of <bgcolor="000000">

Ive done alot of work on this template but that wasnt one of them. For the actual header size you would have to go into your header html, however, if you do that keep in mind that it will throw the size of the template off if you make it bigger than the specs call for. The template sizes it and you could try changing that but if the background is all black anyway then it should be ok.

Karen
tiki girl
7th Mar 2006, 09:47 AM
Thank you - I have gotten the background changed but am still having a problem with the header. The background color did not change in this area... Any thoughts???
KarenMac
7th Mar 2006, 10:37 AM
Joan, go into header html and do a similar statement, or refer to the background patch you uploaded.

Karen Mac
KarenMac
8th Mar 2006, 08:35 AM
Joan,

I see you didnt get the header changed.




<TEMPLATE FIELD="OUT_HEADER">$$VALUE$$</TEMPLATE>
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
var attributes = "name.fill.color=" + secondaryText;
attributes += "&stage.color=" + secondaryColor;
attributes += "&name.dropshadow.color=" + myTopTabs;
drawHeader(false, "", attributes, "/images/site/t95/en/images/header.img" width="700"
height="122");</SCRIPT>



try calling for your header PICTURE where I have hilighted it in red, but USE the same numbers dont change the width or it will knock the whole template out of line.
"http://www.yoursite.com/uploaded/yourheaderpicture.jpg"

See if that works.

Karen
tiki girl
8th Mar 2006, 05:44 PM
Hi Karen
I am still having problems. I have been working on this all day trying to customize. Trying to change the background color and making the header a link. I believe part of the problem is the template I am using so I have copied the existing code. Maybe we can figure this out together. I have tried to place the code in several different places without success. I had a small success making the header a link, however, it increased the size of the header area. By the way, I looked at the code you gave me but it doesn't match up with the code I have in my template. I am about to give up... Frustrated!!!





<table width="100%" cellpadding=0 cellspacing=0 border=0>
<tr>
<td width="1%"></td>
<td width="99%">
<TEMPLATE FIELD="OUT_HEADER">$$VALUE$$</TEMPLATE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="/so4/internal/common/en/headers/mappings/alpha.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
myServer = window.location.host;

if (headerImage != ''){
headerImage = makeImageURL(headerImage);
headerImage = "logo.image.url=" + headerImage + "&title.width.max=680" + "&byline.width.max=680" + "&thetext.width.max=680" + "&";
} else {
headerImage = "spacerLogo.width=1&spacerText.width=50&title.width.max=680&byline.width.max=680&thetext.width.max=680&";
}

if (headerName != ''){
headerName = "title.text=" + headerName + "&";
} else {
headerName = "title.text=&header.width.max=680&";
}

if (headerText != ''){
headerText = "thetext.text=" + headerText + "&";
} else {
headerText = "thetext.text=&header.width.max=680&";
}

if (headerByline != ''){
headerByline = "byline.text=" + headerByline + "&";
} else {
headerByline = "byline.text=&header.width.max=680&";
}

var myHeader = '';
document.write(myHeader);

</SCRIPT>

</td>
</tr>
</table>
KarenMac
8th Mar 2006, 06:35 PM
Joan

Heres part of the sticky on making your header image a hyperlink


Quote:




<TABLE WIDTH="100%" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>

<TD ALIGN="CENTER">

<A HREF="http://www.woodentoys-and-more.com">

</A> </TD></TR></TABLE>






You want this to take the place of the code that is there so highlight it and paste this code over it. Make sure you have the name of your previously uploaded header file exact.

Now name this file a different name. Save it to desktop, and upload. Preview and if it's what you want, publish. If not, upload the first file you saved.

Remember, unless your header is an image, this won't work.
_________________


I hilighted it red...and change this bit on your template..




if (headerImage != ''){
headerImage = makeImageURL(headerImage);
headerImage = "logo.image.url=" + headerImage + "&title.width.max=680" + "&byline.width.max=680" + "&thetext.width.max=680" + "&";
} else {
headerImage = "spacerLogo.width=1&spacerText.width=50&title.width.max=680&byline.width.max=680&thetext.width.max=680&";
}


try changing those bits in red to 700 and see if that doesnt max out your header image.

Karen Mac
tiki girl
10th Mar 2006, 04:34 AM
I tried changing to 700 but it didn't work. I have finally decided to give up as I have put in 3 days of work with little to no results. I am guessing the problems are occurring due to this particular template. I truly appreciate your time and effort on my behalf.
Shoshana
10th Mar 2006, 04:55 AM
Joan, I'm coming late to this discussion and don't know what you have tried but one thing you could do is change the header color to black. That way the header would just fade into the black on the right side.

Have you clicked 'Image only' in the header/footer area? Shouldn't make any difference in customization but sometimes it does.
KarenMac
10th Mar 2006, 07:56 AM
Sho,

She tired that. I cant do it on my store without messing everything up because i have so much customization in there now its NOT funny. We got the body to turn black but it didnt change the header. The headache with this template is that its a series of nested tables, and if you dont alter the RIGHT table, nothing happens or everything disappears.

<edit> Im scared to tell her to delete the whole header file and rewrite it fresh from html to just stick the picture in there.
Karen
KarenMac
10th Mar 2006, 08:12 AM
Joan,

I just changed your file did you try this?






<body bgcolor="#000000">
<table width="100%" cellpadding=0 cellspacing=0 border=0>
<tr>
<td width="1%"></td>
<td width="99%">
<TEMPLATE FIELD="OUT_HEADER">$$VALUE$$</TEMPLATE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="/so4/internal/common/en/headers/mappings/alpha.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
myServer = window.location.host;

if (headerImage != ''){
headerImage = makeImageURL(headerImage);
headerImage = "logo.image.url=" + headerImage + "&title.width.max=680" + "&byline.width.max=680" + "&thetext.width.max=680" + "&";
} else {
headerImage = "spacerLogo.width=1&spacerText.width=50&title.width.max=680&byline.width.max=680&thetext.width.max=680&";
}

if (headerName != ''){
headerName = "title.text=" + headerName + "&";
} else {
headerName = "title.text=&header.width.max=680&";
}

if (headerText != ''){
headerText = "thetext.text=" + headerText + "&";
} else {
headerText = "thetext.text=&header.width.max=680&";
}

if (headerByline != ''){
headerByline = "byline.text=" + headerByline + "&";
} else {
headerByline = "byline.text=&header.width.max=680&";
}

var myHeader = '';
document.write(myHeader);

</SCRIPT>

</td>
</tr>
</table>
Shoshana
10th Mar 2006, 11:47 AM
I had to completely change the header file on RR Hood Gift Baskets to get the mess that was in there out and to match up the background color.

I'm not saying do this with this template but I know it can be done.

NY Bar Store completely rewrote his nav bar!
tiki girl
10th Mar 2006, 03:31 PM
Just tried to change the header body again using <body bgcolor="#000000"> that didn't work. Back to the drawing board.
KarenMac
10th Mar 2006, 04:15 PM
Joan,

Try it without the word body. We can just replace your header html with the picture too.

just type in.
<head>
call your pic and make your link here...make sure your width =700 max or your template will be crazy

</head>
save as header.html. Worst it could do is NOT work.

Karen
tiki girl
29th Sep 2006, 09:19 AM
Well, I finally figured out how to customize the header for Modern Style Flyout Design. I discovered that the background that I was trying to get rid of was within a table and then the template was using a background image. I am posting the code in case someone else would also like to change their header.

You need to scroll down to the <New HTML FOR t168>
Change background color - I chose white
<td valign="top" width="96%" bgcolor="#ffffff">
Remove this code to take out the background image underneath your logo.
background="/so4/internal/site/t168/en/images/header_bg.jpg"


To remove the image above logo area (top right corner-dots)

<TR><TD align="right"></TD>
</TR>
(You may also want to adjust the cellspacing from cellspacing=0 to cellspacing=3 or whatever you like. )

To customize you need to go into page.html and product.html

Joanie