Newbie - Need Help with Custom Template Design!

[MedicineTreeMan]

Hello,

I have followed the instructions on creating a custom template and folders located here .
https://www.zen-cart.com/tutorials/i...hp?article=142

Now, my question is: How can I edit the design/custom template of my site on Dreamweaver. Which files do I edit on dreamweaver?
- I am new to web design but I feel if I can get the graphic files into dreamweaver I will be able to edit them the way I need them.

Please ask me to be more specific if needed. Thanks Fam.

Ken

[kobra]

How can I edit the design/custom template of my site on Dreamweaver.

Dreamweaver is meant for html editing and ZenCart is php...
There are not "pages" as defined for html that you can edit

https://www.zen-cart.com/tutorials/i...hp?article=288

Also see available free starting templates here

http://(sorry, site offline)/

[rstevenson]

Go ahead and use DW if you want, if you're comfortable and fast with it, to get the look you want. But know that the result, as kobra says, cannot be directly used in Zen Cart.

In effect you've created in DW a picture of your site. You could do the same just by using Photoshop if you wished. But once you've done that in either program you'll still have to set that aside (got a big screen, I hope) and recreate that look in Zen Cart by adjusting - mostly - the stylesheet, and - as little as possible - the php code.

It takes some head banging to find where to do everything, but the Tutorials/FAQs are your friend. And so are we.

Rob

[tony_sar]

majority of ZC styling are done through Style sheet ..
problem for visual designers and DW , is the fact , that ZC needs to load many files dynamically . thats Header, Footer, centre box , and side boxes.

if you have latest DW, you can launch index.php of zencart and use your live view and live code to change things in zc style sheet .

you can use DTSS ( design time style sheet ) to apply style to your give pages.

or even more dirtier . is to use your browser , navigate to zc page and save the html source of that page . and open it in your DW and modify and style your page . once happy , you can export that style

[MedicineTreeMan]

Go ahead and use DW if you want, if you're comfortable and fast with it, to get the look you want. But know that the result, as kobra says, cannot be directly used in Zen Cart.

In effect you've created in DW a picture of your site. You could do the same just by using Photoshop if you wished. But once you've done that in either program you'll still have to set that aside (got a big screen, I hope) and recreate that look in Zen Cart by adjusting - mostly - the stylesheet, and - as little as possible - the php code.

It takes some head banging to find where to do everything, but the Tutorials/FAQs are your friend. And so are we.

Rob

Well,

The main things I want to do for starters is :
1. Add an image to background off all pages. Same image.
2. Change tables and remove lines ( i would like to make tables
transparrent to let the background image take over.

Sorry if this might seem repetitive to you all, but i am trying to learn CSS and PHP and I barely know html.

Thanks

[afo]

Adding a background image is done in the stylesheet.

This is a sample from the stylesheet in use on the Fan Odyssey site in my sig. Note the lines I highlighted in red.

/*wrappers - page or section containers*/
#mainWrapper {
	background-color: #000000;
  background-image: url('../images/space011.jpg');
	text-align: left;
	width: 100%;
	vertical-align: top;
	}

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

#logoWrapper{
  background-image: url('../images/space011.jpg');
	background-repeat: repeat-x;
	background-color: #000000;
	height:110px;
	width: 100%;
	}

[rstevenson]

As for changing tables and removing lines, it sounds like that too is in the stylesheet, though to be sure I'd need to actually see what you've got and how you want it to look. Look for border definitions in the stylesheet, since that's what makes boxes look like boxes. Change one of the borders to red just to see what happens -- it won't hurt.

Some starting tips:
Use Firefox as your working web browser
Install the Web Developer tools (or Firebug tool) in Firefox
Use this combination to see what elements need to be changed.
- in particular learn to use the Edit CSS and View Style Information tools in the Web Dev tools

HTH

Rob

[MedicineTreeMan]

Thank you for your help friends.

Ken