How to add images to define pages and basic layout tips.

Adding images to a define page is a two step process.

• Upload the image to the /image directory on you site. You can do this via FTP or through the Cpanel File Manager.
• Inserting the image into the define page either by and coding or by the included web page editor.

Unfortunately, the upload aspect of this lesson will be left up to you to figure out. Mainly because there is hundreds of diffrent FTP software out there and there is no way I could cover that here. I would never get to the second phase of this lesson.

You need to remember

• The image you want to use needs to be uploaded to your web space.
• The photo has to be the size you want on the web page. The software will not resize the image. This is up to you to do prior to uploading.
• I would suggest to put the new image in the /image directory on you web space, this will be the easiest way for you to manage all your images.

Inserting your image into the define pages.

• Enter your Zen Cart Admin and find Tools->Define Pages Editor
• You will then be presented with two drop down boxes.
  • The first is a list of all the pages you can edit. Even though they are file names, they are pretty easy to understand which pages are which.
  • The second is a selector for which editor you want to use. Either Plain Text (edit pages by hand) or HTMLarea (Which is a html document editor IE WYSIWYG (What You See Is What You Get). I always recommend using HTMLarea, unless you know html code.

We are going to be using define_main_page.php for our example, but these instructions will work for all define pages.

• You will need to first select HTMLarea from the right dropdown and then define_main_page.php from the left.
• You will see an editor box with a bunch of icons on the top of it. If you are familiar with Microsoft Word, they may make a bit of sense. If you mouse over the buttons, it will tell you what they are. For instance, the big bold B is for making a letter or word bold. You do this my highlighting your chosen word the click the B.

We are only going to use two buttons.

• Insert/Modify Images
• Insert Table - This is for a bit layout.

I am going to assume you have uploaded your image to the image directory on your web page. Also, to make this easier, I would recommend using Internet Explorer for this editor, it is too quirky with Firefox. It will work in FireFox, but it is a bit more work.

NOTE: If you already have text in the editor that you have typed in, I would recommend doing a copy or cut (ctrl+C or ctrl+v) to move it to the clip board. It will save you from re-typing it again. If it is the default Zen Cart intro text, remove it.

• For a little layout, we will be using a html table. Click the "Insert Table" button. You will be presented with an "Insert Table" dialog box.
  • In the Rows box, type in 1, for 1 row. In the Cols: Box type in 2, for 2 columns. This will give you a table 1 row tall by 2 columns wide.
  • In Boarder thickness, cell spacing and cell padding replace the 1's with 0's

To be continued. This is unfinished, so bare with me.