Zen Cart Template Design Software

Zenofobe Help Manual

Main Screen

The opening screen provides a simple intuitive interface enabling quick modification of your stylesheet with regard to branding, navigation, center box and sideboxes. Each box broadly represents an html container, the More button opens a screen providing further input for child divisions. Experiment with images, colors, gradients, borders, radius, shadows and fonts and view your design immediately in your default browser.
Diagram of a Zen Cart product page denoting navigation and branding areas
Screenshot of Zenofobe.exe main screen

Images

Screenshot of an image selection Left click on a screen image and navigate to the folder containing the image you want to insert. Left double click to select the image. The software will copy the selected image into your Zen Cart template along the path:-
Zenofobe\Templates\YOUR_TEMPLATE\includes\templates\YOUR_TEMPLATE\images\data\ . Screenshot of image navigation
Press the Browser button to view your design in the default browser.
Right click and press Yes to remove an image from your Zen Cart template.

Colors

Screenshot of color selection Left click on a screen color and select a color from the palette.
Press the Browser button to view your design in the default browser.
Right click and press Yes to remove a color from your Zen Cart stylesheet. Screenshot of color palette

Gradients

To create a vertical gradient check the gradient box and select a second color .

Margins

Screenshot of css margins entryfield Enter your css directly into the entryfield or right click the entryfield to select from your CSS database.
Double left click an entryfield to put the entry into your CSS database and to place on the Windows clipboard.
Double left click to select from your database.

Screenshot of css margins database You must use the short hand method to set the margins .
This property can have from one to four values.
Top ; Right; Bottom; Left

Examples:
5px
all four margins are 5px

5px 10px
top and bottom margins are 5px
right and left margins are 10px

5px 10px 15px
top margin is 5px
right and left margins are 10px
bottom margin is 15px

5px 10px 15px 20px
top margin is 5px
right margin is 10px
bottom margin is 15px
left margin is 20px


Padding

Screenshot of css padding entryfield Enter your css directly into the entryfield or right click the entryfield to select from your CSS database.
Double left click an entryfield to put the entry into your CSS database and to place on the Windows clipboard.
Double left click to select from your database.

Screenshot of css padding database You must use the short hand method to set the padding .
This property can have from one to four values.
Top ; Right; Bottom; Left

Examples:
5px
all four paddings are 5px

5px 10px
top and bottom paddings are 5px
right and left paddings are 10px

5px 10px 15px
top padding is 5px
right and left paddings are 10px
bottom padding is 15px

5px 10px 15px 20px
top padding is 5px
right padding is 10px
bottom padding is 15px
left padding is 20px


Borders

Screenshot of css borders entryfield Borders are defined by three properties, border-radius, border-width and border-color.

border-radius

Enter your css directly into the entryfield or right click the entryfield to select from your CSS database.
Double left click an entryfield to put the entry into your CSS database and to place on the Windows clipboard.
Double left click to select from your database.

Screenshot of css borders database You must use the short hand method to set the radius .
This property can have from one to four values.
Top-left, Top-right, Bottom-right, Bottom-left

Examples:
5px
all radii are the same

5px 10px 15px 20px
All four radius are different.

border-width

Entry for widths is the same as radius.

You must use the short hand method to set the width.
This property can have from one to four values.
Top ; Right; Bottom; Left

Examples:
1px
all borders are the same

1px 2px 3px 4px
All four borders are different.


Shadows

Screenshot of css shadows entryfield Shadows are defined by three properties, Pixels, Color and Opacity.

pixels

Enter your css directly into the entryfield or right click the entryfield to select from your CSS database.
Double left click an entryfield to put the entry into your CSS database and to place on the Windows clipboard.
Double left click to select from your database.

Screenshot of css shadows database The pixels property can have from two to four values.
1 -The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
2 - The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.
3 - The blur radius (optional), if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
4 - The spread radius (optional), positive values increase the size of the shadow, negative values decrease the size. Default is 0 (the shadow is same size as blur).

Example:
5px 5px 10px

opacity

Opacity is a transparency value between 0 and 1 (zero being fully transparent and one being fully opaque).

More CSS

Screenshot of css more entryfield Enter your css directly into the entryfield or right click the entryfield to select from your CSS database.
Double left click an entryfield to put the entry into your CSS database and to place on the Windows clipboard.
Double left click to select from your database.

Screenshot of css more database In the More entryfield you may enter any extra CSS into the div, you may continue to right click to enter more rules from your CSS database up to 100 characters in length.

Font Family

Screenshot of css font family entryfield Enter your font family directly into the entryfield or right click the entryfield to select from your Font Family database.
Double left click to select from your database.

Screenshot of css font family database Zenofobe supplies two font family databases, Safe Fonts and Google Fonts.

Safe Fonts

Safe fonts are fonts that are pre-installed by many operating systems, you can expand this database to include other 'Web Fonts' as desired.

Google Fonts

Currently the Google fonts database is shipped with 732 records which you can filter into your own favorites list or add and delete records as required. Use the radio buttons to select a 'fallback' font.

Stylesheets

The Stylesheet.css button on each screen enables direct editing of your stylesheet. The rules you have created using the 'Visual stylesheet' interface are displayed at the top of screen, this is 'view only' and cannot be edited here. Click the Page source button to view the source code of the page you are designing. Screenshot of stylesheet editors
The bottom of the screen enables manual editing of your stylesheet, these rules are appended to the visual stylesheet as viewed above. Click the Responsive.css button to edit your responsive stylesheet, this stylesheet contains the media queries that control the appearance of your site as the screen size changes and can be freely edited.

Image Slider

Select Slider on the top menu of the main screen.
Screenshot of Nivo image slider Zenofobe enables the easy installation of an image slide show in the branding / banner area or the center of the home page. Optionally you can place a slider in both areas.
Each slider can be configured independently by selecting various options on the right of the screen.
Left click an image to select from a folder, Zenofobe will open the last folder from which an image was selected.
Right click to remove an image.When using two sliders, the first four images appear in the branding area and the last four appear in the center page.
It is important to make all images the same dimensions and to enter the width and height required.
To ensure fast loading of your page keep the number of images to a minimum and ensure the file size is as small as possible (use an image optimiser).

Upload

Click the Upload button to upload your template to your website.
Screenshot of FTP upload database Zenofobe integrates with Core FTP to enable fast upload to your website. You can download Core FTP for free at http://www.coreftp.com It is important to download Core into the default folder.
C:Program Files (x86)\CoreFTP
or
C:Program Files\CoreFTP

You can create multiple records of FTP connections and client details.
In the field Path from root to index.php enter the correct path into which the Zen Cart shop is installed.
e.g. public_html/zencart.
Make sure you have entered the correct Admin folder name.
Before you upload anything test the connection, click the
Test Connection button.This will download the file Index.php from your admin folder. Check that this downloaded file is the right one and the file listings are correct.
When you are confident that you have established a correct connection, click Upload to install your template.
Click Checklist for instructions to install the template in shop administration.
To enter a link to the shop make sure you enter the full URL.
e.g.http://www.YOUR_SITE.com/zencart

Auto loaders

Auto loaders is a php script that runs sql patches to install various modules such as Responsive templates, Zen Colorbox and Column Layout grid.
It will also set the admin settings for your product listing pages, image sizes etc.
To see exactly what auto loaders is doing for you, uncheck the auto loaders box and click the Checklist button. Don't forget to check the box again if you wish to install auto loaders! The version number of the template is recorded on your Zen Cart database to ensure the script is only run once. However if you modifiy your template in the future and need to run auto loaders again you must ensure that the previous version number is set to the number recorded on your database. Unsure ?, press the Detect last auto installation button to download a file which Zenofobe can read and update your version numbers for you. Note: sometimes it is necessary to navigate in the Admin area to start the auto loaders script. Selecting 'Product Listing' will do the trick!