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'.

and you should be able to reproduce most (if not all) of the elements found in our demo site. Recreating the Front Page . 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. and some of them will require a moderate level of experience working with the WordPress back end. 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. All you need is the right plugins and settings. and can be downloaded and installed individually by going to the RocketTheme website. Below.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. 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. 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.

This is the setting we use for the demo content's home page as it doesn't require the creation of a static 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 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. Under the administrative area. Under the Template Page Types list. you'll want to select both Home Page and Front Page. you can check you site's home page settings by navigating to Settings -> Reading and making sure that Your latest posts is selected. 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. 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. This can be done by navigating to Administrative Dashboard -> Chapelco Theme and selecting the + icon located just above the Style settings tab. . It's because of this that several widget and layout overrides were done. we'll break down the settings you'll need to recreate elements present in the front page of the Chapelco theme. In this section. 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. This will allow the override to cover all access scenarios that would lead a user to your site's main home page. Doing this will assign the override to these two page types.

Widget Settings .

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. Widget Sections Header Showcase Utility . Some positions (such as the Header section) are often set in the primary default widget setting. Chapelco utilizes widget overrides to allow different widget placements for various areas of your WordPress site. Below. This widget tells WordPress to start a new widget column beginning with the widget placed directly below the divider in the section. This makes it possible to not only utilize the full power of the Gantry framework. Not all of these positions were overwritten.Like any of our Gantry template demos. you'll find the widget placement and settings for the various widget positions as they appear in the Front Page widget override. You'll see the Gantry Divider in any widget section breakdowns as they are included in the demo. but to make each area of your site uniquely suited to meet your user's needs.

MainTop Sidebar Bottom Footer Copyright .

Most of the settings under Style are adjusted automatically with the selection of a theme preset. Style . the main changes being made will happen within the Style. 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. Layouts. Gizmos. To replicate the demo. This table will break down the various settings you may need to adjust in order to recreate the demo. and Advanced tabs. These settings can be adjusted by navigating to Administration -> Chapelco Theme. You can set presets using the Presets button located next to the Save option at the top of the Theme Settings page.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. Once you've selected a Preset.

UA Code: Blank Layouts . Font Size: Default Enabled: On. Height: 250. Class: Blank On Blank On On Enabled: Off.Override Default Default Option Logo Featured Image Size Setting Chapelco Width: 390. 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. Position: Left Font Family: Chapelco. Show Count: On.

3:3:3:3 Positions: 4. 3:3:3:3 Positions: 3. 4:4:4 Positions: 3. 3:3:3:3 Positions: 4. 3:6:3 Positions: 4.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: 4. 3:3:3:3 Positions: 4. 3:7:2 Advanced . 3:3:3:3 Positions: 2. 3:3:3:3 Positions: 3. 8:4 Positions: 4. 3:3:3:3 Positions: 4.

Front Page . Compile: 2.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. Debug: Off On Assignments Override Front Page Option Template Page Types Setting Home Page.

You can customize this menu by navigating to Administration -> Appearance -> Menus and creating or modifying your main menu there. Once this is done. the logo should appear in the upper-left area of the front page as it does in the demo. 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 further customize this logo by following the instructions in our FAQ.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. .

select Save. .Here is a breakdown of the widget options for this menu widget. Set the Padding Variation option to No Padding Bottom. Enter fp-search in the Custom Variations field. Here is a breakdown of the options you'll want to change to match the demo. Leaving everything else at its default setting. 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. Set the Margin Variation option to No Margin Bottom. Any options not present in this breakdown are left at default and should not be adjusted.

. 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.Showcase Section RokSprocket The main feature showcase located near the top of the demo is a 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.

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

.

rocket theme.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.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> .

</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.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.</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"> .</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.

</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/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.rocket theme. each with configurable options. </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.</p> .com/wordpress/wp_chapelco/preset-styles/">Preset<span cl ass="hidden-tablet"> Style</span>s</a></h3> <p>Eight preset style variations to choose.rocket theme.<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. perfect for magazine layouts. or as configured.com/wordpress/wp_chapelco/menu-options/">SplitMenu</a></ h3> <p>Static horizontal menu with children placed in the sidebar.

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

with a cus tom built user interface. Set the Margin Variation to No Margin Bottom.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. Set the Title to [span class=\"hidden-phone\"]Popular [/span]Features . <div class="rt-center"> <p>RokSprocket is a powerful and multi-faceted content display plugin. The following should be entered in the main text field. such as dynamic filters. . Set the Title Variation to Title 5. for easy an d efficient control.</p> </div> Here is a breakdown of options changes you'll want to make to match the demo. that combines many different layout modes. The UI has AJAX support.

RokSprocket The lower widget is a Mosiac widget used to display the various features featured in the Chapelco theme. you'll need to create the RokSprocket Widget. First. Set the Custom Variations to icon-star featuretitle . Here is a look at the Mosaic Layout Options for this widget.Set the Padding Variation to No Padding Buttom. You can find out more about RokSprocket and how to set up and modify widgets by visiting our [RokSprocket documentation][roksprocket]. You can do this by navigating to Administration -> RokSprocket Admin and creating a new Mosaic widget. . Leaving everything else at its default setting. select Save.

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

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

specific articles. or otherwise you'd like to have featured in this widget. Set the Title to Gantry Extras . You can do this by navigating to Administration -> RokSprocket Admin and creating a new Lists widget.RokSprocket Lists widget created in a very similar way to the previous RokSprocket widgets featured on the front page of the demo. First. you can add it via the Widgets menu by clicking RokSprocket and dragging it to the appropriate section. you'll need to create the RokSprocket Widget. Once you've created 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. When you've done this. you'll need to complete the following. Here is a look at the Lists Layout Options for this widget. .

Set the Title Variation field to Title 1. select Save. Leaving everything else at its default setting. Set the Custom Variations field to title3 title4 icon-cog fp-roksprocketlists .Select your RokSprocket widget in the Choose Widget field. 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. .

in the Title field.com/blog?format=feed&amp. intended to show a live site. Leaving everything else at its default setting. Enter Demo Info[span class=\"hidden-tablet\"]rmation[/span]. </span>All images are l icensed from <a href="http://www. You'll need to . select Save.<p><strong><a href="#">NOTE:</a></strong> <span class="hiddentablet">All demo content is for <strong>sample</strong> purpos es only.go ogle.com/RocketTheme"><span class="icon-facebook"></span></a > <a class="social-button rt-twitter-btn" href="https://twitte r.com/114430407008695950828/posts"><span class="icon-google -plus"></span></a> <a class="social-button rt-rss-btn" href="http://www.fa cebook.com/rockettheme"><span class="icon-twitter"></span></a> <a class="social-button rt-google-btn" href="https://plus.shutterstock.rockett heme.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.</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.com" target="_bl ank"><strong>ShutterStock</strong></a> for exclusive use on t his <strong>demo</strong> site only. Text The second Text widget in the section is made a lot like the other. Gantry Divider This widget tells WordPress to start a new widget column beginning with the widget placed directly below the divider in the section.

LLC</span></strong><br /> <span>123 WordPress Boulevard</span><br /> <small>Seattle. Set the Custom Varations to hidden-phone . select Save.</div> Here is a breakdown of options changes you'll want to make to match the demo.enter the following in the main text field. Leaving everything else at its default setting. . <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-envelope-alt"></span> </div> <div class="gantry-width-80 gantry-width-block"> <span>noreply/@domain. USA</small> </div> <div class="clear medmarginbottom">&nbsp. WA 00000. Set the Title to Contact Us .</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.com</span> </div> <div class="clear largemarginbottom">&nbsp.

<div class="rt-image"> <img src="http://demo. select Save. Enter Location in the Title field.com/wordpress/wp_chapelc o/wp-content/rockettheme/rt_chapelco_wp/frontpage/footer/img1. The title is left blank. Leaving everything else at its default setting. Enter hidden-phone in the Custom Variations field.rockettheme. jpg" alt="Image" /> </div> Here is a breakdown of options changes you'll want to make to match the demo.Text You'll need to enter the following in the main text field to create this text widget as it appears in our demo. .

. Text The text widget in this area has no title. Gantry Divider This widget tells WordPress to start a new widget column beginning with the widget placed directly below the divider in the section.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. Leave everything at its default setting. Because of this. it's preserved as a Default widget override. You'll need to enter the following in the main text field. select Save. <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.

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. This menu was created separately from the main menu linked in the header. . 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. Enter horizmenu hidden-phone in the Custom Variations field. Leaving all other options at their default settings. Set the Select Menu option to match the name of the menu you wish to appear in this area. 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.Custom Menu The Custom Menu widget allows us to add an extra menu at the bottom of the page.

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. Save the change to your site by selecting the blue Save button in the upperright area of the page.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. Navigate to the Style tab. For more information visit our Gantry documentation on the settings menu. Choose your desired logo from your local drive by clicking the Select button. . Change the Logo type to Custom. Follow the instructions to Save your selection.