Changing width of body and modifying grey bar...

[aaelghat]

Hi, My cart in progress is located here...

http://lifeonrecord.com/cart/index.php?main_page=login

The site I'm trying to match up the look to is located here...

http://www.lifeonrecord.com/prototype/signup.htm

The header on the cart is all set (except for the links behind the buttons, but I know how to fix those).

What I want to do is have the light blue background of the box in the second link be the background to the register feature of the cart. I believe it's just a one cell table with a blue background.

I also want to remove the grey bar in the cart that has the "Home" and "Log In" links. I thought that was the breadcrumb feature and tried to remove it from the Admin panel, but that wasn't it.

Finally, I need to adjust the width of the body of the content so it's narrower and fits inside the blue table.

Thanks in advance for the words of wisdom...

[kobra]

Looking at your image and your source you have not applied your header or logo within the cart functions:

<div id="headerWrapper">
<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
    <ul class="back">
    <li><a href="http://lifeonrecord.com/cart/">Home</a></li>
    <li><a href="http://lifeonrecord.com/cart/index.php?main_page=login">Log In</a></li>
</ul>
</div>
<div id="navMainSearch"></div>
<br class="clearBoth" />
</div>
<!--eof-navigation display-->
<!--bof-branding display-->
<div id="logoWrapper">
<!--     <div id="logo"></div> -->
</div>
<br class="clearBoth" />
<!--eof-branding display-->
<!--eof-header logo and navigation display-->

Your image, while 950px wide has white wings and the blue is only about 900px wide...I would crop the wings off and/or stretch/fill the wings with color - your choice. Then include it within the cart header div so that it all centers up.

For the bar find this in your stylesheet.css file and change the background color to #DFE6FB to match:

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
	margin: 0em;
	background-color: #abbbd3;
	background-image: url(../images/tile_back.gif);
	padding: 0.5em 0.2em;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	}

If you include your image into the logoWrapper it is currently 111px high so adjust this in your stylesheet:

#logoWrapper{
	background-image: url(../images/header_bg.jpg);
	background-repeat: repeat-x;
	background-color: #ffffff;
	height:75px;
	}

Then see what is left.

[aaelghat]

Thanks a lot for your thorough reply, kobra.

I'm just hacking along with regards to html, css, and php, so I appreciate you indulging me in some newbie questions.

I didn't completely understand the part about "Looking at your image and your source you have not applied your header or logo within the cart functions". Where exactly do I need to apply them. Since the header was static, and there were alot of separate images with links, I just did some copy/paste into tpl_header.php.

For the logo, I thought since I had static references, I wouldn't have to do anything else, but it is in my custom images folder, and I changed the lines in header.php to:

define('HEADER_LOGO_WIDTH', '272px');
define('HEADER_LOGO_HEIGHT', '87px');
define('HEADER_LOGO_IMAGE', 'logo.gif');

For the last line, do I need to specify the image is in my CUSTOM directory? Where do I need to apply the header and logo into the cart functions? Do I need to do something with #logoWrapper in stylesheet.css? Do I need to point it to my image in the CUSTOM directory?

I made the other changes you suggested, and I'll get new images that eliminate the wings. There's currently a small vertical space between my header image and the grey bar. Do you know how to get rid of that, or is there a way to get rid of the grey bar completely?

Thanks for your help, and sorry for the newbie questions.

[kobra]

Well let me see if I can make this simple - your source is as below:

<div id="genericcontent">
  <img src="includes/templates/custom/images/signupcontenthead.gif" width="950" height="111" />
<!--AAE END-->
<div id="headerWrapper">
<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
    <ul class="back">
    <li><a href="http://lifeonrecord.com/cart/">Home</a></li>
    <li><a href="http://lifeonrecord.com/cart/index.php?main_page=login">Log In</a></li>
</ul>
</div>
<div id="navMainSearch"></div>
<br class="clearBoth" />
</div>
<!--eof-navigation display-->
<!--bof-branding display-->
<div id="logoWrapper">
<!--     <div id="logo"></div> -->
</div>
<br class="clearBoth" />
<!--eof-branding display-->
<!--eof-header logo and navigation display-->

You have created a div - div id="genericcontent" and this is outside of the provided containers for this type of content.

The blue highlighted lines indicate that you have nothing for the logoWrapper nor the logo divs being parsed.

You can reorder the tpl_header.php entries to move bof-branding display to eof-branding display inclusive up right before <!--bof-navigation display--> and name your signupcontenthead.gif to logo.gif and then you do not require your div for this and it is also within the headerWrapper div and with a bit more massaging you can include your other mast head items inside of the headerWrapper div.

Hope this makes some sense