editing define_main_page

**peterapo** · 22 Jan 2009, 12:40 AM

I would like to modify my home page by setting up 3-4 columns to display products, including images and custom text as well as other info re: our market stall etc.

Can some one pls advise what is the easiest way to achieve this? I have tried setting up a table using Dreamweaver and saving as define_main_page.php. Is ther an better way?
Thanks

**schoolboy** · 22 Jan 2009, 01:17 AM

The DEFINED pages are one of the few instances where ZC invokes raw html.

When you create content for a DEFINED page - by using the wysiwyg editor (like HTMLAREA) or the text input window, you are essentially adding stuff that gets stored as raw html.

Now remember... page elements in zencart are drawn from a variety of sources - with the basic page structure dependant on PHP. This is also true of defined pages, but the centre column content draws its elements from the html content of the files in:

includes\languages\english\html_includes\

-----------------------------------------

So, it is quite reasonable to use an external HTML editor (dreamweaver) to create the content for a defined page - only that you do not use the whole page you create - just PARTS of it...

Which PARTS, and HOW ... ?

Essentially, you want the raw code of the elements you create in dreamweaver, so, once you have designed the page in dreamweaver, you need to invoke dreamweaver's "toggle to HTML Code" feature, to reveal to you the underlying html.

Then, you copy (to clipboard) parts that exist ONLY BETWEEN the <body> and </body> tags.

You do NOT copy the entire page's html, as this contains header stuff that your ZC will find confusing!

Then, in your Define Page editor screen of ZC, TOGGLE to html code. It's the <> icon in the menu.

Then <CTRL+V> paste the html you copied from dreamweaver into the input frame.

Bear in mind that only basic html is "safe" - if there are any obscure calls and jscript, for example, you may have problems.

Stick to basic HTML tags and you should be fine.

**peterapo** · 22 Jan 2009, 02:22 AM

Thanks heaps, I will try to follow your instructions and post how it goes.

**peterapo** · 22 Jan 2009, 03:19 AM

Thanks, columns are displaying correctly, I have to work out how to make them a fixed size and not resize when entering text and inserting images.
Can you tell me how to go about entering image paths correctly, as images are broken?
Regards

**schoolboy** · 22 Jan 2009, 11:01 AM

Originally Posted by peterapo

Thanks, columns are displaying correctly, I have to work out how to make them a fixed size and not resize when entering text and inserting images.

Just use cell width and height setting as follows:

for pixel width.

HTML Code:

<table border="0" width="300">
	<tr>
<td width="100" height="100">&nbsp;</td>

for percentage width.

HTML Code:

<table border="0" width="100%">
	<tr>
<td width="30%" height="30%">&nbsp;</td>

As I said, basic HTML is OK - so don't be frightened to use it.

------------------------------------------------------

Originally Posted by peterapo

Can you tell me how to go about entering image paths correctly, as images are broken?
Regards

The PATH to the images depends entirely on where you store the images.

In your zencart webshop, you have an images folder at the root level of the installation.

What I do (to distinguish index page design element images from product images) is create a sub-folder in the images folder, and call that folder defined-pages.

That is where I store images that appear in any defined page that appear

The PATH in this case, will be:

Code:

images/defined-pages/picture1.jpg

Note that if the link to the image is internal, you need only have the path shown as I show above, because ZC will put into your header, the <base-href="............"> tag.

Naturally, EXTERNAL images will require the FULL path:

HTML Code:

http://www.some-other-website.com/images/picture.jpg

Note that in this case (full path), you run the risk of Browser SSL warnings when/if you invoke SSL on your server, if the PATH to an element is itself insecure... ie: http:// instead of https://

**rstevenson** · 22 Jan 2009, 08:42 PM

Another way to do it, without using tables or hardwired sizes, is to enter your columns of info inside DIVs with class names and then style the classes in your stylesheet. Makes for cleaner code. One drawback is that vertical alignment issues are harder to deal with in CSS than in tables. Here's the general idea...

<div class="col1">
<h3>Header</h3>
<div class="img"><img code here...></div>
<div class="txt">text here</div>
</div>

<div class="col2">
<h3>Header</h3>
<div class="img"><img code here...></div>
<div class="txt">text here</div>
</div>

<div class="col3">
<h3>Header</h3>
<div class="img"><img code here...></div>
<div class="txt">text here</div>
</div>

<div class="col4">
<h3>Header</h3>
<div class="img"><img code here...></div>
<div class="txt">text here</div>
</div>

Define the column classes something like...
.col1 {
height: 1%;
width: 23%;
float: left; }

The 1% height is the Holly Hack to avoid IE display bugs. Adjust the 23% as need to keep everything within your centercolumn. You may have to play with that float: left; definition to make everything line up. I only use two columns and have float: left on the left one and float: right on the right one. It gets trickier when you need more columns I think.

Define the img and txt classes as needed for your purposes.

Rob

P.S.
You could also just put the class names into the table structure instead and then add the styles to the stylesheet. Makes adjusting things easier than editing a bunch of hard-coded values.

Thread: editing define_main_page

Thread Tools

Search Thread

Display

Hybrid View

editing define_main_page

Re: editing define_main_page

Re: editing define_main_page

Re: editing define_main_page

Re: editing define_main_page

Re: editing define_main_page

Similar Threads

Editing define_main_page corrupts home page?

While editing define_main_page.php

define_main_page

Posting Permissions