Installation

You can either choose to upload the theme to your server via ftp (only upload the unzipped folder “camyno” into the folder wp-content/themes/ ) or via WordPress upload function. To use the upload function of the WordPress admin panel make sure to only upload the camyno.zip folder.

Instructions for using the WordPress theme up-loader are as follows.

  1. First navigate to your Creative Market downloads page and download the Camyno file. You will need to unzip the Camyno_Package zip file to locate the installable WordPress theme.
  2. Then navigate to Appearance > Themes from your WordPress dashboard, then press the “Add New” button found at the top of the screen.
  3. Now look just below the “Install Themes” headline, and press the “Upload” button.
  4. Use the “Choose File” button to locate the installable WordPress theme file you received from Creative Market (it will be labeled “camyno.zip”), and double click it.
  5. The file will now begin uploading. After the upload has completed you will be given the option to view a live preview, activate Camyno, or return to your themes page.

Helpful Resources

If you are new to using WordPress themes the following resources may be useful to get you started.

Front Page Blog Page

Front Page: Setting up the front page for Camyno is no different than the default WordPress theme, simply go to Appearance > Customize from the WordPress dashboard and locate the section titled “Static Front Page”. Under this section are the options for Front Page and Posts Page.

Blog Page: Setting up the Blog Page can be done in 1 of 2 ways, the first is the standard WordPress way by specifying a page to display your posts on by following the same process for specifying a front page. The second way is to create a static page and use the provided blog shortcode to display your posts. The advantage to this method is that you have more control over how your blog is displayed.

Demo Content

Camyno includes more than 100 pages for you to easily install and work with, demo LayerSliders can also be uploaded from within the plugin.

Before You Start

If you plan on using either WooComerce, or bbPress, they must be installed and activated before you install the demo content, otherwise the page builder will remove the modules specific to these plugins.

Step By Step Instructions

  1. Log in to your WordPress dashboard and navigate to Tools > Import.
  2. On this page you will see a list of available content importers
  3. Click on WordPress at the bottom of the list, then press “Install Now” in the pop up window.
  4. After installation is complete press “Activate Plugin & Run Importer” on the next screen.
  5. Press “Choose File”, locate the Camyno demo content file, located inside of the Camyno_Package folder.
  6. Press “Upload file and import”
  7. On the next screen assign an author for the content to be assigned and make sure the option for “Download and import file attachments” is checked.
  8. Now press “Submit”.
  9. Please be patient the upload time may be lengthy, this is because of the high quality images.

Installing Demo LayerSliders

To install the demo LayerSliders, follow the steps below.

  1. Make sure you have LayerSlider installed before continuing, LayerSlider installation is explained below.
  2. Next log in to your WordPress dashboard and navigate to LayerSlider WP > All Sliders.
  3. At the top of the page you will find a button title “Import sample sliders”, press this.
  4. You will now be able to edit three sample sliders.

Child Theme

Using a child theme is highly recommended if you are planning on modifying this theme. Below is an excerpt from the WordPress Codex explaining some of the benefits of using a child theme.

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme. Child themes allow you to modify, or add to the functionality of that parent theme. A child theme is the safest and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you can create a child theme and override within.

Camyno includes an example child theme to get you started, the stylesheet of which has already been configured. It is recommended that you use this child theme to make modifications to Camyno. To do so, follow the below instructions.

Setting Up A Camyno Child Theme

  1. First make sure Camyno has been successfully installed, it does not need to be the active theme.
  2. Locate the zip file labeled “camyno-child.zip” found in the same folder as “camyno.zip” of your download file.
  3. Do not unzip this file. This is an installable WordPress theme.
  4. Upload this zip file as is using either the WordPress up-loader, or via FTP to your /wp-content/themes/ folder following the same procedure you would for any theme.
  5. Navigate to the themes page (Appearance > Themes) from the WordPress dashboard and activate the Camyno Child Theme.

To learn more about child themes use the WordPress Codex.

Mega Menus

Before You Start

Camyno includes 3 options for displaying your primary navigation, drop-down being the only one which supports mega menus, so before you start make sure the menu setting in the Theme Settings panel is set to “Dropdown” (this is the default setting).

Now that your menu version is set to drop-down you will need to go to the custom menus screen (Appearance > Menus). Once there look to the top of the screen and locate the “Screen Options” tab. Open this tab and make sure the option for “CSS Classes” is checked.

How It Works

Setting up a mega menu is nearly identical to setting up a traditional WordPress custom menu. The only difference is the addition of a few custom CSS classes. Custom Menu Structure should resemble the structure below. Where Home, Contact, and Shop are top level items and Shop contains the mega menu.

  • Home
  • Contact
  • Shop (Mega menu)

    • Clothing (First Column)

      • Shirts
      • Shorts
      • jackets
    • Furniture (Second Column)

      • Chairs
      • Tables
      • Desks

Setting it Up

To better explain how to correctly set up a mega menu I will be using the above example structure as an example menu. To create a custom menu simply follow the steps below.

  1. The top level menu item containing the mega menu needs to have a class of mega-menu added to it.
  2. The columns of the mega menu item can be organized using the direct descendants of this menu item. In other words each direct descendant will now be its own column in the mega menu and this items direct descendants will be items within this column.
  3. Once you have created your columns (you can have a maximum of 6) you need to add an additional class to the mega menu parent item. This class is columns-### where ### is the number of columns. So for example a 3 column mega menu would require a class of columns-3.
  4. If you wish for the mega menu to stretch to match the with of the header you just need to add a class of full-width to the mega menu parent item.
  5. Now that you have added the appropriate structure classes you can set up the titles, any menu item within the mega menu can be a title item. Simply find the item you wish to be a title and add a class of title to it.

Below you will find the example from above but with a visualization of which menu items should have which CSS classes applied to them.

  • Home
  • Contact
  • Shop mega-menu columns-2

    • Clothing title

      • Shirts
      • Shorts
      • jackets
    • Furniture title

      • Chairs
      • Tables
      • Desks

LayerSlider

Camyno comes with a built in version of the Layer Slider WordPress Plugin. If you do not already have this plugin installed and wish to use it you can do so by navigating to Appearance > Install Plugins from the WordPress dashboard. After installation is complete you will likely need to refresh the page for the new LayerSlider menu item to be available.

Adding LayerSlider To Pages

Once you hve installed the demo LayerSliders or created your own you will likely want to add them to your pages. You have a few options for doing so, outlined below.

  1. Using the page builder: The page builder included with Camyno has two modules available for adding your sliders to the page. The first is a full width module that will allow your slider to stretch to the width of the outer container. The second will place the slider inside of any row module.
  2. LayerSlider shortcode: The LayerSlider plugin includes a simple shortcode for inserting your sliders into pages, when editing a page look in the toolbar for the LayerSlider symbol, pressing this will display a list of your available sliders. Please note this is only applicable when the default WordPress page editor is in use.
  3. LayerSlider widget: The LayerSlider plugin also includes a custom widget for displaying your sliders in any sidebar, just head to your widgets page (Appearance > Widgets) and add the “LayerSlider WP Widget” to any sidebar.

Setting Up A Full Width Slider

Camyno includes a page builder module for adding a full width LayerSlider to any page, when using this module it is important that you have correctly configured your LayerSlider. Below you will find a quick list of settings and how to correctly set them up. When editing a LayerSlider these settings are found under the Layout tab within the Slider Settings tab.

  • Slider dimensions

    • Slider Width: 100%
    • Slider height: Any height
  • Responsive Mode

    • Responsive: Enabled
    • Max Width: Leave blank
  • Full Width Slider Settings

    • Full Width: Enabled
    • Responsive Under: THis should match the setting you have chosen for the “Inner Container Width” under the Visual tab of Theme Settings, unless this has been set to free in which case you can choose any value.
    • Layers Container: in most cases this should match the Responsive Under setting

Need Help?

If you are new to using the Layer Slider plugin I would recommend familiarizing yourself with the available features and if you have questions about the plugin itself use the Layer Slider Support Center or if you have questions about using it within Camyno head to the Camyno support forums. There is additional documentation on the Layer Slider plugin page, just navigate to LayerSlider WP > All Sliders from the WordPress dashboard and press the “Help” tab at the top of the page, this help section is very informative.

General Usage

Color Scheme

Included Presets

The included color scheme manager comes packed with 20 different high quality color schemes. Each one was carefully designed to give you an array of choices, this way you can find the best color scheme to start with and edit it! Or use it exactly as is of course.

Making Your Own

The best way for me to explain how to go about making your own color scheme is to explain how I created each of the presets, below you will find a general outline of the process I followed to create each one.

  1. First things first, I found a source of inspiration. I browsed some of the more popular websites with attractive color schemes, and also looked through Colour Lovers for palettes that others have already created. Colour Lovers is an excellent source for quality color palettes and ideas.
  2. Next I picked out the base color, it is important to use a subtle shade for this step because this color will be used as the backgrounds and be the foundation for the majority of the other colors. You will notice how I usually stuck with a light shade of brown or gray for most of the color schemes.
  3. Now choose a section to start editing and apply this base color to each setting within the section, once all of the colors are the same it will be easier to isolate the changes you are making.
  4. Now for the borders, typography, and secondary background simply lighten or darken the base color accordingly, making sure there is enough contrast between the two colors.
  5. Next simply add the accent colors and this section is complete!
  6. Repeat these steps for each section of the color scheme until you have your completed result.

Background

Camyno includes an easy to use visual background editor with lots of presets and easy to use controls for you to create your own. Please note that to use the background editor you first need to set your outer container layout mode to one of the boxed options.

Included Presets

Camyno includes 25 different background presets for you to choose from, each of the patterns was taken directly from the great people over at Subtle Patterns and made readily available for you to use via the background control panel. Feel free to browse Subtle Patterns for alternative patterns, and use the background customizer to set it up.

Making Your Own

As an alternative to the background presets Camyno also includes a full featured background customizer. This customizer allows you to easily create your own background with the aid of a visual preview. Each step in creating your background is explained below.

  1. First, it is important to choose a color for your background (even if you are using a background image) Simply use the color picker to choose your favorite, please note that when using a background image it is advisable to use a color remotely similar to the overall background image, this way as the image is loading the color will be visible.
  2. Next, you can upload a background image. This is done using the WordPress media manager, simply press select image to get started, find or up-load an image you would like to use and select it.
  3. Once an image has been selected another control for background image style will be made available to you, the setting for automatic will increase or decrease the size of the image until it completely covers the screen, and the image will remain fixed as your website is scrolled. Using the custom setting setting provides you with more control over how your selected background image will appear, these controls are each self explanatory and include position, repeat, and attachment.

Full Page Content Sliding

What Is It?

Camyno includes an option that will divide pages built using the page builder into individual full-screen sections. Each of the sections will fill the screen completely and your website visitors will navigate the page by “jumping” or “sliding” from one section to the next.

This functionality is made possible by the Full Page jQuery Plugin designed by alvarotrigo.

You Should Know

  • This only works on pages whose content has been created using the page builder.
  • When enabled only two full width modules are allowed, content sections, and full width sliders. All others will not be displayed at all.
  • HTML5 video backgrounds for content sections will no longer work.
  • This feature is 100% responsive, but testing on mobile devices is highly recommended.
  • All content will automatically be vertically centered.

Setting It Up

Setting up a page for full screen content sliding is very easy, simply design a page as you normally would, keeping in mind that each content section you add will become a full screen section and any full width slider you add will become a full screen slider.

To activate full screen sliding simply check the check box labeled “Content Sliding” found near the top of the Camyno Page Settings meta box of any page / portfolio item edit page. Once this has been checked you will be given more options to customize the page, each of which is explained in greater detail below.

  • Side Navigation Background Color: This setting is optional and refers to the background color for the automatically generated side pager style navigation. Leave this blank to not display a background.
  • Side Navigation Base Color: This setting refers to the color of each side navigation item that is in an inactive state, meaning it is not being hovered over nor is it the currently active section.
  • Side Navigation Hover Color: This setting refers to the color of each side navigation item that is currently being hovered over, it will also be used for the navigation labels.
  • Side Navigation Labels: This should be a comma delimited list of labels that describe each section. the first item in the list will be the label for the first section (or slider), the second will be for the second section (or slider) and so on.

Custom Sidebars

Creating New Sidebars

Creating a new custom sidebar is as easy as typing its name, you just need to navigate to the widgets page (Appearance > Widgets) and using the form at the top of the page enter a name and press the submit button.

Using Existing Sidebars

Once you have created and added widgets to one or more custom sidebars it will be possible to use them throughout your theme. If the page builder is not active you will be able to select a custom sidebar from the custom sidebars drop-down found in the Camyno Settings meta box. If the page builder is active you can assign a unique sidebar to each content section individually.

Theme Settings

Typography

Typography Schemes

Camyno comes preloaded with 18 different typography schemes for you to choose from. The majority of them are single font schemes which use a single font family for each of the elements. The last few however feature 2 or more different fonts for a more diverse appearance.

Typography Sizing

Camyno is sized (nearly) 100% based on the Em unit. This means that almost all of the content is sized based on the typography. This approach to layouts is superior to the rigid pixel for a number of reasons, the most direct difference however is that when you change the setting for font size in the theme settings panel you are also changing the size of your websites content as well.

Because everything is based on the em unit every aspect of the themes typography can be controlled with a single setting, meaning you are able to very efficiently and easily customize the font sizing for your website.

Google Fonts

Camyno utilizes Google Fonts for most of the typography schemes. When a typography scheme which uses one or more of these fonts is selected an additional file will be loaded on the front end of your website. Any additional resources (files) loaded by your website will affect your websites performance.

That being said the performance affects of including only one or two Google Fonts is minuscule and should not be a major concern. if however you do not wish to utilize any Google Web Fonts, simply select one of the options in the “Web Safe Fonts” group.

Layout

Outer Container

Instead of offering the traditional boxed or wide layout modes Camyno offers 5 different layout settings. 4 of which do not fill the screen and allow you to customize the background, and one that does completely fill the screen, covering the background completely. The only difference between the 4 boxed variations is the total width of the layout.

Inner Container

The inner container limits the size of the content within the outer container. this setting comes in 4 variations, 3 of which have a set width. The final setting will allow the content to stretch to the width of the outer container, whatever width it may be.

Making Cool Layouts

Because you control the width of both the outer and inner container you can also control how much empty space there is between the two. For example setting the outer container to a boxed width of 1360px and the inner container to a constrained width of 960px will leave a gap of roughly 200px on either side of the content. Alternatively you can set the inner content to fill the outer container and create some unique layouts as well.

Social Media

Camyno includes a unique social media management system for controlling all of your social media links in one place. Simply save the URL’s for some of your social media outlets, set them in the order you’d like them to be displayed in, and save your settings.

How Can I Show Them Off?

You will now be able to place these social media outlets in the header, socket, sidebar (using the included widget), or anywhere in the content of your website using the included shortcode. You will also be able to link to them anywhere you can enter a URL within the page builder.

What About Making Changes?

If at any time you need to change the URL to one of your social media outlets you now only need to change a single URL in the theme settings, instead of changing it everywhere it is linked to!

Creating a custom logo for Camyno is very easy, however it is important for the image to be exactly 550px x 220px. It is also important to note that the image used for the logo will fill the height of the header (unless the modern inline menu is being used). The header was set up this way so you are able to control how much space there is between your logo and the borders of the header.

The PSD for the logo used in the demo is included with the main download file, this can be used as a handy guide for making your own.

Collapsing Header

If you have the collapsing header enabled (it is by default) then as the header collapses the top and bottom portions of the logo image used will be cut off, so if the logo is too large a portion of it may be cut off. If you can not reduce the size of the logo it is easy to disable the collapsing header option.

Header Transparency

Camyno features a way to create a transparent header. This feature is great for landing pages and pages which start with a large full width image. If header stickiness is also enabled then when the page is scrolled down the header transparency will be ditched and the header will transition back to its default state.

The Perfect Logo

When using header transparency it is possible to upload an alternative logo to be used when the header is transparent. Again if the sticky header is active then as the page is scrolled down the normal logo will then take its place. Because of this transition it is best for the two images used to be nearly identical, save the colors used.

Default Settings

While header transparency can be configured for each page individually, it is also possible to set the defaults in the theme settings to be easily used throughout your theme pages. This is a more practical way to use header transparency because in the case of you needing to change your logo you will only need to change one setting, instead of editing multiple pages.

Enabled by Default

Header transparency can be enabled by default, if this is the case for your website it is important that the banner area is not hidden and that you set up the banner background in a way that the transparent header will be displayed well on top of it, for example if the transparent header has white text it is best to use a dark background for the banner area.

Setting it Up

The footer for Camyno can be configured to have anywhere from 1 to 6 columns, and can take nearly any layout possible in-between. By default the footer widgets are hidden, so you will have to enable them from the theme settings panel and select a layout before gaining access to the widget areas.

Adding Widgets

Once you have selected a layout to use for the footer a new widget area will be made available to you automatically for each column in the layout. Add widgets to each column just as you would for any other widget area, and they will be displayed at their appropriate locations in the footer.

Page Builder

Introduction

Camyno includes a comprehensive page builder that allows you to create complex custom pages. Using the page builder is very simple, to get started all you need to do is press the “Page Builder” button above the content editor of any page or portfolio item.

The page builder is organized into 3 layers: full width modules, rows, and content modules. Full width modules divide the page vertically and allow you to add full width media like sliders and images. Rows take care of the horizontal layout by allowing you to organize content into columns.

Whenever you have made changes to a module a green notification will pop up notifying you that the page builder is loading, it is important that you wait for the page builder to finish loading before making any more changes, otherwise the changes you just made may be lost.

Best practices

Full-screen Mode

The page builder offers full-screen functionality providing you with a larger workspace for building pages. I often found myself using this full-screen mode when setting up the demo pages.

Preview Changes Before Saving

The page builder features complete history control, meaning every action you perform is saved in the history overview drop-down, and can be returned to at any time in case you wish to undo any changes. History is only recorded for as long as you remain on the edit screen, so saving changes will cause the page to refresh and you will lose your history and be unable to undo any changes.

Because of this it is recommended you use the WordPress preview functionality, to confirm you like the changes you have made before saving them. This way in case you need to undo anything it is very easy to simply press the back button.

Supported Plugins

Events Calendar

Camyno comes with everything you need to set up and manage an events calendar. To get started you first need to install the Events Calendar Plugin, this can be done in a few ways. The easiest would be to navigate to Plugins > Add New from the WordPress dashboard then using the provided search box search for “Events Calendar”, it should be the first result, then just press “install now”. Alternatively you can download the ZIP file here and upload it yourself.

Events Calendar can also be installed manually via an FTP client. It must be uploaded to the wp-content/plugins folder, to learn more about manually installing plugins, check out the Manual Plugin Installation guide on the WordPress Codex.

Permalinks

After installing the events calendar plugin you may need to re-save your permalinks setting for the plugin to work correctly. This can be done by navigating to Settings > Permalinks and simply pressing Save Changes. It is also recommended that you have your Permalink Common Settings set to “Post name”.

WooCommerce

Camyno comes with everything you need to set up a complete and effective WooCommerce shop. To get started you first need to install the WooCommerce Plugin, this can be done in a few ways. The easiest would be to navigate to Plugins > Add New from the WordPress dashboard then using the provided search box search for “WooCommerce”, it should be the first result, then just press “install now”. Alternatively you can download the ZIP file here and upload it yourself.

WooCommerce can also be installed manually via an FTP client. It must be uploaded to the wp-content/plugins folder, to learn more about manually installing plugins, check out the Manual Plugin Installation guide on the WordPress Codex.

Once you have the WooCommerce plugin installed and active you just need to install the WooCommerce core pages, WooCommerce will ask to do this step automatically, you just need to okay it.

Product Thumbnails

If this is the first time you are installing WooCommerce and you haven’t already you should navigate to WooCommerce products settings (WooCommerce > Settings > Products) and set up the product thumbnnail sizes the way you want, this is not done automatically in case you already have your own preferences. In the demo the settings are as follows:

  • Catalog Images: 450 x 450, hard crop enabled
  • Single Product Image: 600 x 600, hard crop enabled
  • Product Thumbnails: 90 x 90, hard crop enabled

To learn more about WooCommerce I recommend the following pages.

bbPress

Camyno comes with everything you need to run a great forum. To get started you first need to install the bbPress Plugin, this can be done in a few ways. The easiest would be to navigate to Plugins > Add New from the WordPress dashboard then using the provided search box search for “bbPress”, it should be the first result, then just press “install now”. Alternatively you can download the ZIP file here and upload it yourself.

bbPress can also be installed manually via an FTP client. It must be uploaded to the wp-content/plugins folder, to learn more about manually installing plugins, check out the Manual Plugin Installation guide on the WordPress Codex.

Once you have the bbPress plugin installed and active you need to follow the below steps exactly to set up the forums index page.

  1. Navigate to Settings > Forums from the WordPress dashboard. Scroll down until you see the section titled “Forum Root Slug”, now look under this section for an option titled “Forum Root”, make sure this option is set to “forums”, all lowercase.
  2. Add a new page titled “Forums”, make sure the page has no content (and the default editor is active) and is not a child page, meaning it has no parent. Publish the page. Once it has been published you can change the title to whatever you please, just make sure the permalink does not change, it should remain http://www.yoursite.com/forums/. Keep in mind that if content is added to this page your forums will not be displayed.
  3. You can now change any settings on this page, for example adding a custom sidebar, or changing the layout.
  4. Once you have completed these steps you can add a forum and it will show up on your forums page!

For more information on managing forums, topics and replies please reference the bbPress Administration Section.

To learn more about bbPress I recommend the following pages.

Theme Modification

Static Text

What’s That?

Static text refers to text that is placed in any theme file that can not be directly edited. I know how common it is for users to want to edit this text, so I have provided a simple way for doing so.

Got It, How Do I Do It?

All of the static text that is displayed anywhere in the theme can be changed by defining a specific constant in PHP, this PHP modifcation can be placed at the end of the Camyno functions.php file, or better yet in the functions.php file of the Camyno child theme.

The following code snippet will change the placeholder for the fullscreen overlay search bar.

define( 'CV_OVERLAY_SEARCH_PLACEHOLDER', 'Your text here' );

As you might have guessed the part that says Your text here should be replaced with your desired text. The CV_OVERLAY_SEARCH_PLACEHOLDER part refers to the static text you wish to change.

The following is a complete list of the static text used throughout the theme. You can replace the CV_OVERLAY_SEARCH_PLACEHOLDER with any of the following.

  • Overlay Search Bar

    • CV_OVERLAY_SEARCH_PLACEHOLDER
  • Read more button text

    • CV_READ_MORE_BUTTON_TEXT
  • Search Results Page

    • CV_SEARCH_RESULTS_PLACEHOLDER
    • CV_SEARCH_RESULTS_BUTTON_TEXT
  • 404 Page

    • CV_404_PAGE_ICON
    • CV_404_PAGE_LINE_ONE
    • CV_404_PAGE_LINE_TWO
    • CV_404_PAGE_LINE_THREE
    • CV_404_PAGE_PLACEHOLDER
    • CV_404_PAGE_BUTTON_TEXT
  • Change Log Shortcode

    • CV_CHANGE_LOG_ADDED
    • CV_CHANGE_LOG_UPDATED
    • CV_CHANGE_LOG_REMOVED
    • CV_CHANGE_LOG_NOTES
    • CV_CHANGE_LOG_NOTES_TITLE
    • CV_CHANGE_LOG_BEFORE_VERSION
  • Contact Form Shortcode

    • CV_FORM_MESSAGE_SENT_DEFAULT
    • CV_FORM_REVIEW_MESSAGE

Where Are The Defaults?

If you’re interested in finding the defaults for each of the settings above they can be found in the file titled static-text.php located in the inc folder of Camyno.

Multilingual Sites

Modifying the static text this way works great for single language sites, however defining strings of text this way means they can not be translated dynamically, because of this if you are running a multilingual site and need to modify static text you will need to do so manually and regenerate the file for translation.