Shifting columns

Hi!

Do you guys know how to shift the boxes downwards? As in the whole box containing the left, right and center columns.

Also, does anybody know how to insert a logo outside of the entire box? I want the logo to be at the center top, not inside the box nor as a header. (Header is inside the entire box) Aww man, I hope you guys get what I mean cause I'm confusing myself a little too!

Thanks!!! :blush:

I take it you want to put an element ABOVE the main wrapper?

Remember that a top banner can display in this position too, so if you re-code your template, bear in mind that if you choose to display a top banner, it will be influenced by any changes to your template code.

Provide a link to you site so we can see what template you are using, and then people may be in a better position to offer suggestions.

Hi, thanks for the reply!

It's https://www.smooshboosh.com :smile:

I want the logo to be above the bar with the navigations: HOME, LOGIN, Search bar.
To do that, I also have to move the entire box down to make space.

All help would be greatly appreciated! :bigups:

Poppers:

I want the logo to be above the bar with the navigations: HOME, LOGIN, Search bar.
To do that, I also have to move the entire box down to make space.

There is a header module that will shift the top navbar (home, login, search) UNDER the logo wrapper.

It's Clyde Jones' Alternative Header:

http://www.zen-cart.com/index.php?main_page=product_contrib_info&cPath=40_62&products_id=132

Oh wow, thanks! I'll go try it out now :blush:

Uh oh, I think there's a slight problem, I want the logo to blend in with the background, my logo has a transparent background so that i tcan blend in with the background image outside the boxes.

I don't think that can be achieved easily right? :(

You've tampered with the header code already, by commenting out the header logo div.

From your page source:

<!--bof-branding display-->
<div id="logoWrapper">
    <!--<div id="logo"><a href="http://smooshboosh.com/"><img src="includes/templates/template_default/images/logo.gif" alt="SmooshBoosh" title=" SmooshBoosh " width="192" height="64" /></a></div>-->
    <div id="taglineWrapper">

      <div id="tagline"></div>
    </div>
</div>
<br class="clearBoth" />
<!--eof-branding display-->

Re-instate it so we can see your logo, then we can make suggesttions

Is it okay now? I've placed back the header

Or do you need me to put up my banner instead? Sorry, I'm a newbie at this

One file you ought to take a look at is:

includes/languages/english/header.php

Make a COPY of this file, and put that copy into:

includes/languages/english/CUSTOM/

(you will need to create the folder "CUSTOM" first.)

Now that you have that header.php file in your CUSTOM folder, open it for editing:

You will see:

// added defines for header alt and text
  define('HEADER_ALT_TEXT', 'Powered by Zen Cart :: The Art of E-Commerce');
  define('HEADER_SALES_TEXT', 'TagLine Here');
  define('HEADER_LOGO_WIDTH', '192px');
  define('HEADER_LOGO_HEIGHT', '64px');
  define('HEADER_LOGO_IMAGE', 'logo.gif');

(You can change contents of HEADER_ALT_TEXT to your own text.)

If you don't want the TagLine text, remove the string, so you have:

define('HEADER_SALES_TEXT', '');

(Make sure to retain the two single quote marks shown in RED above.)

Next, make the necessary adjustments to the logo width and height values. (These should match the values of YOUR OWN logo)

Next, make sure the NAME of your logo image is inserted where you see "logo.gif".

(It may be that your logo is already called "logo.gif", in which case leave it alone.)

You say your logo has a transparent background? Therefore it must be a GIF or PNG as JPG cannot have a transparent component.

Replace the zencart logo.gif, with your logo.

This image will go to:

includes/templates/CUSTOM/images.

Then I'll take another look at your page...

Okay done, but the image still doesn't blend in with the background. It's in PNG format by the way

Poppers:

Okay done, but the image still doesn't blend in with the background. It's in PNG format by the way

No, it won't (yet), until a few further adjustments are made...

Let me look at what the current image looks like...

In your stylesheet, you are referencing your body background image via a remote URL.

background-image:url(http://i412.photobucket.com/albums/pp209/smooshboosh/cutebg3.png);

Technically, there's no problem with this, but if that other site removes or changes the image, you'll have no background. Better to grab a COPY of that image and store it in:

includes/templates/CUSTOM/images/cutebg3.png

Then reference it like this:

background-image:url(../images/cutebg3.png);

To make your body background image visible in the logoWrapper, find the following in your stylesheet.

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;
	}

Directly UNDER that, put:

#logoWrapper {
 background: transparent;
 }

(OKAY... small problem... above does not work yet...)

I've pasted the code you gave but it doesn't seem to work :no:

Here's what I did:

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
}
#logoWrapper {
background: transparent;
}

Edit:Yeah, it doesn't work, hmm...

OK, remove that declaration from the stylesheet...

There is one other option that WILL work, but it will require you to change the WIDTH of your logo (smoosh 2.png) (and your mainwrapper width) to 776 pixels.

(By the way... your logo NAME - smoosh 2.png - has a SPACE in it... You should re-name it to smoosh2.png (no letter spaces).

When you change smoosh 2.png to have a width of 776px, find the following in the stylesheet...

#mainWrapper {
	background-color: #ffffff;
	text-align: left;
	width: 750px;
	vertical-align: top;
	}

Change to

#mainWrapper {
	background-color: #ffffff;
	text-align: left;
	width: 776px;
	vertical-align: top;
	}

Then, find this:

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;
	}

Then add this UNDER it:

#headerWrapper {
background-image: url('http://i412.photobucket.com/albums/pp209/smooshboosh/cutebg3.png');

(again, here's the full remote path to that bg image... better to get a local copy, as indicated previously).

NB... you will have to make the following change to your header.php in the language files:

  define('HEADER_LOGO_WIDTH', '776px');

The REASON why you must change the width is that the RELATIVE ASPECT RATIO of that BG image is inconsistent with a width of 750px. You must make the width an absolute multiple of the BG image width to get it to TILE properly.

My banner has to be redone to make its width 776 right?

OH!!! okay I got it, just have to change this:

/*wrappers - page or section containers*/
#mainWrapper {
	background-color: #ffffff;
	text-align: left;
	width: 776px;
	vertical-align: top;
	}

to

/*wrappers - page or section containers*/
#mainWrapper {
	background-color: #transparent;
	text-align: left;
	width: 776px;
	vertical-align: top;
	}

THANKS SO MUCH FOR YOUR HELP FAIRE!!! you're a really helpful person! :hug:

Okay, now I have to figure out how to move the Home,login, search button to the bottom of the banner. I tried using the codes you gave me previously but it doesn't seem to work or I might have done something wrongly

Sorry... one more thing in the stylesheet...

You must force the TILING of the bg images to be from the centre, so, add the bits in RED:

body {
	margin: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 62.5%;
	color: #000000;
	background-color: #fff;
background-image: url('http://i412.photobucket.com/albums/pp209/smooshboosh/cutebg3.png');
background-position:center center;
	}

and

#headerWrapper {
background-image:url(http://i412.photobucket.com/albums/pp209/smooshboosh/cutebg3.png);
background-position:center center;

Hmm, I thought only the banner part would be transparent?

Sorry...

look for

/*wrappers - page or section containers*/
#mainWrapper {
    text-align: left;
    width: 776px;
    vertical-align: top;
    } 

Change to

/*wrappers - page or section containers*/
#mainWrapper {
    background-color: #ffffff;
    text-align: left;
    width: 776px;
    vertical-align: top;
    }