Forums / Templates, Stylesheets, Page Layout / 2 questions - header and flyout menu

2 questions - header and flyout menu

Locked

Views: 654

Results 1 to 4 of 4
This thread is locked. New replies are disabled.
24 Jun 2010, 5:02 AM
#1
andi98640 avatar

andi98640

New Zenner

Join Date:
Jan 2010
Posts:
62
Plugin Contributions:
0

2 questions - header and flyout menu

I have modded apple_zen to a narrow header. I then put a body background in.

My background doesn't go into the header area so I have white space. I tried transparent but can't seem to get it working? Any suggestions would help me from banging my head against the wall.

I also embeded an swf object in the define_main_page.php
It looks great, BUT my flyout menu is behind the object. I hope to have new objects regularly. Is there a way to hard code the menu to be always on top? Or a way for the player of the swf to be int he background?

Here is my link:
Jelly Bean Fabrics

Thank you all so much. This is a great template and I am so excited to see what everybody else is doing.

24 Jun 2010, 12:32 PM
#2
tony_sar avatar

tony_sar

Totally Zenned

Join Date:
Jul 2006
Location:
Montreal, Canada
Posts:
2,276
Plugin Contributions:
0

Re: 2 questions - header and flyout menu

look in your stylesheet.css for

#headerWrapper {
background:none repeat scroll 0 0 #FFFFFF;

margin:0 auto;
text-align:center;
width:100%;
}

remove background , it should now show your background behind your header.

fly out menu looks ok with firefox .. it might have problem with IE .. but i have no IE at the moment to check things out.

24 Jun 2010, 4:52 PM
#3
andi98640 avatar

andi98640

New Zenner

Join Date:
Jan 2010
Posts:
62
Plugin Contributions:
0

Re: 2 questions - header and flyout menu

I can't get it to work. There are multiple wrappers. This is what I have:

/**
 * Main CSS Stylesheet
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license [url]http://www.zen-cart.com/license/2_0.txt[/url] GNU Public License V2.0
 * @version $Id:stylesheet.css 4813 2006-10-23 02:13:53Z drbyte $
 */
 
/* Instructions to have a narrow top header (to match the width of the main site content) can be found around line 206 (search for: #headerWrapperb )
 
/* I've included 4 color choices - apple green (default), blue, red, and grey. To change from green, simply 
comment out the green section, and uncomment the color section you want the site to be. You'll also need to 
open up includes/templates/apple_zen/css/stylesheet_header_menu.css to change the colors in the drop down menu. */

/*green 
#navMainWrapper {background:;}
#logoWrapperOuter {background:#fff;}
#navEZPagesTopWrapper {background:#D5E88F;}
#navCatTabsWrapper {background:#BBD17E;}
#navBreadCrumb {background:#BBD17E;}
body {background:url(../images/site-bg.gif) 0 9em repeat-x;/*remove this background image for narrow header, unless of course you want it there (green stripe background) */}
h3.leftBoxHeading, h3.rightBoxHeading {background:url(../images/sideboxleft.gif) no-repeat top left;}
/* eof green */

/* blue */
#navMainWrapper {background:#6C99D9; }
#logoWrapperOuter {background:#transparent}
#navEZPagesTopWrapper {background:#6C99D9; }	
#navCatTabsWrapper {background:#6084C4; }	
#navBreadCrumb {background:#6084C4; }	
body {background:url(../images/Jellyback.png) }	
h3.leftBoxHeading, h3.rightBoxHeading {background:url(../images/sideboxleft-blue.gif) no-repeat top left; }	
/*eof blue*/

/* red 
#navMainWrapper {background:#DC262E;}
#logoWrapperOuter {background:#fff;}
#navEZPagesTopWrapper {background:#DC262E;}
#navCatTabsWrapper {background:#C62122;}
#navBreadCrumb {background:#C62122;}
body {background:url(../images/site-bg-red.gif) 0 9em repeat-x;}
h3.leftBoxHeading, h3.rightBoxHeading {background:url(../images/sideboxleft-red.gif) no-repeat top left;}	
/*eof red*/

/* grey 
#navMainWrapper {background:#D5D5D5;}	
#logoWrapperOuter {background:#fff;}
#navEZPagesTopWrapper {background:#D5D5D5;}
#navCatTabsWrapper {background:#C8C8C8;}	
#navBreadCrumb {background:#C8C8C8;}	
body {background:url(../images/site-bg-grey.gif) 0 9em repeat-x;}	
h3.leftBoxHeading, h3.rightBoxHeading {background:url(../images/sideboxleft-grey.gif) no-repeat top left;}	
/*eof grey*/

/* common to all colors*/
#centerColumnOuter {background:url(../images/headerborder.gif) repeat-y;}
#centerColumnWrapper2 {background:url(../images/content_bg.gif) repeat-y 80% 0;}
/* eof color and background edits */


/* If you'd like a narrow top header (to match the width of the main content, please follow the instructions below. 
If you want the diagonal stripe background removed, you'll also need to remove that from the body tag near the top of this stylesheet. */
#headerWrappera {
width: 71em; /* change to width:71em; for narrow header*/
margin:0 auto;
text-align:center;
background:none;
}
#navMainWrapper,
 #navCatTabsWrapper, #navEZPagesTopWrapper {
width:70em; /* change to width:70em; for narrow header*/
margin:0 auto;
text-align:center;
}
#navMain {
  /* remove width:70em; for narrow header */
margin:0 auto;
}
#dropMenuWrapper {
width:100%;
background:none;
/* remove background:#929292; for narrow header*/
margin:0 auto;
height:2.18em;
position:absolute;
top:0;
left:0;
}
/* uncomment the section below for narrow header */

/*
#headerWrapperb {
background:url(../images/shadowRight.png) repeat-y 100% 0;
width:71em;
}	
#headerWrapperc {
background:url(../images/shadowLeft.png) repeat-y 0 0;
width:71em;
}
#dropMenuWrapperb {
width:71em;
margin:0 auto;
position:relative;
}	
#dropMenuWrapperc {
background:url(../images/shadowRight.png) repeat-y 100% 0;
width:71em;
margin:0 auto;
position:absolute;
left:0;
height:2.18em;
}
#dropMenuWrapperd {
background:url(../images/shadowLeft.png) repeat-y 0 0;
width:71em;
margin:0 auto;
position:absolute;
left:0;
height:2.18em;
}
*/	
/* end of changes for narrow header */

* html #centerColumnWrapper, * html #centerColumnWrapperb, * html #headerWrapperb, * html #headerWrapperc, * html #dropMenuWrapperc, * html #dropMenuWrapperd, * html #bottomLine {
background:none!important; /* Hides the transparent shadows from older versions of IE */
}
* html #centerColumnWrapper2b, *html #centerColumnOuter {
border:1px solid #999;
border-top:none;
}
*html #centerColumnOuter {
border-bottom:none;
}
#centerColumnWrapper {
background:url(../images/shadowRight.png) repeat-y 100% 0;
}
#centerColumnWrapperb {
background:url(../images/shadowLeft.png) repeat-y 0 0;
}
#bottomLine {
background:url(../images/shadowAlpha_bot.png) repeat-x top;

If you look at the flyout, home you can see there are options behind the corner. I tried to set z to -1 but still can't seem to make it work.
Is there a way to set up the fly out to be +1?

24 Jun 2010, 5:24 PM
#4
andi98640 avatar

andi98640

New Zenner

Join Date:
Jan 2010
Posts:
62
Plugin Contributions:
0

Re: 2 questions - header and flyout menu

Got the flash to work

<div style="width:480px;height:125px;position:relative;"> <div style="position:absolute; z-index:1;"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="480" height="125"> <param name="movie" value="flashmovie.swf" /> <param name="quality" value="high" /> <param name="wmode" value="transparent"> <embed src="openingcoupon.swf" quality="high" type="application/x-shockwave-flash" width="550" height="400" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> </div> <div style="position:relative; z-index:2;"> </div> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Have to include the br to bring down the products or the flash was over it.