Options & Setup

Design Control
Introduction Design Control is the framework tool provided in the PlatformPro Theme Options that allows you to quickly customize the design of your site. Design Control is where youll set your design mode and the colors you want for common elements used in your theme. Design control should be used to quickly set up the basic colors and look of your site, then Custom CSS should be used to refine individual graphical elements. Design Modes

Currently there are three design modes inside of the Platform Framework. They are: Full With Mode with Canvas Full width page area with a canvas area behind the page content. Great for use with background images, or when content and page areas have different background colors. Full Width Mode Great for designs with some full width elements on the page, (e.g. PageLines.com) all elements are full width, with a content area inside. Fixed Width Mode A fixed width Page area with the body being shown as the site background

Use the Site Design Mode option to choose the type of site structure youd like to use as the framework for your design. Background Image

Background Option Design Control also features an optional background image option. This makes it simple to add a background images to your site. It takes three steps: Upload Your Image

Set the repeat for the image This option controls whether or not the image is repeated in the background. If so, do you want it tiled, or just repeated along an axis. Position The Image Use percentages to position the image. A vertical of 0% corresponds to the top or your site, a horizontal position of 0% corresponds to the left. In Canvas mode, the image is a applied to the page area, with the canvas on top. In Full Width Mode, the image is applied to the page area but will show behind the content. In Fixed Width Mode, the image is applied to the background body. Introduced in PlatformPro 1.2.0 is PageLines Color Control. Color Control allows you to quickly set up colors for your basic site elements. It is great for rapidly building unique sites.

This option may vary slightly depending on which design mode youve selected.

Color Control

There are 5 Color Setup Areas Basic Layout Color Set up the colors for basic layout items and page elements. Content Text Colors and Effects Control the colors of text in your page content area. Primary, Secondary & Tertiary Text Colors To create contrast effects throughout the theme, there are three the colors. Regarding their general grouping: Primary represent the common text color, secondary is generally subtle text such as subtitles, and tertiary text is somewhere between.

Footer Text Colors Control the color of text and links in the footer of your site. Primary, Secondary and Tertiary Site Element Colors Site elements are the contrast building blocks of your site. For example, the color of the navigation on hover or when a page is selected. Settings Site Element Colors Because site elements are designed to contrast with each other, you should think about them as follows: Primary Elements - Should have a slight contrast with the background of the page area. As an example, the default colors are light gray for the element and white for the page. Secondary Elements - Should have the same hue as the primary elements and be slightly darker. Tertiary Elements - Should have the same hue as the primary & secondary elements and be slightly darker than the secondary ones.

Editing Content Layout

Overview The layout editor is one of the most powerful options in the PlatformPro framework. It allows you to configure the layout of your WordPress content on individual pages/posts and on your posts pages.

Using the Editor

The layout editor only effects the look of your sites content section. This is one of the most important areas of the site and it handles your WP page/post content, as well as your blog posts (on search, categories, etc). Setting up and using the layout editor only requires a few steps. 1. Find The Settings Login to the WordPress admin and select the theme settings panel. Youll find these options under layout editor 2. Choose The Default Mode Choose your default layout mode using the top selector on the layout editor panel 3. Drag and Drop Dimensions Configure each layout modes dimensions using the drag and drop interface on the bottom of the panel 4. Change Layouts on a Per-Page Basis Choose different layouts on a per page basis using the selector option on the bottom of the add new or edit page/post tabs in the WP admin. 5. Blog Page Layout Select a layout for your blog (posts) page and 404 pages. Youll find this under blog and posts in the theme settings panel. Most of the blogs you see online use the default layout with the Main Column on the left, and one or two sidebars on the right. The sidebar is where you will place advertising banners, and all of the miscellaneous information widgets* for your site.

Menus & Navigation

Introduction In all of the PageLines themes, navigation menus are managed through WordPress native menus tool. This tool allows you to manage your WordPress pages, categories, and links, with the ease of drag and drop. This doc will illustrate how menus and navigation work in PageLines themes.

WordPress Menus First, there is plenty of documentation on how to create custom menus with WordPress, so there is little need to duplicate that content here. To that end, Digging Into WordPress has a pretty good basic tutorial on how to get started with WordPress menus (you probably can ignore step one). Specifically, setting up navigation in PageLines products requires two steps. The process is very straight forward. 1. Create a new menu (under Appearance > Menus) 2. Attach it to the appropriate PageLines theme location By using these menus, you can manipulate the order and change the parent and children pages independently. You can also choose from a variety of navigation items such as specific categories, pages, posts, and even custom items.

Drop Down Navigation To use drop down navigation, first make sure the option for this is activated under settings > header and nav. Drop Down navigation in PageLines themes, uses the hierarchy you create in the WordPress menu area. This is achieved when you drag a menu item to the right of the top level menu items. Sub Navigation To use sub navigation, make sure this option is activated under settings > header and nav. Sub navigation in PageLines themes uses the natural page hierarchy you create when adding or editing pages. You create this hierarchy when you select parent pages (on left on Pages > add new).

Sidebars & Widgets

Widgets Widgets are predefined boxes of content that you can place in sidebar areas on your site. These are set up under Appearance > Widgets in the WordPress admin.

Widget Areas There are several different widget areas in the PageLines themes. These widget areas are placed in different parts of the theme. The following will go over each widget area in detail. Sidebars in the PlatformPro Framework Using Widgetized Sidebar Sections In PlatformPro, sidebars are managed through drag and drop sections (each widgetized sidebar is a section). This changes the capability of sidebars and makes them much more flexible. For example, you can place several sidebars in your sidebar1 template-area and hide and show them using section control. With Base Child theme 1.0.4 we added a section (Base Sidebar) that shows you how to add an unlimited number of drag/drop widgetized sidebar areas using custom sections. Sidebars In Standard PageLines WordPress Themes iBlogPro4, WhiteHousePro3, StationPro3, EcoPro Main Sidebar This is the widget area that appears in your sidebar by default. Drag and drop any number of widgets into this area as

you need.
Secondary Sidebar The Secondary Sidebar widget area is intended as a replacement for the Main Sidebar on selected pages. For example, if youd like a specific set of widgets only to replace the Main Sidebar widgets on certain pages, you would use this sidebar. For the pages youd like to set to use the Secondary Sidebar, mark this in the Page Options in the Page Editor. Content Sidebar & Full-Width Bottom Sidebar The Content Sidebar resides in the page content area of your site. This sidebar is empty by default. If you add widgets to this widget area, widgets will be appended to the content section of your page. The Full-Width Bottom Sidebar is essentially the same, however, it clears both the content and the main sidebar. Screenshot of PlatformPro using the content and fullwidth sidebars. Morefoot Sidebars The Morefoot footer (also called widgetized footer sidebars) area is comprised of three different widget areas: footer_left, footer_middle, footer_right. Each widget area is meant to only hold one widget. Drag and drop widgets into these containers. They look like this and appear just above the main footer:

The Footer Widget Area (5-columns) The footer content can be changed in two ways. If you like the content placed in the default footer you can simply replace each portion in the theme options. The Footer Logo, the more statement, and the site terms statement are changed in the Footer Options panel. The other two columns are specific menu locations that can be assigned with custom menus using WP3.0. (If you do not specify the default value will be used, in Platform this is Pages and Recent Posts ( Latest). If you are looking for a more fine-tuned and custom footer you can do so using widgets, however, you must replace all five columns with five new widgets to get it to fill out appropriately. In other words you cant use the Footer Logo option or the Copyright Statement option and also place a widget via the widgets panel because there is no way for the theme to assume or detect which column you are trying to replace with the widget. You can add widgets to the footer by dragging and dropping widgets into the Footer Sidebars (5-column) section. The footer widgets looks like this:

Why are widgets appearing in my sidebars even though my widget containers are empty? Each widget area will display a default widget or widgets when left empty (so you know what is active). To turn off this feature, check the option to Hide Widget Areas When Empty in the Theme Settings > Sidebar Options panel.

Templates & Sections

Template Setup
Overview Template setup is probably the most important part of your sites design and youll probably have to experiment with some of the options before you find the look you want. This interface allows you to control the total look and feel of your sites templates, e.g. your post pages, page templates, etc Not only that, it allows you to do this using drag & drop AND best web development practices! How about that?

That said, this is really easy, but you need to understand a couple key concepts first. Namely: 1. Template & Page Types i.e. your blog (posts) page, or the templates you select when creating pages 2. Template Areas The different areas in each template, i.e. the header area, or the content area 3. Drag and Drop Sections Pieces of web design you can place in your template areas. Templates and Page Types Templates and page types consist of the different types of pages that are recognized by WordPress. These include: 1. Page Templates These are created by the theme, and selected when you create new pages inside of WordPress 2. Page Types WordPress is designed to support a number of different page types. Some examples of these include your blog page, your single post page, 404 pages, etc Template Areas

Each of the page templates, and page types consist of several template areas. Please look over this doc on how template areas work.

Template areas behave differently depending on which one youre using. Here is a summary: Header, Footer, Morefoot, Sidebar1, Sidebar2, Sidebar Wrap are Global Template Areas. They are present on all pages of your site. Only place sections here that you want on all or most pages. Page Templates These are the templates that will show up (between you header and footer elements) depending on which page template you choose. Or if a user is viewing a blog post or your posts pages. Text Content Area This is the area where your WordPress text is placed, inside the main column of your content section. Platform currently allows you to set up three configs for this on: pages, single posts, and on posts pages.

FYI Just to the right of the template area title is a graphic with a blue stripe across the top of it. The blue stripe shows what part of the template page youre working on. It changes when you edit a different area. What Are Sections? The first step in using this interface is to select a template area. Each template area can have its own set of sections. Sections are drag and drop pieces of web design that can be moved around your site. They are a lot like widgets, only they handle more complex tasks like JavaScript, CSS loading, options, etc Your theme comes pre-installed with tons of sections; you can also add your own using the child theme. Setting Up Templates Once you understand what sections and template areas are, the rest is pretty easy. Just follow these steps: 1. Visit the settings panel in the admin and navigate to template editor 2. Select the template area you want to configure (using select input) 3. Drag sections or move sections as desired (configure sections through global & meta options) 4. (Your new layout should be saved through AJAX) 5. View the page templates by selecting that template when creating a new page. 6. View the new config for single posts pages, and your blog pages simply by visiting them. 7. For additional page by page control, use section control to selectively hide or show sections More on Section Control Section Control is a tool for hiding and showing individual sections on a page to page basis. This allows you to show and hide individual widget areas on each page, giving you complete control of sections and where they are viewed.

Template Areas
Introduction Sections and template-areas are the key to drag-and-drop control in platform. They allow you complete creative freedom in placing and customizing professional web design in your site. While sections and templates are extremely easy to use, some concepts may be new to people, so please spend some time to understand how they interact. Once you do, youll be creating awesome websites in a snap. Template Areas Understanding drag and drop starts with understanding how templates work inside the framework. There are two levels of structure to the templates 1. Parent Areas Header, Footer, The Templates, and Morefoot Area 2. Content Areas Posts Page Content Area (e.g. blog and category pages), Single Post Content Area (viewing a post), and Page Content Area (content on page templates) Parent Template Areas Parent template areas are shown on all pages, although the templates area shows different content based on the page template selected.

The structure for the parent areas looks like this:

Content Area WordPress Content, Sidebars, etc A special section is used with parent templates to handle the WordPress content.

This section is called content area, and this section contains: Sidebar 1 Area Sidebar 2 Area Sidebar Wrap Text Content Area In this area you can set up different sections based on the page type.

Again the text-content area is special as different sections are shown based on your settings in the admin panel. Currently, you can have different section lists based on if the page is a posts page, a single post page or a regular page type. The structure for the content section works like this:

PageLines Boxes

Introduction Boxes and soapboxes are two different sections inside of PageLines Platform, that are used to display boxes in your site. Both of these section use the box post-type set up in the WordPress admin, they just display differently. In this doc well go over the differences, and talk about the settings for these two sections. PageLines Boxes PageLines boxes are a great way to display information on your site. They consist of a number of horizontally aligned boxes that can have icons and other media associated with them. The process of setting up boxes only requires three steps: 1. Place the boxes section on one or more templates using the template builder. 2. Build Set up any number of boxes using the box post type. Youll find this through your WordPress admin menu (left side) 3. Control Control where boxes show up using box-sets and section control. On each page you set up, you can choose which set of boxes you want to show, you can also choose to show/hide the entire box section on a page-by-page basis using the section control option. Here is a graphic depicting how Box posts, box-sets and page templates interact.

Boxes Vs. Soapboxes Boxes and soapboxes are basically two different ways of displaying boxes on your site. They both use potentially the same box elements set up in your admin.

Boxes Allow for up to five placed per row

Can have an icon on left or on top Different size icons can potentially cause boxes to not line up horizontally Two-per-row Has settings for links placed underneath Icon is placed on top as an image Stage area is set, so all soapboxes are lined-up horizontally

Soapboxes

Features
Introduction The PageLines feature-slider is one of the most dynamic and useful pieces of all its themes. This tutorial will teach you how to use it; as well as some tips and tricks on how to customize it to its fullest. Features in Platform Although using the feature-slider is really easy, if you are new to PageLines, the function of it may be a little confusing. The process for getting a fully functional slider only requires three steps: 1. Setup Features and Feature Settings. Using the special feature post types and settings panels. 2. Place Features in a Template Area. You use page templates and drag-and-drop to place it.

3. Control Which Pages Show the Features. You use feature-sets and Section Control to do this. Here is a graphic that shows you how the various feature elements interact..

Settings There are tons of settings and most documentation for them is inline with the options themselves. Youll find them in three places: in theme settings, on individual pages, and on feature posts themselves. Number of features There is a control that allows you to control the total number of features. Default is 10. Controlling Feature Order To control the order of any post type (features, banners, or boxes) you need to install the Post Types Order plugin. It will allow you drag and drop control over their order Advanced The PageLines feature section is based on the Cycle plugin for Jquery. So theoretically, anything that this plugin can do, the features can do as well. If you are interested in extending the feature, or requesting additional settings, please review the Jquery Cycle website first.

PageLines Banners
Introduction Banners are a great way to show content on your site. Specifically, they are inspired by a highly effective way of giving product tours. The purpose of this document is to give you a good understanding of how to use the banner section inside of the PlatformPro framework. How Banners work To create the content for the sections in Platform, they use content from special post-types in WordPress. You can find the post setup areas in WordPress menu in the admin. To set up Banners you only need to do three things: Create New Banners Build an unlimited number of banners using special post types (on left in admin). Create Banner Sets & Control Viewing Used to control which posts show on different pages, use section control to hide or show on a page-by-page basis. Arrange Banners Arrange the order that the posts appear using the awesome post types order plugin.

Here is a graphic showing how the various element interact:

Other Sections
Introduction There are tons of sections already for Platform and more being developed. This page will cover the settings and considerations of sections not covered with their own page. Carousel Section

The carousel section has three modes: 1. Post Thumbnail Mode This mode pulls in the featured image thumbnails from recent posts in your blog.

2. FlickrRSS Mode Flickr mode uses the FlickrRSS plugin to bring in images from your Flickr account or a Flickr community. 3. NextGen Gallery Mode Uses images from a Gallery created using the NextGen Gallery plugin for WP. Troubleshooting My Carousel Isnt Working Occasionally people have problems getting their carousel working. Carousel problems are usually related to: Plugin and Javascript Conflicts Please deactivate all plugins to debug Image Dimension Conflicts If the widths of your images are greater than the space provided for them an error will be created. To fix: change the number of carousel items to a lower number. Carousel Not Filled The carousel will create an error if the images its provided (for example from a gallery) dont fully populate the width of the carousel. Add more images to fix.

Callout Section

The callout section is set up underneath Template Setup in the administrative panel Callout has four options: image, text and link. Use the drag and drop interface to place this section throughout the site. We recommend using the callout section as a call-to-action for whatever action you want your users to take. This could be subscribing to your blog, or purchasing your product.