Chroma Theme Documentation

 

View Demo Buy Theme

Supported Plugins

This theme supports a variety of the top plugins available to WordPress.

  • This theme is fully compatible with the WooCommerce Plugin. We added CSS styles to fit the design and all required configurations to integrate seamlessly.

    To set up WooCommerce, all you need to do is install the WooCommerce plugin. For more info, check out the WooCommerce documentation using the link below:

    WooCommerce Documentation

  • We have included CSS styles to seamlessly integrate the Contact Form 7 plugin with this theme. Simply install the plugin and start making your forms!

    Contact Form 7 Plugin Page

    Contact Form 7 Documentation

  • The Google Typography plugins allows you to use any Google Font for any text on your existing website without writing a single line of code. Once the plugin is installed, you can access it from the Appearance > Typography settings page.

    Google Typography Plugin Page

Plugin SupportPlease be aware that we do not give support of any kind to third party plugins. If you are having issues with a plugin, please contact the plugin developer.

Page Templates

This theme provides a few basic templates that create a starting point for endless combinations and customization options as well as an extensive home template.

  • This template includes the following page elements:

    • Header
    • Page Header (can be enabled/disabled from the customizer)
    • Footer
  • This template includes the following page elements:

    • Header
    • Coach List
    • Footer
  • This template includes the following page elements:

    • Header
    • Gallery List
    • Footer
  • This template includes the following page elements:

    • Header
    • Slider
    • Album
    • Highlighted Post List
    • Testimonial List
    • Program List
    • Location
    • Footer
    Note: Make sure the “Text” tab in your editor is selected when pasting the code, you may switch back to “Visual” once pasted.
  • This template includes the following page elements:

    • Header
    • Program List
    • Footer

Setting up homepage slider

After you’ve added slides to your slider type and configured their settings you will want to add them to a page.

See more information about adding your slides to a slider type:

Setting up your Elastic Slider

Setting up your Slit Slider

To do this you’ll need to create a page and then add the slider shortcode to it.

Edit your page and select the slider type from the shortcode box on the right configure your setting and them click insert shortcode. The shortcode will them appear in the editor on your page.

Smiley face

Next  select the ‘Fullscreen’ Page template from the Page attributes box on the right:

Smiley face

Portfolio

Display your best work whether it be audio, video, galleries, or even individual photos.

 

  • Often your work lives on a different site, or is another site — use this option to link this portfolio item to an external page, rather than an internal page within your site..

Changelog

6 February 2014 – Version 2.1.0

  • Updated Homepage templates
  • Slider Height adjustments
  • Added responsive styles for horizontal navigation
  • Added ability to control links that appear for images within an album
  • Various bug fixes

17 January 2014 – Version 2.0.0

  • Added new page templates
  • Added thumbnail facial recognition
  • Added horizontal navigation option
  • Added optimizations to decrease page load times
  • Added optimizations to decrease admin panel load times
  • Added audio and video shortcodes
  • Added support for WordPress 3.8
  • Various bug fixes

30 October 2013 – Version 1.1.0

  • Added Portfolio with video support
  • Added EXIF data display support
  • Added Flexslider with Crossfade ‘fading’ Transition
  • Added ability to manually edit Copyright
  • Added custom buttons to slider (allowing you to link to any album, post or page you want!)
  • Added title and description support to lightbox
  • Added option to hide/show title of slide
  • Added ‘back to top’ button
  • Added Hide/Show footer
  • Enhanced hover effects on galleries to feature options to view in lightbox and/or page
  • Added post pagination
  • Added ‘Download this image’ button option (Set this option on individual albums)
  • Various minor bug fixes

Importing Demo Content

Below explanation is an step by step explanation on how to import our demo website content, please read carefully and if you face any problems that is not covered here, open a thread in our support forum.

Download Demo Content

Before You Import Demo ContentPlease ensure you’ve installed the T2T Toolkit plugin before importing the Demo XML!
  • Login into your WordPress Admin area
  • Navigate to Tools -> Import in the blog’s admin panels.
  • Click on the WordPress option and follow the instructions if Import plugin isn’t installed yet (3.0+).
  • Download and unzip the demo content using the button above.
  • You will first be asked to map the authors in this export file to users on the blog. For each author, you may choose to map to an existing user on the blog or to create a new user.
  • WordPress will then import each of the posts, page, custom post types, comments, and categories contained in this file into your blog.
  • After this, you will also need to update the Menus by going to Appearance > Menus. Locate the Theme Locations box and select from the drop-down “Main Navigation”. Click the Save button under it to save the changes.
  • Done! You should now have the dummy/demo content similar from the Live Preview of the theme.

Page Options

When creating a page, there are several options available to customize the look and layout the the page.

Screen Shot 2013-10-17 at 2.14.37 PM

  • This option simply allows you to include sidebars, or not, which can be populated with widgets. Often time widgets provide functionality that available shortcodes don’t, but for the most part sidebars aren’t necessary.

    • No Sidebar: This layout is an empty container, with no sidebars.
    • Left Sidebar: Places a sidebar on the left side of the page. Widgets for this sidebar can be provided using the “Page Sidebar”.
    • Right Sidebar: Places a sidebar on the right side of the page. Widgets for this sidebar are also provided using the “Page Sidebar”.

Using The Customizer

Chroma includes extensive customizer options using the real-time WordPress Customizer panel. To access the theme customizer navigate to Appearance > Customize.

Highlighted below are the sections of the customizer for chroma-specific customization options:

Screen Shot 2013-10-17 at 1.48.05 PM

  • Theme options contains general options for customizing various features in Chroma.

    • Logo Height – The height of the logo area (in pixels) in the header of the theme.
    • Full Width Column Width – The width of the site when using a fixed width.
    • Logo Upload – The logo image that will appear in the header.
    • Retina Logo Upload – The retina (2x) version of your logo. This is optional.
    • Favicon Upload  – Upload a custom favicon icon that will appear next to your URL in web browsers.
    • Hide sidebar on photo page? – If checked, the collapsable sidebar on the photo page will default to hidden.
    • Disable Social Sharing? – If checked, the social icons will not appear on the photo page.
    • Always show footer? – If checked, the footer will always be visible, rather than required a click to expand.
    • Disable Right Clicking – If checked, people visiting your site will not be able to right click on your photos.
    • Custom CSS – Add any custom css to your theme. This will be included in the HEAD section of every page.
    • Custom JS – Add any custom js to your theme. This will be included in the HEAD section of every page.
    • Analytics Code – Add your custom analytics embed code (be sure to include any script tags with your embed code)
    • Copyright – Override the default copyright text that appears in the footer.
  • Theme backgrounds contain several key areas of the theme where you can customize the background style.

    • Page Header Background – The Page Header Background appears on all Sub-pages of Chroma and specifically on the Default page template.
    • Page Header Background Repeat – How to repeat the header background image.
    • Page Header Background Color – If you choose not to upload a background image, you can optionally choose a solid color for your background.
    • Page Background – This is the background that appears behind all page content in the theme between the header and footer area.
    • Page Background Repeat – How to repeat the page background image.
    • Page Background Color – If you choose not to upload a background image, you can optionally choose a solid color for your background.
    • Footer Background – The background for the footer/widgets area.
    • Footer Background Repeat – How to repeat the footer background image.
    • Footer Background Color – If you choose not to upload a background image, you can optionally choose a solid color for your background.
  • Theme Colors contain a selection of color pickers used to change the text/background colors used for almost every element within Chroma. Whenever you change a color, the demo on the right will refresh in realtime showing your change.

  • Theme Social Options contain a list of social website you can add your URLs for. These icons appear in the right side menu in the theme.

Setup Your Blog

To setup your blog, simply create a new page in your WordPress admin named Blog. Next, navigate to Settings > Reading and under the Front page displays > Posts page option, select the newly created Blog page.

Screen Shot 2013-09-21 at 1.59.40 PM

 

Helpful TipYou may also use the Post List shortcode in any page to create your blog.

Using A Custom Gravatar

This theme offers support for a custom Gravatar image. To replace the default Gravatar, create a custom image called gravatar.png and upload it to the theme /images/ folder. Once uploaded, select the new Gravatar from the “Discussion” options which can be found under Settings > Discussion.

Screen Shot 2013-09-20 at 11.55.41 PM

Theme Installation

To install the theme, unzip the file you’ve downloaded from ThemeForest and use one of the two methods listed below to upload the theme files to WordPress:

  • WordPress Upload: Navigate to Appearance > Themes > Install Themes > Upload. Click browse, select the zipped theme folder and click “Install Now”. The theme will be uploaded and automatically activated.
Please note that you should not upload the zip file you’ve downloaded from ThemeForest as you will get a “broken stylesheet” error. Instead locate the zip file inside the main zip file you have downloaded and extracted.
  • FTP Upload: Using your FTP program, upload the non-zipped theme folder into the /wp- content/themes/ folder of your WordPress install. Once uploaded, navigate to Appearance > Themes and under the “Available Themes” section, activate FluidApp.

 

Watch the 3-Minute Theme Installation Video

Page Templates

error:1407742E:SSL routines:SSL23_GET_SERVER_HELLO:tlsv1 alert protocol version