Adding wrappers to the center column

[mejobloggs]

Hi, sorry, probably been asked before, but I havn't found the answer in my searchings.

I am wanting to stick two div's around, or inside the main/middle table where the main content goes.

Any ideas?

Thanks.

[mejobloggs]

Sorry for the double post. Ignore the other one, and use this one. Thanks.

[kobra]

What are these div's for? if this is the main page you can insert most any thing into the define main page through the admin page editor.

Try to explain in more detail what it is you are attempting to acheive.

[mejobloggs]

Thanks for the reply. What I am trying to do is apply an image border to the top and left of the main content table.

I am applying the images through css background, and therefore need elements to attach the backgrounds to. As part of the border, I also need a top left corner.

So for the main content table I need a total of 3 elements. The table itself, plus two div's surrounding it (or surrounding the content inside).

Understand? Or do I need to show an example?

[kobra]

If I get you correctly, you want to add a image/border to the center content box.

If so there is already a div for it and without actually doing it I think that it is one of these depending if you want it around the content or inside the center container.

.centerBoxContents
.centerColumn
.centeredContent

and in the same fashion as for other images applied in the css you would do something like this:

.centerBoxContents   {
	margin: 0em;
	background-image: url(../images/your_image.gif);
	background-repeat: no-repeat;
	background-color: #FFFFFF;
        vertical-align: top;
        float: left;
	}

or some sembalance of this that produces the desired effect. as a background you can then float other items over it if desired.

Is this what you had in mind or did I fully miss what you posted?

[AlexBlom]

G'day Guys,

Im the other designer on this project.

Here is the zencart I am having a problem with: http://headsonic.mediadiseno.com/ (still fixing up GUI etc)

As you can see, there is no 'center' elements anywhere.

I have applied the borders so far by putting one on the right of the leftside, and one on the #contentMainWrapper.

But as you can see, there is a little join mark at the top left. I want to add a corner there to remove the join.

Usually I would do something like this:

<div id="leftborder">
<div id="topborder">
<div id="mainContent"><!--The corner would be applied to #mainContent, and then the text would go in here--></div>
</div>
</div>

Any ideas?

Thanks

[kobra]

Zencart is based on a left center and right layout. as you have done one can make it a 2 column layout either with left or right column remaining.

The center is still defined as center in the code and the right is disabled in your site.

In the css find .centerColumn and separate it from the group and try this and see if it does not produce the result displayed on your site. Of course adjust the color & width to suit.

.centerColumn {
	border-left: 5px solid;
        border-top: 5px solid;
        border-bottom: 5px solid;
	border-color: #9B11A1;
	}

This should look seamless in the corners...of course comment out what you have done so far as this will replace it

[mejobloggs]

No no... centerColumn does not exist anywhere in the html, so I can't apply styles to it.

Afaik in my confused state.

[kobra]

Sorry:

.centerColumn {
	background-color: #FFF0F5;
	border: 1px solid;
	border-color: #9B11A1;
	}

This works on a clean install and places a 1px solid border around the center content area. As you have added other things I can not attest that you have not done something that precludes this from applying correctly. You could setup another template based on the template default files and switch to it to see that it does indeed work and determine what you might have done to interfere with the default functions.

[gjh42]

As kobra says, something you have done, probably with your template, has replaced all the standard Zen Cart center column content structure with (apparently) a collection of unlabeled tables and some divs.

To put your shadow effect in, you can (in tpl_main_page.php) wrap two divs arount the center area, from just above the "<td valign="top">" above the breadcrumbs to just above the "if(COLUMN_RIGHT_STATUS..." line.
In the first one you can put your left side image, something like a 5x5px bite of shadow, with background-position: top left; and background-repeat: repeat-y;.
In the second one you can put the whole top shadow image with the top left corner-turning, say 5px h x 1000px w, with background-position: top left; and background-repeat: no-repeat;.

Or, if you can be content with a standard edge, use one div with border-style: inset, none, none, inset; and color/width as desired.

PS - You can set $flag_disable_right = true in tpl_main_page.php and eliminate even the shred of html output about it.