Customizing background...not simple CSS change question...

**g0hst** · 17 Jun 2006, 04:28 PM

I need to get the entire site into a 3 cell table. The left and right sides being expandable with the page (I already know how to do this if I make a page from scratch) and the store staying in the center cell.

Does anyone know where the MAIN of all main tables is in the code? Or where I would need to go so I could add this table around/outside the store? Im very good as far as basic html and templating goes, but I dont know a lot about PHP.

Thanks for any help :)

Scott

**Kim** · 17 Jun 2006, 04:37 PM

Exactly what are you wanting to do? If you want the "shop" as a center column you can already do that with the CSS.

Code:

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

Change the width to a percentage or a fixed dimension.

**g0hst** · 17 Jun 2006, 04:52 PM

Well I want to put a shadow behind the store, and make a fade from the top, with also having a background image. Check out http://www.rillsonline.com/ I designed this with basic HTML and CSS. Having a top fade, and a textured background is what I would like to do. Here is the image of the template I designed for the store: http://www.celltrenz.biz/scott/Celltrenz_Template.JPG

So, if there is another way to make this design work besides setting up a large 3 cell table that would be great to know :)

Thanks again!

**kuroi** · 18 Jun 2006, 12:18 AM

Using a table to achieve this would be considered very poor practice nowadays. To achieve a gradient down the page, the normal approach is now to create the gradient and then take a very thin vertical slice and place it as a horizontally-repeated, top-aligned background image to the <body> tag.

To put shadows behind a centralised mainWrapper, the approach is normally to create the shadows image and take a very thin horizonal slice and set this as a vertically-repeated, centrally-aligned background image to the <body> tag.

To create a subtle patterned or textured effect, the approach is to create a small image with a perfect repeat and then tile it horizonatlly and vertically as ... a background image to the <body> tag.

To do all three, as per the site you like, is a bit greedy

, but can be done. I would do this by having a thin column just a few pixels wide that includes the repeating pattern and the vertical gradiant and would then repated this horizontally as a background image to the <body> tag. The shadow I would build into a thin horizontal image the same width as the mainWrapper <div> and used as a background image to that <div> repeated vertically.

**g0hst** · 19 Jun 2006, 07:28 PM

Yeah, I am greedy as far as designs go

I was a picky artist before I started designing websites ;)

Well that would work except that if the page gets really long the gradiant would eventually be seen again, and thats just tacky ;)

I guess for now Ill work on the shadow and fade without the textured background. Poor textured backgrounds have so much contrast on LCD monitors anyhow. Makes it look a lot busier.

Ok, so I know I can do the background fade easily enough with a solid color background for the site. This will make the shadow pretty easy too actually.

Well thank you for the help.

Is everyone really sure theres no way to setup the site in a 3 cell table?? Some ZenCart and PHP master out there has got to know how this can be done. :)

**kuroi** · 19 Jun 2006, 08:17 PM

Originally Posted by g0hst

Well that would work except that if the page gets really long the gradiant would eventually be seen again, and thats just tacky ;)

If you have only tiled horizontally, there wouldn't be a vertical repeat - instead the image would just run out. There are two ways around this. Web 2.0 sites often use fades into a background color. The alternative is to make your image so long that it will be longer than the page will ever be, which isn't as daft as it sounds because these are typically very thin images with a small file size.

Originally Posted by g0hst

Is everyone really sure theres no way to setup the site in a 3 cell table?? Some ZenCart and PHP master out there has got to know how this can be done. :)

Of course you can do it with tables. It's just considered to be very old-fashioned and bad practice to do it this way. Tables used for layout add to code weight, are less maintainable and confuse the hell out of browsers designed for people with limited or no vision.

**g0hst** · 20 Jun 2006, 11:03 AM

Originally Posted by kuroi

Of course you can do it with tables. It's just considered to be very old-fashioned and bad practice to do it this way. Tables used for layout add to code weight, are less maintainable and confuse the hell out of browsers designed for people with limited or no vision.

oh I see, this I didnt know. Ive been out of the scene for about 2 years and recently got back in, and Im still trying to catch up.

So, If I want to accurately do a shadow (one that will allow the store to expand both ways) how do I go about making the shadow for the corners without it looking bad?

**g0hst** · 20 Jun 2006, 07:39 PM

Alright.

I completely understand HOW to make this background effect work, in a standard HTML site. Ive done it on a number of different sites. The links were not just sites Im trying to copy they are my designs.

What I really need to know is detailed information about where in ZenCart do I go to do this? What file should I be editing to put a div before and after the store? Where does the store start? where does it end? I ask this because Im assuming I need a div for the left shadow, one div for the bottom shadow and one for the right shadow. This also leaves the question of how do I make the corner shadows accurate if Im not using tables?

Thanks again

**g0hst** · 20 Jun 2006, 07:52 PM

I did finally figure this out actually. tpl_main_page is where these changes need to take place.

**Kim** · 20 Jun 2006, 08:46 PM

Exactly the right answer.

Thread: Customizing background...not simple CSS change question...

Thread Tools

Search Thread

Display

Customizing background...not simple CSS change question...

Re: Customizing background...not simple CSS change question...

Re: Customizing background...not simple CSS change question...

Re: Customizing background...not simple CSS change question...

Re: Customizing background...not simple CSS change question...

Re: Customizing background...not simple CSS change question...

Re: Customizing background...not simple CSS change question...

Re: Customizing background...not simple CSS change question...

Re: Customizing background...not simple CSS change question...

Re: Customizing background...not simple CSS change question...

Similar Threads

Simple CSS question. please.

Background on CSS will not change when I replace the url.

CSS Question - Multiple Background Images

Simple CSS Question

Extremely simple question! Where is the css?

Posting Permissions