Introduction

Chapelco is designed with an intricate mix of subtle style elements to add depth and create a clean and professional appearance. A standard array of powerful features and functions are brought to Chapelco via the Gantry Framework, a dynamic and powerful template framework. RokSprocket, a complex and diverse content display plugin, has integrated styling with this template.

Requirements
Apache 2.x or Microsoft IIS 7 PHP 5.3.x MySQL 5.0.4 or higher WordPress 3.2+ Gantry Framework NOTE: Gantry v4.0.7+ is required for Chapelco to work correctly. For more details on the Gantry Framework, please visit its Dedicated

Website.

Key Features
Responsive Layout 8 Preset Styles 76 Widget Positions 10 Style & Numerous Structural Widget Variations RokSprocket Responsive Layout Integrated RokAjaxSearch Styling Load Transitions Powerful Gantry 4 Framework Custom Content Typography DropDown Menu & Splitmenu FF, Safari, Chrome, Opera, IE8+ Compatible HTML5, CSS3, LESS CSS

Responsive Layout

Chapelco's responsive grid system is designed for desktop, tablet and smartphone systems, each with minor modifications to ensure compatibility in each mode.

Responsive Layout for RokSprocket

Chapelco comes with the RokSprocket plugin that is built to work with a responsive layout and support mobile touch events, such as 'swipe'.

Recreate the Demo

Recreating features of the demo site used to show off some of the more interesting aspects of Chapelco can be done fairly easily. All you need is the right plugins and settings, and you should be able to reproduce most (if not all) of the elements found in our demo site. Below, we'll break down some of these elements and give you the information you need to know to recreate them on your own site using the Chapelco theme. Keep in mind that a lot of the detail that makes our demos look so good are the result of many hours of hard work by our team, and some of them will require a moderate level of experience working with the WordPress back end. We've added most of these elements into the theme's core files in order to make them easily accessible without having to edit any code.

Recommended Plugins
Here is a list of RocketTheme plugins used to create the demo version of Chapelco: Gantry Template Framework RokAjaxSearch RokBox RokCommon Library (Installed with RokSprocket) RokSprocket RokGallery All of these plugins are included with the Chapelco RocketLauncher, and can be downloaded and installed individually by going to the RocketTheme website.

Recreating the Front Page

The front page of the Chapelco demo sits apart from the rest of the page layouts in that it features the latest and greatest features of the blog. It's because of this that several widget and layout overrides were done. In this section, we'll break down the settings you'll need to recreate elements present in the front page of the Chapelco theme.

Theme Settings
The first thing you'll need to do in order to set your front page apart as it appears in the demo is to create a setting override. This can be done by navigating to Administrative Dashboard -> Chapelco Theme and selecting the + icon located just above the Style settings tab. It would be a good idea for organization to name this layout override something like Front Page as it would be used only for the front page of your site.

Assignments
The next step you'll need to take in creating your Theme Settings override is to assign the Front Page override to the site's home page. Under the Template Page Types list, you'll want to select both Home Page and Front Page. Doing this will assign the override to these two page types. This will allow the override to cover all access scenarios that would lead a user to your site's main home page. Under the administrative area, you can check you site's home page settings by navigating to Settings -> Reading and making sure that Your latest posts is selected. This is the setting we use for the demo content's home page as it doesn't require the creation of a static page. You can find more information about the entire override breakdown for both the front page and our default settings in the demo by visiting the override portion of this tutorial.

Widget Settings

Like any of our Gantry template demos, Chapelco utilizes widget overrides to allow different widget placements for various areas of your WordPress site. This makes it possible to not only utilize the full power of the Gantry framework, but to make each area of your site uniquely suited to meet your user's needs. Below, you'll find the widget placement and settings for the various widget positions as they appear in the Front Page widget override. Not all of these positions were overwritten. Some positions (such as the Header section) are often set in the primary default widget setting. One important thing to note here is that many of the widget sections included in our demo are split up using a Gantry Divider widget. This widget tells WordPress to start a new widget column beginning with the widget placed directly below the divider in the section. You'll see the Gantry Divider in any widget section breakdowns as they are included in the demo.

Widget Sections
Header Showcase Utility

MainTop Sidebar Bottom Footer Copyright

Theme Override Settings

One of the most important central features of any Gantry theme is the ability to be set up within the Theme Settings menu. These settings can be adjusted by navigating to Administration -> Chapelco Theme. To replicate the demo, the main changes being made will happen within the Style, Gizmos, Layouts, and Advanced tabs. This table will break down the various settings you may need to adjust in order to recreate the demo. Most of the settings under Style are adjusted automatically with the selection of a theme preset. You can set presets using the Presets button located next to the Save option at the top of the Theme Settings page. Once you've selected a Preset, these options can be further adjusted to match the demo. Keep in mind that the override indicated here relates to the theme override in this menu.

Style

Override Default Default

Option Logo Featured Image Size

Setting Chapelco Width: 390, Height: 250, Position: Left Font Family: Chapelco, Font Size: Default Enabled: On, Show Count: On, Side Pages: 8 On

Default

Font Settings

Default

Pagination Use WordPress Comments Custom CSS

Default Default

Blank

Gizmos
Override Default Default Default Default Default Default Option Page Suffix Feed Links Custom Title Tag Shortcodes in Widgets RokStyle Google Analytics Setting Enabled: Off, Class: Blank On Blank On On Enabled: Off, UA Code: Blank

Layouts

Override Default Default Default Default Default Default Default Default Default Default Default Default

Option Top Positions Header Positions Showcase Positions Feature Positions Utility Positions MainTop Positions MainBody Positions MainBottom Positions Extension Positions Bottom Positions Footer Positions Copyright Positions

Setting Positions: 4, 3:3:3:3 Positions: 3, 3:6:3 Positions: 4, 3:3:3:3 Positions: 4, 3:3:3:3 Positions: 4, 3:3:3:3 Positions: 4, 3:3:3:3 Positions: 2, 8:4 Positions: 4, 3:3:3:3 Positions: 4, 3:3:3:3 Positions: 4, 3:3:3:3 Positions: 3, 4:4:4 Positions: 3, 3:7:2

Advanced

Override Default Default Default Default Default Default Default Default Default Default Default

Option Layout Mode Maintenance Mode Load Transition Display Content Display Mainbody RTL Support Disable Auto Paragraphs Disable Texturize Selectivizr Less Compiler IE7 Redirect

Setting Responsive Off Off On On On Enabled: On, Content Type: Both Off Off CSS Compression: On, Compile: 2, Debug: Off On

Assignments
Override Front Page Option Template Page Types Setting Home Page, Front Page

Header Section

Here's the widget breakdown for the Header section: Gantry Logo Gantry Divider Gantry Menu Gantry Divider RokAjaxSearch

Gantry Logo
The first thing you'll need to do is click and drag the Gantry Logo widget from the Available Widgets area of the Widgets menu to the appropriate section. Once this is done, the logo should appear in the upper-left area of the front page as it does in the demo. You can further customize this logo by following the instructions in our FAQ.

Gantry Divider
This widget tells WordPress to start a new widget column beginning with the widget placed directly below the divider in the section.

Gantry Menu
The Gantry Menu widget should be set to match your site's main menu as it serves as the primary menu widget for the entire site. You can customize this menu by navigating to Administration -> Appearance -> Menus and creating or modifying your main menu there.

Here is a breakdown of the widget options for this menu widget. Any options not present in this breakdown are left at default and should not be adjusted. Option Title Menu Menu Theme SplitMenu Style Limit Levels Start Level End Level Show All Children Show Empty Menu Maximum Depth Custom Chrome Setting Blank Main Menu Dropdown None No 0 0 Yes No 10 Menu

RokAjaxSearch
The RokAjaxSearch widget allows users to search your site for interesting content. Here is a breakdown of the options you'll want to change to match the demo. Set the Margin Variation option to No Margin Bottom. Set the Padding Variation option to No Padding Bottom. Enter fp-search in the Custom Variations field. Leaving everything else at its default setting, select Save.

Showcase Section

RokSprocket
The main feature showcase located near the top of the demo is a RokSprocket widget. You'll need to do two things to prepare this widget so that it looks similar to the one in the demo. First, you'll need to create the RokSprocket Widget. You can do this by navigating to Administration -> RokSprocket Admin and creating a new Features widget. Here is a look at the Features Layout Options for this widget.

Option Display Limit Theme Article Titles Article Text Preview Length Strip HTML Tags Arrow Navigation Pagination Animation Autoplay Autoplay Delay Image Resize

Setting ! Showcase Show Show ! No Show Show Crossfade Disable 5 Disable

You can set the RokSprocket filters to include any category, specific articles, or otherwise you'd like to have featured in this widget. Once you've created this widget, you can add it via the Widgets menu by clicking RokSprocket and dragging it to the appropriate section. When you've done this, you'll need to complete the following. Select your RokSprocket Featured widget in the Choose Widget field. Set the Custom Variations field to fp-roksprocket-features . Leaving everything else at its default setting, select Save. The widget should now be created and ready for use on the front page of your WordPress site.

Main Top Section

Here's the widget breakdown for the Main Top section: Text

Text
You'll need to enter the following in the main text field to create this text widget as it appears in our demo.
<div class="gantry-width-block demo-width-100"> <div class="gantry-width-33 gantry-width-block"> <div class="gantry-width-spacer"> <div class="gantry-width-30 gantry-width-block"> <h5 class="title largemarginright"><span class="rt-bub ble icon-tasks rt-big-bubble"></span></h5> </div> <div class="gantry-width-70 gantry-width-block"> <h3 class="nomarginbottom"><a href="http://demo.rocket theme.com/wordpress/wp_chapelco/plugins/">Gantry 4<span class= "hidden-tablet"> Core</span></a></h3> <p>Gantry 4 Framework powering all standardized featur es and functions.</p> </div>

</div> </div> <div class="gantry-width-33 gantry-width-block"> <div class="gantry-width-spacer"> <div class="gantry-width-30 gantry-width-block"> <h5 class="title largemarginright"><span class="rt-bub ble icon-list rt-big-bubble"></span></h5> </div> <div class="gantry-width-70 gantry-width-block"> <h3 class="nomarginbottom"><a href="http://demo.rocket theme.com/wordpress/wp_chapelco/menu-options/">Dropdown<span c lass="hidden-tablet"> Menu</span></a></h3> <span>A CSS based dropdown menu with<span class="hidde n-large"> advanced</span> options such as mutli-columns.</span > </div> </div> </div> <div class="gantry-width-33 gantry-width-block"> <div class="gantry-width-spacer"> <div class="gantry-width-30 gantry-width-block"> <h5 class="title largemarginright"><span class="rt-bub ble icon-cog rt-big-bubble"></span></h5> </div> <div class="gantry-width-70 gantry-width-block"> <h3 class="nomarginbottom"><a href="http://demo.rocket theme.com/wordpress/wp_chapelco/plugins/">Plugins</a></h3> <p>Styled support for RokSprocket, RokAjaxSearch and R okGallery.</p> </div> </div> </div> </div> <div class="clear"></div> <div class="gantry-width-block demo-width-100"> <div class="gantry-width-33 gantry-width-block"> <div class="gantry-width-spacer"> <div class="gantry-width-30 gantry-width-block">

<h5 class="title largemarginright"><span class="rt-bub ble icon-th rt-big-bubble"></span></h5> </div> <div class="gantry-width-70 gantry-width-block"> <h3 class="nomarginbottom"><a href="http://demo.rocket theme.com/wordpress/wp_chapelco/plugins/">Mosaic<span class="h idden-tablet"> Mode</span></a></h3> <span>Mosaic is a dynamic ajax content<span class="hid den-large"> display</span> mode, perfect for magazine layouts. </span> </div> </div> </div> <div class="gantry-width-33 gantry-width-block"> <div class="gantry-width-spacer"> <div class="gantry-width-30 gantry-width-block"> <h5 class="title largemarginright"><span class="rt-bub ble icon-picture rt-big-bubble"></span></h5> </div> <div class="gantry-width-70 gantry-width-block"> <h3 class="nomarginbottom"><a href="http://demo.rocket theme.com/wordpress/wp_chapelco/preset-styles/">Preset<span cl ass="hidden-tablet"> Style</span>s</a></h3> <p>Eight preset style variations to choose, each with configurable options.</p> </div> </div> </div> <div class="gantry-width-33 gantry-width-block"> <div class="gantry-width-spacer"> <div class="gantry-width-30 gantry-width-block"> <h5 class="title largemarginright"><span class="rt-bub ble icon-random rt-big-bubble"></span></h5> </div> <div class="gantry-width-70 gantry-width-block"> <h3 class="nomarginbottom"><a href="http://demo.rocket theme.com/wordpress/wp_chapelco/menu-options/">SplitMenu</a></ h3> <p>Static horizontal menu with children placed in the sidebar, or as configured.</p>

</div> </div> </div> </div> <div class="clear"></div>

Here is a breakdown of options changes you'll want to make to match the demo. Enter Template Overview as the Title of the widget. Set the Title Variation option to Title 5. Enter icon-star featuretitle fp-maintop hidden-phone in the Custom Variations field. Leaving everything else at its default setting, select Save.

Utility Section
Here's the widget breakdown for the Utility section: Text RokSprocket

Text

The Text widget in the section requires RokCandy to display the title properly. The [span] tags are used to add the hidden-phone CSS override to the title so the word Popular is hidden on smaller screens. The following should be entered in the main text field.
<div class="rt-center"> <p>RokSprocket is a powerful and multi-faceted content display plugin, that combines many different layout modes; with a cus tom built user interface. The UI has AJAX support, for easy an d efficient control, such as dynamic filters.</p> </div>

Here is a breakdown of options changes you'll want to make to match the demo. Set the Title to [span class=\"hidden-phone\"]Popular [/span]Features . Set the Title Variation to Title 5. Set the Margin Variation to No Margin Bottom.

Set the Padding Variation to No Padding Buttom. Set the Custom Variations to icon-star featuretitle . Leaving everything else at its default setting, select Save.

RokSprocket

The lower widget is a Mosiac widget used to display the various features featured in the Chapelco theme. First, you'll need to create the RokSprocket Widget. You can do this by navigating to Administration -> RokSprocket Admin and creating a new Mosaic widget. You can find out more about RokSprocket and how to set up and modify widgets by visiting our [RokSprocket documentation][roksprocket]. Here is a look at the Mosaic Layout Options for this widget.

Option Theme Display Limit Columns Preview Length Strip HTML Tags Blocks Per View Article Details Block Animation Ordering Image Resize

Setting Default ! 3 14 Yes 3 Hide author and date Fade, Scale, Rotate Default, Title, Date, Random Disable

You can set the RokSprocket filters to include any category, specific articles, or otherwise you'd like to have featured in this widget. Once you've created this widget, you can add it via the Widgets menu by clicking RokSprocket and dragging it to the appropriate section. When you've done this, you'll need to complete the following. Select your RokSprocket Mosaic widget in the Choose Widget field. Set the Corner Variation to Basic. Enter fp-mosaic in the Custom Variations field. Leaving everything else at its default setting, select Save. The widget should now be created and ready for use on the front page of your WordPress site.

Sidebar Section

RokSprocket
The Gantry Extras widget located in the sidebar section of the page is a

RokSprocket Lists widget created in a very similar way to the previous RokSprocket widgets featured on the front page of the demo. First, you'll need to create the RokSprocket Widget. You can do this by navigating to Administration -> RokSprocket Admin and creating a new Lists widget. Here is a look at the Lists Layout Options for this widget. Option Theme Display Limit Collapsible Preview Preview Length Strip HTML Tags Previews Per Page Arrow Navigation Pagination Autoplay Image Resize Default Link Setting Default ! Enable 20 Yes 4 Show Show Disable Disable None

You can set the RokSprocket filters to include any category, specific articles, or otherwise you'd like to have featured in this widget. Once you've created this widget, you can add it via the Widgets menu by clicking RokSprocket and dragging it to the appropriate section. When you've done this, you'll need to complete the following. Set the Title to Gantry Extras .

Select your RokSprocket widget in the Choose Widget field. Set the Title Variation field to Title 1. Set the Custom Variations field to title3 title4 icon-cog fp-roksprocketlists . Leaving everything else at its default setting, select Save. The widget should now be created and ready for use on the front page of your WordPress site.

Footer Section

Here's the widget breakdown for the Footer section: Text Gantry Divider Text Gantry Divider Text

Text
You'll need to enter the following in the main text field to create this text widget as it appears in our demo.

<p><strong><a href="#">NOTE:</a></strong> <span class="hiddentablet">All demo content is for <strong>sample</strong> purpos es only, intended to show a live site. </span>All images are l icensed from <a href="http://www.shutterstock.com" target="_bl ank"><strong>ShutterStock</strong></a> for exclusive use on t his <strong>demo</strong> site only.</p> <div class="rt-social-buttons largemargintop largepaddingtop"> <span class="largepaddingright hidden-tablet hidden-phone">F ollow Us</span> <a class="social-button rt-facebook-btn" href="http://www.fa cebook.com/RocketTheme"><span class="icon-facebook"></span></a > <a class="social-button rt-twitter-btn" href="https://twitte r.com/rockettheme"><span class="icon-twitter"></span></a> <a class="social-button rt-google-btn" href="https://plus.go ogle.com/114430407008695950828/posts"><span class="icon-google -plus"></span></a> <a class="social-button rt-rss-btn" href="http://www.rockett heme.com/blog?format=feed&amp;type=rss"><span class="icon-rss" ></span></a> </div>

Here is a breakdown of options changes you'll want to make to match the demo. Enter Demo Info[span class=\"hidden-tablet\"]rmation[/span]. in the Title field. Leaving everything else at its default setting, select Save.

Gantry Divider
This widget tells WordPress to start a new widget column beginning with the widget placed directly below the divider in the section.

Text
The second Text widget in the section is made a lot like the other. You'll need to

enter the following in the main text field.

<div class="gantry-width-10 gantry-width-block"> <span class="icon-phone"></span> </div> <div class="gantry-width-80 gantry-width-block"> <strong><span>+1 (555) 555-555-5555</span></strong><br /> <small>+1 (555) 555-555-5556</small> </div> <div class="clear medmarginbottom">&nbsp;</div> <div class="gantry-width-10 gantry-width-block"> <span class="icon-home"></span> </div> <div class="gantry-width-80 gantry-width-block"> <strong><span>Chapelco Theme, LLC</span></strong><br /> <span>123 WordPress Boulevard</span><br /> <small>Seattle, WA 00000, USA</small> </div> <div class="clear medmarginbottom">&nbsp;</div> <div class="gantry-width-10 gantry-width-block"> <span class="icon-envelope-alt"></span> </div> <div class="gantry-width-80 gantry-width-block"> <span>noreply/@domain.com</span> </div> <div class="clear largemarginbottom">&nbsp;</div>

Here is a breakdown of options changes you'll want to make to match the demo. Set the Title to Contact Us . Set the Custom Varations to hidden-phone . Leaving everything else at its default setting, select Save.

Text
You'll need to enter the following in the main text field to create this text widget as it appears in our demo. The title is left blank.
<div class="rt-image"> <img src="http://demo.rockettheme.com/wordpress/wp_chapelc o/wp-content/rockettheme/rt_chapelco_wp/frontpage/footer/img1. jpg" alt="Image" /> </div>

Here is a breakdown of options changes you'll want to make to match the demo. Enter Location in the Title field. Enter hidden-phone in the Custom Variations field. Leaving everything else at its default setting, select Save.

Copyright Section

Here's the widget breakdown for the Copyright section: Text Gantry Divider Custom Menu Gantry Divider Gantry To Top The Copyright section remains the same for all areas of the site. Because of this, it's preserved as a Default widget override.

Text
The text widget in this area has no title. You'll need to enter the following in the main text field.
<span class="rt-text-1">Designed by</span> <span class="rt-tex t-2">RocketTheme</span>

Here is a breakdown of options changes you'll want to make to match the demo. Leave everything at its default setting, select Save.

Gantry Divider
This widget tells WordPress to start a new widget column beginning with the widget placed directly below the divider in the section.

Custom Menu
The Custom Menu widget allows us to add an extra menu at the bottom of the page. This menu was created separately from the main menu linked in the header, and can be configured by going to Administration -> Appearance -> Menus. Here is a breakdown of what you'll need to change in the widget options to match the demo. Set the Select Menu option to match the name of the menu you wish to appear in this area. Enter horizmenu hidden-phone in the Custom Variations field. Leaving all other options at their default settings, click Save.

Gantry To Top
The Gantry To Top widget is a simple indicator which allows users to jump to the top of a page with a single click. Just click and drag this widget into the section to activate it. We added Top in the To Top Text field as the only change from default.

Where can I find theme settings?

Log in to the WordPress administrative dashboard at http://(Your WordPress Site URL)/wp-admin/ Select the Chapelco Theme sidebar tab on the left of the dashboard. For more information visit our Gantry documentation on the settings menu.

How do I change the logo?

Log in to the WordPress administrative dashboard at http://(Your WordPress Site URL)/wp-admin/ Select Chapelco Theme from the sidebar. Navigate to the Style tab. Change the Logo type to Custom. Choose your desired logo from your local drive by clicking the Select button. Follow the instructions to Save your selection. Save the change to your site by selecting the blue Save button in the upperright area of the page.