trying to make my first stylesheet

Okay I am looking for a specific "look". I want my store background and then tables on top of it that are translucent. I searched for four hours last night for HTML code or CSS code that would enable me to achieve the right look. Finally, I resorted to my myspace page and a generator. I got this code: (HTML I think, but I pasted it into GoLive CSS doc.)

**body{ background: white url(http://houseofdiva.com/zencart/includes/templates/zcSohoSailing/images/tile_back.jpg) no-repeat fixed center top; } Table, Td{ background-color:transparent; } table table table{ background-color:transparent; background-image:url(http://img113.imageshack.us/img113/9759/screenwhite2qk.png%29; background-repeat:repeat; width:100%; border-color:000000; border-style:Outset; border-width:1px; } table table table table{ background-image:none; width:auto; } table table table table, table table table td{ border-style:none; }</Style>

**

My question is this. This code achieves what I want. Where would I put it specifically, in a CSS doc. Like a blank basic CSS page document. I think I've seen HTML in a css doc, is that correct? or not allowed? if you look at my myspace page (lame I know) you'll see the effect I'm looking for with a diff. background/colors. But the tables and the translucence with solid text is the effect.
Myspace Profile

ETA: the code when generated was this solid block, there was other myspace stuff on it that I took out. But it was just a big paragraph like this when it was gen.

Exactly which part of the page are you wanting to do this to?

I don't know Kim. LOL. You can do it to different parts of the page? I just want two main tables. Not a bunch of little ones. Then I can put text in them and maybe an image. Does that answer what you asked? :unsure:

You have a mockup of what you want the page to look like?

Yeah the link in the first post goes to my myspace page. That shows how I want the tables to be see through but not the text etc. Instead of transparency I wanted them translucent. The code I pasted actually has the correct background and table color however. The Myspace page is just an example of what I'm talking about. I only want two tables in the middle of the page. Both to equal the same width as Zen cart now, but one 25% and the other 25%. So the table on the left would be a narrower one and the table right next to it would be wider. Is that clear or confusing? I am trying to draw something in Adobe Photoshop to represent what I want the elements to look like when styled to give you a less confusing thread.

I can't see anything at the link you provided except:

** This profile is set to private. This user must add you as a friend to see his/her profile.
**

I got the same as Clyde - :wink2:

oh crap.

:blush:

profile is reset now.

:blush: :blush:

ETA: I shall be very quiet in my corner now. :P

You can do what you want without tables.

You can use CSS and "2 DIVs" to do this. translucent is not an option for a background color so you'll have to make do with transparent. You can make a semi-transparent image (either .gif or .png) for the DIVs. which may give you the look you want.

This is from Myspace

body{ background: white url(http://houseofdiva.com/zencart/inclu.../tile_back.jpg) no-repeat fixed center top; } Table, Td{ background-color:transparent; } table table table{ background-color:transparent; background-image:url(http://img113.imageshack.us/img113/9...white2qk.png); background-repeat:repeat; width:100%; border-color:000000; border-style:Outset; border-width:1px; } table table table table{ background-image:none; width:auto; } table table table table, table table table td{ border-style:none; }</Style>
<table width="90%" border="1" cellspacing="1" cellpadding="2">}

In your stylesheet make these changes:

body { background: white url(http://houseofdiva.com/zencart/inclu.../tile_back.jpg) no-repeat fixed center top;}
#boxone {margin: 0; padding: 10px; background: url(http://img113.imageshack.us/img113/9...white2qk.png) repeat; border: 1px outset #000000; width: 25%; float: left;}
#boxtwo {margin: 0; padding: 10px; background: url(http://img113.imageshack.us/img113/9...white2qk.png) repeat; border: 1px outset #000000; width: 60%; float: left;}

NB. the portion in red - its not a good idea to "hot link" graphics (make your own or download the graphic to your image folder.

Now in includes -> languages -> english -> html_includes -> YOUR_TEMPLATE -> define_main_page.php
You can add the following:

<div id="boxone">Add whatever text you wish here.!</div>
<div id="boxtwo">Add whatever text you wish here.!</div>

Try it and see how it works. Let me know.

Thank you for putting that all up! HOnestly I don't have the first clue where to put what. But I will copy that define_main_page to my custom folder and put those in there with the text blocks. I don't really know how to make a semi transparent gif. I had horrendous problems doing that with my logo and ended up scrapping it. Maybe if I have a border around it or something. It will keep it from having that whitish pixellation around the image. The other stuff goes into my Stylesheet.

I really appreciate it thanks. As soon as it's done then I will post the link.

Take a look here to see what I've set up as a test.

http://mysticmountainnaturals.com/newshop/

okay here is a link to a mock up of what I'm looking for. Actually exactly what I'm looking for minus the text needed LOL. I really wanted to learn how to create a page like this with CSS and/or html but I may just use this gif as a background for the page and put text blocks in it. I guess I can use this as a website extension of the cart. There is no way I'm going to figure out how to get a template to look like this seeing as how I cannot code a single page to do so. I just wish I could figure out the huge mystery to adding tables like this to a background image. I don't know. Anyways here it is:

Example Page

There is no way I'm going to figure out how to get a template to look like this seeing as how I cannot code a single page to do so.

With Zen Cart you don't have to do any "coding" its already there in the template files. The only place you would need to add any "code" is in includes -> languages -> English -> html_includes -> YOUR_TEMPLATE -> define_main_page.php and what you include there is mainly just text. The styling for the templates is all handled in the stylesheet.css.

As for "fine tuning" other aspects of Zen Cart the template files are clearly marked with <!-- bof xxxx --> <!-- eof xxxx --> sections that allow you to move things around (and again no "coding" necessary. Other "fine tuning" can be done from the admin control panel.

Look at it this way.

The files in includes -> languages are where the text elements of your pages are defined.

The stylesheet has IDs and Classes which help style the text elements

The files in includes -> templates are where the defined text and stylesheet elements are picked up and translated.

The translation is then picked up by various functions and output as your finished page.

Excellent outlay of that! Thank you for keeping on this thread! I really appreciate it. I know I have a lot of hours ahead of me getting proficient. But it's people like here in the forum that are my source of education so much thanks :thumbsup: