Custom Center Block Help

[bamaster]

I'm running ZC version 1.3.5 and I'm a little stumped on how to customize this center block.

The center blocks, illustrated here is the New Products. I'd like to wrap the content in the little blue boxes like I have done with the sideboxes and footer. I see a tpl_modules_whats_new.php file, but even if I wrap that in my design, I can't seem to separate the block title... and place it within the top blue area.

I've done this before with an older version of ZC, but this version seems to be a little different... unless I am overlooking something.

Please advise.

[kobra]

I assume that you have an image for this??

This can be done from the stylesheet.css here

.leftBoxHeading, .centerBoxHeading {
	margin: 0em;
	background-color: #ffffff;
	padding: 0.5em 0.2em;
	}

you might need to separate this out like:

 .centerBoxHeading  {
	margin: 0em;
	background-image: url(..images/your_image.ext);
	background-repeat: no-repeat;
	padding: 0.5em 0.2em;
	}

.leftBoxHeading  {
	margin: 0em;
	background-color: #ffffff;
	padding: 0.5em 0.2em;
	}

[bamaster]

Thank you for your quick reply. Actually the box is built with a table, each cell having a different piece of the corner.

I didn't think of throwing this in the css... hmm, I wonder how the rounded corners would come out? I'll give it a shot.

The sideboxes and footer were easy to manipulate. Wonder why the center blocks are different?

[kobra]

Is this a fixed dimension thing or a liquid design? If fixed scrap the tables and just make it all one image and apply them all in the css. If liquid, scrap the tables in favor of something like an application of "nifty corners" for css design.

[bamaster]

Well, it's a liquid table. Here's the build:




The left and right columns are fixed. The center column is fluid... with an image background in the center-top/center-bottom rows.

I'm not sure how to css the curved corners on the bottom when the entire block is essentially one DIV.

[kobra]

Well I look at this as static, as there is no repeat applied to insure a fluid nature. As you stated the l/r are fixed and the center is one image.

I suggest that you combine the 3 elements into one and apply via the css as described changing to leftBoxHeader & right. then apply a border with padding to get the outline spaced as you want. This will be square corners for now,

You can download the NiftyZen template in the downloads section to see the code for the rounded corners that you would have to re-apply for the sidebox borders. Or Google for the term nifty corners for the raw code.

Or you can retain the current sidebox and just apply a single image to the center area. Your choice