chapelco tutorials

Chapelco is designed with an intricate mix of subtle style elements to add depthand create a clean and professional appearance.

A standard array of powerful features and functions are brought to Chapelco viathe Gantry Framework, a dynamic and powerful template framework.RokSprocket, a complex and diverse content display plugin, has integrated stylingwith this template.

Apache 2.x or Microsoft IIS 7PHP 5.3.xMySQL 5.0.4 or higherWordPress 3.2+Gantry Framework

NOTE: Gantry v4.0.7+ is required for Chapelco to work correctly. Formore details on the Gantry Framework, please visit its Dedicated

Introduction

Requirements

Website.

Responsive Layout8 Preset Styles76 Widget Positions10 Style & Numerous Structural Widget VariationsRokSprocket Responsive Layout IntegratedRokAjaxSearch StylingLoad TransitionsPowerful Gantry 4 FrameworkCustom Content TypographyDropDown Menu & SplitmenuFF, Safari, Chrome, Opera, IE8+ CompatibleHTML5, CSS3, LESS CSS

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

Key Features

Responsive Layout

Responsive Layout for RokSprocket

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

Recreating features of the demo site used to show off some of the moreinteresting aspects of Chapelco can be done fairly easily. All you need is the rightplugins and settings, and you should be able to reproduce most (if not all) of theelements found in our demo site.

Below, we'll break down some of these elements and give you the information youneed 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 theresult of many hours of hard work by our team, and some of them will require amoderate level of experience working with the WordPress back end. We've addedmost of these elements into the theme's core files in order to make them easilyaccessible without having to edit any code.

Here is a list of RocketTheme plugins used to create the demo version ofChapelco:

Gantry Template FrameworkRokAjaxSearchRokBoxRokCommon Library (Installed with RokSprocket)RokSprocketRokGallery

All of these plugins are included with the Chapelco RocketLauncher, and can bedownloaded and installed individually by going to the RocketTheme website.

Recreate the Demo

Recommended Plugins

Recreating the Front Page

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

The first thing you'll need to do in order to set your front page apart as it appearsin the demo is to create a setting override. This can be done by navigating toAdministrative Dashboard -> Chapelco Theme and selecting the + icon locatedjust above the Style settings tab.

It would be a good idea for organization to name this layout override somethinglike Front Page as it would be used only for the front page of your site.

The next step you'll need to take in creating your Theme Settings override is toassign the Front Page override to the site's home page. Under the TemplatePage 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 theoverride to cover all access scenarios that would lead a user to your site's mainhome page.

Under the administrative area, you can check you site's home pagesettings by navigating to Settings -> Reading and making sure thatYour latest posts is selected. This is the setting we use for the democontent'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 thefront page and our default settings in the demo by visiting the override portion ofthis tutorial.

Theme Settings

Assignments

Widget Settings

Like any of our Gantry template demos, Chapelco utilizes widget overrides toallow different widget placements for various areas of your WordPress site. Thismakes it possible to not only utilize the full power of the Gantry framework, but tomake 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 widgetpositions as they appear in the Front Page widget override. Not all of thesepositions were overwritten. Some positions (such as the Header section) are oftenset in the primary default widget setting.

One important thing to note here is that many of the widget sections included inour demo are split up using a Gantry Divider widget. This widget tells WordPressto start a new widget column beginning with the widget placed directly below thedivider in the section. You'll see the Gantry Divider in any widget sectionbreakdowns as they are included in the demo.

HeaderShowcaseUtility

Widget Sections

MainTopSidebarBottomFooterCopyright

One of the most important central features of any Gantry theme is the ability to beset up within the Theme Settings menu. These settings can be adjusted bynavigating to Administration -> Chapelco Theme. To replicate the demo, themain changes being made will happen within the Style, Gizmos, Layouts, andAdvanced tabs.

This table will break down the various settings you may need to adjust in order torecreate the demo. Most of the settings under Style are adjusted automaticallywith the selection of a theme preset. You can set presets using the Presetsbutton 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 thedemo. Keep in mind that the override indicated here relates to the theme overridein this menu.

Theme Override Settings

Style

Override Option Setting

Default Logo Chapelco

Default Featured Image SizeWidth: 390, Height: 250, Position:Left

Default Font SettingsFont Family: Chapelco, Font Size:Default

Default PaginationEnabled: On, Show Count: On, SidePages: 8

DefaultUse WordPressComments

On

Default Custom CSS Blank


Default Page Suffix Enabled: Off, Class: Blank

Default Feed Links On

Default Custom Title Tag Blank

Default Shortcodes in Widgets On

Default RokStyle On

Default Google Analytics Enabled: Off, UA Code: Blank

Gizmos

Layouts


Default Top Positions Positions: 4, 3:3:3:3

Default Header Positions Positions: 3, 3:6:3

Default Showcase Positions Positions: 4, 3:3:3:3

Default Feature Positions Positions: 4, 3:3:3:3

Default Utility Positions Positions: 4, 3:3:3:3

Default MainTop Positions Positions: 4, 3:3:3:3

Default MainBody Positions Positions: 2, 8:4

Default MainBottom Positions Positions: 4, 3:3:3:3

Default Extension Positions Positions: 4, 3:3:3:3

Default Bottom Positions Positions: 4, 3:3:3:3

Default Footer Positions Positions: 3, 4:4:4

Default Copyright Positions Positions: 3, 3:7:2

Advanced


Default Layout Mode Responsive

Default Maintenance Mode Off

Default Load Transition Off

Default Display Content On

Default Display Mainbody On

Default RTL Support On

DefaultDisable AutoParagraphs

Enabled: On, Content Type: Both

Default Disable Texturize Off

Default Selectivizr Off

Default Less CompilerCSS Compression: On, Compile: 2,Debug: Off

Default IE7 Redirect On


Front Page Template Page Types Home Page, Front Page

Assignments

Here's the widget breakdown for the Header section:

Gantry LogoGantry DividerGantry MenuGantry DividerRokAjaxSearch

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

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

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

Header Section

Gantry Logo

Gantry Divider

Gantry Menu

Here is a breakdown of the widget options for this menu widget. Any options notpresent in this breakdown are left at default and should not be adjusted.

Option Setting

Title Blank

Menu Main Menu

Menu Theme Dropdown

SplitMenu Style None

Limit Levels No

Start Level 0

End Level 0

Show All Children Yes

Show Empty Menu No

Maximum Depth 10

Custom Chrome Menu

The RokAjaxSearch widget allows users to search your site for interestingcontent. Here is a breakdown of the options you'll want to change to match thedemo.

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.

RokAjaxSearch

The main feature showcase located near the top of the demo is a RokSprocketwidget. You'll need to do two things to prepare this widget so that it looks similarto the one in the demo.

First, you'll need to create the RokSprocket Widget. You can do this by navigatingto Administration -> RokSprocket Admin and creating a new Features widget.

Here is a look at the Features Layout Options for this widget.

Showcase Section

RokSprocket

Option Setting

Display Limit ∞

Theme Showcase

Article Titles Show

Article Text Show

Preview Length ∞

Strip HTML Tags No

Arrow Navigation Show

Pagination Show

Animation Crossfade

Autoplay Disable

Autoplay Delay 5

Image Resize Disable

You can set the RokSprocket filters to include any category, specific articles, orotherwise you'd like to have featured in this widget.

Once you've created this widget, you can add it via the Widgets menu by clickingRokSprocket 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 yourWordPress site.

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

Text

You'll need to enter the following in the main text field to create this text widget asit 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-bubble icon-tasks rt-big-bubble"></span></h5> </div> <div class="gantry-width-70 gantry-width-block"> <h3 class="nomarginbottom"><a href="http://demo.rockettheme.com/wordpress/wp_chapelco/plugins/">Gantry 4<span class="hidden-tablet"> Core</span></a></h3> <p>Gantry 4 Framework powering all standardized features and functions.</p> </div>

Main Top Section

Text

</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-bubble icon-list rt-big-bubble"></span></h5> </div> <div class="gantry-width-70 gantry-width-block"> <h3 class="nomarginbottom"><a href="http://demo.rockettheme.com/wordpress/wp_chapelco/menu-options/">Dropdown<span class="hidden-tablet"> Menu</span></a></h3> <span>A CSS based dropdown menu with<span class="hidden-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-bubble icon-cog rt-big-bubble"></span></h5> </div> <div class="gantry-width-70 gantry-width-block"> <h3 class="nomarginbottom"><a href="http://demo.rockettheme.com/wordpress/wp_chapelco/plugins/">Plugins</a></h3> <p>Styled support for RokSprocket, RokAjaxSearch and RokGallery.</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-bubble icon-th rt-big-bubble"></span></h5> </div> <div class="gantry-width-70 gantry-width-block"> <h3 class="nomarginbottom"><a href="http://demo.rockettheme.com/wordpress/wp_chapelco/plugins/">Mosaic<span class="hidden-tablet"> Mode</span></a></h3> <span>Mosaic is a dynamic ajax content<span class="hidden-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-bubble icon-picture rt-big-bubble"></span></h5> </div> <div class="gantry-width-70 gantry-width-block"> <h3 class="nomarginbottom"><a href="http://demo.rockettheme.com/wordpress/wp_chapelco/preset-styles/">Preset<span class="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-bubble icon-random rt-big-bubble"></span></h5> </div> <div class="gantry-width-70 gantry-width-block"> <h3 class="nomarginbottom"><a href="http://demo.rockettheme.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 theCustom Variations field.Leaving everything else at its default setting, select Save.

Here's the widget breakdown for the Utility section:

TextRokSprocket

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 custom built user interface. The UI has AJAX support, for easy and efficient control, such as dynamic filters.</p></div>


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.

Utility Section

Text

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.

The lower widget is a Mosiac widget used to display the various features featuredin the Chapelco theme.

First, you'll need to create the RokSprocket Widget. You can do this by navigatingto Administration -> RokSprocket Admin and creating a new Mosaic widget.

You can find out more about RokSprocket and how to set up and modify widgetsby visiting our [RokSprocket documentation][roksprocket].

Here is a look at the Mosaic Layout Options for this widget.

RokSprocket

Option Setting

Theme Default

Display Limit ∞

Columns 3

Preview Length 14

Strip HTML Tags Yes

Blocks Per View 3

Article Details Hide author and date

Block Animation Fade, Scale, Rotate

Ordering Default, Title, Date, Random




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 Gantry Extras widget located in the sidebar section of the page is a

Sidebar Section

RokSprocket

RokSprocket Lists widget created in a very similar way to the previousRokSprocket widgets featured on the front page of the demo.

First, you'll need to create the RokSprocket Widget. You can do this by navigatingto Administration -> RokSprocket Admin and creating a new Lists widget.

Here is a look at the Lists Layout Options for this widget.

Option Setting

Theme Default

Display Limit ∞

Collapsible Preview Enable

Preview Length 20

Strip HTML Tags Yes

Previews Per Page 4

Arrow Navigation Show

Pagination Show

Autoplay Disable


Default Link None



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 totitle3 title4 icon-cog fp-roksprocketlists .

Leaving everything else at its default setting, select Save.


Here's the widget breakdown for the Footer section:

TextGantry DividerTextGantry DividerText

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

Footer Section

Text

<p><strong><a href="#">NOTE:</a></strong> <span class="hidden-tablet">All demo content is for <strong>sample</strong> purposes only, intended to show a live site. </span>All images are licensed from <a href="http://www.shutterstock.com" target="_blank"><strong>ShutterStock</strong></a> for exclusive use on this <strong>demo</strong> site only.</p>

<div class="rt-social-buttons largemargintop largepaddingtop"> <span class="largepaddingright hidden-tablet hidden-phone">Follow Us</span> <a class="social-button rt-facebook-btn" href="http://www.facebook.com/RocketTheme"><span class="icon-facebook"></span></a> <a class="social-button rt-twitter-btn" href="https://twitter.com/rockettheme"><span class="icon-twitter"></span></a> <a class="social-button rt-google-btn" href="https://plus.google.com/114430407008695950828/posts"><span class="icon-google-plus"></span></a> <a class="social-button rt-rss-btn" href="http://www.rockettheme.com/blog?format=feed&type=rss"><span class="icon-rss"></span></a></div>


EnterDemo Info[span class=\"hidden-tablet\"]rmation[/span].

in the Title field.Leaving everything else at its default setting, select Save.


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

Gantry Divider

Text

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


Set the Title to Contact Us .Set the Custom Varations to hidden-phone .Leaving everything else at its default setting, select Save.

You'll need to enter the following in the main text field to create this text widget asit appears in our demo. The title is left blank.

<div class="rt-image"> <img src="http://demo.rockettheme.com/wordpress/wp_chapelco/wp-content/rockettheme/rt_chapelco_wp/frontpage/footer/img1.jpg" alt="Image" /></div>


Enter Location in the Title field.Enter hidden-phone in the Custom Variations field.Leaving everything else at its default setting, select Save.

Text

Here's the widget breakdown for the Copyright section:

TextGantry DividerCustom MenuGantry DividerGantry 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.

The text widget in this area has no title. You'll need to enter the following in themain text field.

<span class="rt-text-1">Designed by</span> <span class="rt-text-2">RocketTheme</span>


Leave everything at its default setting, select Save.


Copyright Section

Text

Gantry Divider

The Custom Menu widget allows us to add an extra menu at the bottom of thepage. This menu was created separately from the main menu linked in theheader, 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 matchthe demo.

Set the Select Menu option to match the name of the menu you wish toappear in this area.Enter horizmenu hidden-phone in the Custom Variations field.Leaving all other options at their default settings, click Save.

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

Custom Menu

Gantry To Top

Log in to the WordPress administrative dashboard at http://(Your WordPressSite 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.

Log in to the WordPress administrative dashboard at http://(Your WordPressSite 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 upper-right area of the page.

Where can I find theme settings?

How do I change the logo?

chapelco tutorials

Documents

chapelco demo

chapelco rocketlauncher

demo site

gantry frameworknote

gantry v4

aresponsive layout

layout overrides

page of thechapelco