Style Designer

The Style Designer is used to create and edit System Page Styles, which are pre-built layouts that provide you with areas to drop your content and interactvity into. You don't actually add your text and photos here. Instead, you add placeholders for "regions" which will be replaced with your content and built-in apps when a Page is displayed that uses the Page Style.

   
 

Page Style Name

Name:

Enter the unique name for this Page Style.

TIP: Create a naming system for your Page Styles so you can remember how many columns each Page Style has and add something descriptive to help you remember the important content regions that are unique to this Page Style.

 

Add or Remove Cells and Regions in the Page Layout below

Social Networking Position:

Select the position around the Primary System Region ("Use Page") where you would like the Social Networking features to appear. You can also select "Disable" to hide the display of the Social Networking features for this Page Style.

NOTE: The Social Networking features are enabled and configured in the Site Settings.

Empty Cell Width:

You can define the width of any emtpy cells in your Page Style, by setting the Empty Cell Width field value. You can use empty cells to create spacing between other cells. (You can leave this field blank if you want the width of empty cells to be the same as other cells in the same row which is the default.)

Page Layout:

Each Page Style is associated with a single layout when it is created. Layouts are designed for common page structures for 1 column pages, or 2 column pages with a sidebar, mobile pages, and emailer pages, for example. You cannot change a Page Style's layout after it is created, but you can create an unlimited number of Page Styles, one for every single Page if you need too!

Page Style Areas

Within all Page Style layouts, there is are certain areas that have been predefined and consistent across all System Page Styles. These areas, like Site Border, Site Header, Site Top, etc., are indicated with a solid line surrounding their area of influence. These "wrappers" give the Theme Designer the "hooks" it needs to attach graphical styling elements to these areas within all Page Styles so all Pages on the site can share common graphical elements using a single Theme.

Adding Content

To add content regions to your Page Style, simply add rows and columns to any of the predefined content areas within the layout. You do this just as you would if you were creating a table with cells in a document.

You'll notice that you can't change the rows height or the columns width. This is not necessary here. Only each region's location and relation to other regions around it is important to the Page Style. You see, the height will be determined by the amount of content you add, ever-expanding to contain whatever is placed within the regions. The width of each column, or area of the layout, is dictated by the number of cells in a row, and can be overriden by any Theme used to display the Page Style.

Mobile Page Styles are displayed with a lime-green border for easy identification. Mobile Page Styles are limited to one-column layouts since sidebars would be unusable when viewed from a mobile phone. The only difference between Mobile Page Styles and all other (desktop) Page Styles is the Site Border area has been replaced by the Mobile Border area. The Mobile Border is used by the Mobile Themes to "float" the Page content to the entire width of the device displaying it.

NOTE: You don't have to assign a content region in each area or cell. Empty areas and cells will contain nothing on the Pages that display them, however, but the space it occupies will still contain spacing and styling if defined in the Theme).

Regions

There are a number of types of "regions" you can assign to any cell in your Page Style layout. Each region replaces the cell with content when a Page is displayed that uses the Page Style. The following is a list of the regions available:

Page Regions

Page Regions are replaced with content (text and photos) you add through the Rich-text Editor. Even though you are creating and adding them on the Page Style, they are actually created for each Page when that Page is assigned to the Page Style. Page Regions are referenced in the order they are added to the Page Style, from top left to bottom right. So if you remove a Page Region from your Page Style, the remaining Page Regions will be renumbered. Since Page Regions are created within each Page, removing Page Regions from a Page Style does not delete the Page Region or it's content, it only hides it from view. (If you delete a Page Region from a Page Style, you can add it back anywhere in any Page Style and your content will reappear!)

System Regions

System Regions are replaced with the interactive features (Login Pages, Custom Forms, Calendars, Form Views, Product Catalogs, Photo Galleries, Order Forms, etc.) from the Page being displayed itself, or another Page. If a Page name is specified in the System Region, then the interactive feature (Page Type) for that Page will be inserted into that location. Alternatively, if "Use Page" is specified, then the interactive feature for any Page itself will be inserted into the location. Each Page Style must include at least one "Use Page" System Region (even if its not used).

Pages with the following Page Types are allowed to be selected for a System Region:

  • Calendar View
  • Catalog
  • Custom Form
  • Express Order
  • Folder View
  • Form List View
  • Form View Directory
  • Order Form
  • Photo Gallery
  • Search Results
  • Shopping Cart

Common Regions

Common Regions are replaced with content (text and photos) you add through the Rich-text Editor. Common Regions allow you to create content that can be shared across one or more Pages throughout your website. Common regions must be created first, and then can be added to any Page Style.

Designer Regions

Designer Regions are replaced with HTML content (javascript, etc). Designer Regions allow you to create and place code widgets that can be shared across one or more Pages throughout your website. Designer Regions must be created first, and then can be added to any Page Style.

Dynamic Regions

Dynamic Regions are replaced with PHP code that will be executed by the web server. Dynamic Regions allow you to create and place PHP code that can be shared across one or more Pages throughout your website. Dynamic Regions must be created first, and then can be added to any Page Style. For security reasons, your Site Administrator must enable Dynamic Regions before they can be used.

Menu Regions

Menu Regions are replaced with the animated dropdown or accordion style menus you can add items to from the Edit Page screen. Menu Regions must be defined first before you can add them to your Page Styles. (See the IMPORTANT note below.)

Ad Regions

Ad Regions are replaced with the animated sliding or fading ads (text and/or photos) you can create from the Ads tab. Ad Regions must be defined first before you can add them to your Page Styles. Ad Regions are the only regions that must have a predefined width and height for it's animation to work. (See the IMPORTANT note below.)

IMPORTANT: Menu Regions and Ad Regions require an extra step after you add or even move them from cell to cell within your Page Style. Once you have added or moved a Menu Region or Ad Region within your Page Style and saved it, you need to navigate to a Page that uses your new Page Style. Then go into "Theme Preview" mode and edit your site's Theme within the Theme Designer and just resave the Theme. By resaving the Theme, the Theme Designer will generate the proper code to make the animation for your Menu Region or Ad Region work. If it is a new region, the animation may not still work, so you will need to reedit the Theme and find the fold that contains the new region and update it's dimensions until it works to your liking and save the Theme.

Chat Region

The Chat Region will be replaced by the online/offline chat buttons from the Site Settings and the built-in chat code to allow your site visitors to chat with your chat operators. This feature is a purchased upgrade. If you do not sign up for the a chat plan, the Chat Regions will display nothing and have no affect on your Page Styles. See the Who's Online feature for more information.

PDF Region beta

PDF Regions will be replaced with a PDF icon that will allow Visitors to view any Page as a PDF (e.g. to save or print). This is a beta feature that might not work for your site. This feature requires the wkhtmltopdf utility which your server administrator may install. Your server administrator may read the installation guide for more information.

Mobile Switch Regions

Mobile Switch regions are replaced with either a "Full Site" link or a "Mobile Site" link. These links are dynamic toggle the Visitor between Mobile Mode and Desktop Mode. So, for example, if the current Visitor or User is viewing the site in Mobile Mode and clicks the link, the Page will be redisplay in the new mode and vice versa. This allows your Users and Visitors to change their mode of display at any time regardless of the device detection features of the system. Keep in mind that each mode displays the Page with the associated Page Style and Theme defined for that mode.

Please be aware that the mobile site setting must be enabled in order for the mobile switch to appear.

 

Override the activated Theme

Theme:

Select a Theme if you want this Page Style to always use a specific Theme instead of the Theme that is activated for the site. This feature is useful if you are building out an area of the site that has a different design than the rest of the site or if you are working on a new site design. You may leave this field unselected if you want this Page Style to use the activated Theme for the site.

If you select a Theme for this field then the rich-text editor will load that Theme instead of the activated Theme, when editing a Page.

If you are previewing a Theme then that Theme will be used instead of this Page Style's Theme or the activated Theme for the site.

 

Add Additional Classes to the Body of this Page Style

Additional Body Classes:

Enter one or more CSS classes that will be included in the body tag (e.g. home dark large). You should separate multiple classes with a space, and you should not include a period before the class name. The layout and Page Style name classes will still be included in the body tag if you choose to add additional body classes. You can use this feature to add the same class to multiple Page Styles, so that you can affect all of them in a certain way.

 

View Source

Page Styles are nothing more than the simple HTML page structure that will contain your content and interactivity. Click 'View Source' to take a look under the hood and the HTML code that is generated. It includes CSS classes for the Theme Designer and coders alike to "hook" their own custom CSS into to manipulate and style just about everthing displayed! You can also add your own code to the Page Style's HTML <head></head> tag.

NOTE: If you are a CSS coder, you will also see the CSS class names for the Page Style and it's areas and regions are listed for reference in case you want to make CSS changes within the Theme Designer. See the Theme Designer for more information.