Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / editing define_main_page

editing define_main_page

Locked

Views: 2,201

Results 1 to 12 of 12
This thread is locked. New replies are disabled.
21 Jan 2009, 11:40 PM
#1
peterapo avatar

peterapo

New Zenner

Join Date:
Sep 2008
Location:
Melbourne, Australia
Posts:
5
Plugin Contributions:
0

editing define_main_page

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

22 Jan 2009, 12:17 AM
#2
schoolboy avatar

schoolboy

Totally Zenned

Join Date:
Jun 2005
Location:
Cumbria, UK
Posts:
10,327
Plugin Contributions:
0

Re: editing define_main_page

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.

22 Jan 2009, 1:22 AM
#3
peterapo avatar

peterapo

New Zenner

Join Date:
Sep 2008
Location:
Melbourne, Australia
Posts:
5
Plugin Contributions:
0

Re: editing define_main_page

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

22 Jan 2009, 2:19 AM
#4
peterapo avatar

peterapo

New Zenner

Join Date:
Sep 2008
Location:
Melbourne, Australia
Posts:
5
Plugin Contributions:
0

Re: editing define_main_page

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

22 Jan 2009, 10:01 AM
#5
schoolboy avatar

schoolboy

Totally Zenned

Join Date:
Jun 2005
Location:
Cumbria, UK
Posts:
10,327
Plugin Contributions:
0

Re: editing define_main_page

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.

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

for percentage width.

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

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

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:

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:

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://

22 Jan 2009, 7:42 PM
#6
rstevenson avatar

rstevenson

Totally Zenned

Join Date:
Nov 2006
Location:
Dartmouth, NS Canada
Posts:
2,400
Plugin Contributions:
0

Re: editing define_main_page

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.

22 Jan 2009, 9:53 PM
#7
schoolboy avatar

schoolboy

Totally Zenned

Join Date:
Jun 2005
Location:
Cumbria, UK
Posts:
10,327
Plugin Contributions:
0

Re: editing define_main_page

I just gotta get me a load of those donuts! See how clever you become when you eat Rob's donuts. :D

8 Jun 2010, 11:49 AM
#8
sushigal avatar

sushigal

Zen Follower

Join Date:
Mar 2009
Posts:
435
Plugin Contributions:
0

Re: editing define_main_page

I love this forum. Would be lost with out it, exactly what I needed to do add text and images etc to the main page. Thanks guys :clap:

8 Jun 2010, 5:36 PM
#9
dw08gm avatar

dw08gm

Totally Zenned

Join Date:
Sep 2008
Location:
DownUnder, overlooking South Pole.
Posts:
1,016
Plugin Contributions:
2

Re: editing define_main_page

I want to setup a defined page called main.html, as opposed to index.html, that is based on the About_Us mod. Would there be any conflicts with zc code in doing so.

TIA

8 Jun 2010, 7:43 PM
#10
schoolboy avatar

schoolboy

Totally Zenned

Join Date:
Jun 2005
Location:
Cumbria, UK
Posts:
10,327
Plugin Contributions:
0

Re: editing define_main_page

dw08gm:

I want to setup a defined page called main.html, as opposed to index.html, that is based on the About_Us mod. Would there be any conflicts with zc code in doing so.

TIA

What you are suggesting is not within the context of a PHP-driven site.

The DEFINED PAGES are actually just PARTS of raw html code that get "parsed" into the display - that display having been assembled by the php code.

You have to "think differently" when working with PHP - expecially if you've come out of a flat html background.

Strictly speaking, there are no "pages" in zencart (or any other content-managed system).

"Web pages" come into existence only when a user sends a request for them to be assembled, and the php then gets to work to cobble the elements together before delivering the result to the browser. When the user clicks a link, the page they are on "evaporates" forever, and a new "page" is assembled in its place.

So... You can't use files with .html extensions. They make no sense in this context.

... Or rather, you CAN create a html page... but it will exist outside of the schema.

9 Jun 2010, 9:00 PM
#11
dw08gm avatar

dw08gm

Totally Zenned

Join Date:
Sep 2008
Location:
DownUnder, overlooking South Pole.
Posts:
1,016
Plugin Contributions:
2

Re: editing define_main_page

Hi Schoolboy

You are absolutely right and it was my bad that I confused another thread discussing index.php with index.html, where the latter page is to act like a splash page accessible only from within the site and draws upon the content and style of the pre-existing home page of a static html site.

I hope the above is clearer than mud!

So if I may re-cast my query: I want to setup a defined page called main.php, as opposed to index.php, that is based on the About_Us mod. Would there be any conflicts with zc code in doing so.

The content for this page would therefore be edited using includes/languages/english/html_includes/My_Template/define_main.php.

Cheers

10 Jun 2010, 6:37 PM
#12
dw08gm avatar

dw08gm

Totally Zenned

Join Date:
Sep 2008
Location:
DownUnder, overlooking South Pole.
Posts:
1,016
Plugin Contributions:
2

Re: editing define_main_page

So far so good.

All I had to do was:

  1. be particular about converting references from main_page.pgp to main.php, including links

  2. create a new tpl_main_page.php in includes/templates/MyTemplate/main/tpl_main_page.php

  3. create a main.css to suit in includes/templates/MyTemplate/css/