Cherry4

WordPress Framework

Cherry Options

Template has an advanced Theme Options panel that is loaded within Cherry Options. Cherry Framework 4 contains a vast number of theme configuration options. You can configure various aspects of your WordPress website behavior and appearance. We have the options organized into logical tabbed sections, and each option has a description of what it will do on the front end. There are too many options to go over in these docs but please take some time and navigate through each tab to see what we offer. Go to Cherry > Options in your WordPress admin to access the theme options panel. See below for screenshots of our options panel. Cherry Options comprise several sections:

General

The General section contains global Cherry Framework configuration settings.

  • Favicon image.
    Icon image that is displayed in the browser address bar and browser tab heading. Max icon (.ico) size is 32x32 px. You can also upload favicon for retina displays. Max retina icon size: 152x152 px.
  • Maintenance mode
    Enable/disable maintenance mode. Logged in administrator gets full access to the site while regular visitors will be redirected to the page chosen below. You can also preview the maintenance page without enabling maintenance mode.
  • Maintenance page
    Select a page that regular visitors will see if maintenance mode is enabled. You can select any WordPress page here including your custom ones.
  • Document smooth scroll
    Enable/disable smooth vertical mousewheel scrolling (Chrome browser only).
  • User CSS
    Define custom CSS styling.
  • Landing page
    Define the page in which will be use landing navigation.
  • To Top
    Define - display or hide "To top" button.
  • 404 content
    Visual editor for crating 404 page content.
  • Google Analytics Code
    Text area for Google Analytics code. For more information, how to add Google Analytics code, please visit our video tutorial

Grid

This section contains global layout configuration settings.

  • Responsive grid
    Enable/disable responsive grid. If for any reason you want to disable responsive layout for your site, you are able to turn it off here.
  • Container width
    The width of main website container in pixels.

Layouts

  • Pages
    You can choose if you want to display sidebars and how you want to display them.
  • Blog posts
    You can choose if you want to display sidebars and how you want to display them.

Blog

The section contains settings for WordPress blog pages (listing and single post types).

  • Featured Media
    Displays Featured Image, Gallery, Audio, Video in blog posts listing depending on post type.
  • Featured Image Size
    Set dimensions for post featured images.
  • Featured Image Alignment
    Set alignment for post featured images.
  • Post content
    Select how you want to display post content in blog listing
  • Content Part length
    Specify number of words displayed in blog listing content part. Will not work if post has an excerpt.
  • More button
    Enable/Disable read more button in blog listing.
  • More button label
    Specify read more button label text.

Blog > Layout

Attention, if you want to configure "Blog layout" option, you must have installed plugin - "Cherry Blog Layouts"
  • Enable custom blog layout
    Enable/disable custom blog layout.
  • Filter type
    Select if you want to filter posts by tag or by category.
  • Custom blog filter type
    Select blog filter type.
  • Use on pages
    Please specify pages that will use custom blog layout.
  • Grid columns
    Select grid layout pattern for pages with custom blog layout.
  • Masonry columns number
    Specify custom masonry layout columns number.
  • Masonry columns gutter
    Specify custom masonry layout columns gutter(px).
  • Timeline item width
    Specify custom item width for Timeline blog layout(%).
  • Enable timeline breakpoints
    Enable/disable timeline breakpoints.
  • Timeline breakpoint
    Select timeline breakpoint type.
  • Timeline breakpoint date format
    Specify the date format.
  • Enable marker's date label
    Enable/disable marker's date label.
  • Timeline marker date format
    Specify the date format.
  • Grid type
    Select layout pattern for pages with custom blog layout. Wide layout will fit window width. Boxed layout will have fixed width.
  • Custom Blog sidebars
    You can choose if you want to display sidebars and how you want to display them.
  • Template type
    Select template type for blog posts.

Blog > Meta

Attention, if you want to configure "Additional post meta" option, you must have installed plugin - "Cherry Blog Layouts"
  • Date
    Show/Hide post publication date.
  • Author
    Show/Hide post author.
  • Comments
    Show/Hide number of comments.
  • Categories
    Show/Hide post categories.
  • Tags
    Show/Hide post tags.
  • Additional post meta
    Enable/disable additional post meta.

Blog > Post

  • Featured Image
    Display featured image on the single post page.
  • Size of Featured Image
    Set dimensions for single post featured images.
  • Alignment of Featured Image
    Set alignment for single post featured images.
  • Navigation
    Enable/disable post navigation block.
  • Author bio
    Enable/disable author bio block. Author bio block is displayed on the post page.
  • Related posts
    Enable/disable related posts block. Related posts block is displayed on the post page.
  • Allow comments
    Enable/disable comments for blog posts.
  • Gallery slider
    Replace default Wordpress gallery shortcode with enhanced jQuery carousel.
  • Lightbox for images in a content
    Automatically adds lightbox for images in a post content.
  • Additional post meta
    Enable/disable additional post meta.

Styling

The section contains theme styling settings. Here you can edit the main theme colors.

  • Body background
    Set the background for body container. You can specify background image or color, set background repeat, position and attachment.

Color schemes

Changes colors for various theme elements like forms, typography elements, blocks with default styling, etc.

  • Primary color

  • Secondary color

  • Success color

  • Info color

  • Warning color

  • Danger color

  • Primary gray color. Select the main gray color hue. Additional colors will be created automatically:
    • gray-darker: darken(20%)
    • gray-dark: darken(15%)
    • gray-light: lighten(15%)
    • gray-lighter: lighten(20%).

Navigation

Define website navigation settings. Menus typography and colors, pagination and breadcrumbs settings.

  • Header Menu Typography
    The main header navigation typography settings. You can configure menu font and color.
  • Footer Menu Typography
    The main footer navigation typography settings. You can configure menu font and color.
  • Arrows markup
    Do you want to generate arrow mark-up?
To finding out, how to disable/enable arrows markup, please visit our video tutorial

Pagination

  • Pagination position
    Select where you want to display pagination.
  • Prev/next buttons
    Show/hide previous and next buttons in pagination.
  • Pagination label
    Pagination label is displayed before pagination buttons. Text or HTML can be used.
  • Prev button label
    Previous button label text. Text or HTML can be used.
  • Next button label
    Next button label text. Text or HTML can be used.
  • Show all the pages
    If set to On, it will show all of the pages instead of a short list of pages near the current page.
  • End size
    How many numbers to display on either the start or the end list edges.
  • Mid size
    How many numbers to display to either side of the current page, but not including the current page.

Breadcrumbs

  • Breadcrumbs
    Enable/disable breadcrumbs navigation.
  • Page title
    Enable/disable page title in breadcrumbs.
  • Breadcrumbs mobile
    Enable/disable breadcrumbs on mobile devices.
  • Home page breadcrumbs
    Enable/disable breadcrumbs on the home page.
  • Item separator
    The breadcrumbs separator symbol.
  • Breadcrumbs prefix
    Text displayed before the breadcrumbs navigation.

Header

Settings for the website header section. Logo, background, sticky header, etc.

  • Header background
    Header background settings. You can select background color, upload header background image, set itsbackground position, attachment and repeat.
  • Grid type
    Select the layout pattern for the website header. Wide layout will fit window width. Boxed layout will havefixed width.
  • Boxed width
    Header section width if boxed layout is active. Should not be more than the Grid -> Container width value.
  • Sticky header
    Enable\disable fixed stick-to-top header.
  • Sticky selector
    Select the block selector that will be used to build sticky panel. You can use tag name, class name or id.
  • Logo type
    Select whether you want your main logo to be an image or text. If you select 'image,' you can choose a logo image from the media library in the next option, and if you select 'text,' your WordPress Site Title will be shown instead.
  • Image
    Click the Choose Media button to select the logo image from the media library or upload your image.
  • Logo typography
    Configuration settings for text logo. Here you can select the logo font family, size, color, etc.

Page

General page options section.

  • Background
    Page background settings. You can select background color, upload page background image, set its background position, attachment and repeat.
  • Grid type
    Select the layout pattern for the main website container. Wide layout will fit window width. Boxed layout will have fixed width and left/right indents.
  • Boxed width
    Header section width if boxed layout is active. Should not be more than the Grid -> Container width value.
  • Featured Images
    Enable/disable featured images for pages.
  • Page comments
    Enable/disable comments by default for pages. For pages that have already been published, you need to enable comments individually in page settings.

Typography

Theme typography settings. You can configure all aspects of website typography, fonts, colors, etc.

  • Body text
    Main website text typography options.
  • Link typography
    Typography for links.
  • Link hover color
    Color for links on hover.
  • Input text
    Styling of the text in forms.
  • Breadcrumbs typography
    Styling of the text in breadcrumbs.
  • Heading 1
    H1 heading font settings.
  • Heading 2
    H2 heading font settings.
  • Heading 3
    H3 heading font settings.
  • Heading 4
    H4 heading font settings.
  • Heading 5
    H5 heading font settings.
  • Heading 6
    H6 heading font settings.
  • Webfonts
    Define custom Font style and Character Sets for selected web font.

Optimization

  • Concatenate/minify CSS
    Select if you want to merge or minify CSS files for performance optimization.
  • Dynamic CSS output
    Output dynamic CSS into a separate file or into style tag.
  • Mega menu caching enabled
    Enable / Disable caching of mega menu navigation

Simple slider

The section contains options for displaying and settings slider on site

Attention, Simple slider options will be available only in case you have - "Cherry Simple Slider"
  • Slider name
    Define slider name
  • Number of slides
    Define total number of slides
  • Slides order
    Define order type of slide, it takes two parameters:
    • Descending order from highest to lowest values
    • Ascending order from lowest to highest values
  • Slider width
    Define the width of the slider
  • Slider height
    Define the height of the slider
  • Slider 992px breakpoint height
    Define specific breakpoints which allow changing the look and behavior of the slider when the page resizes on 992px.
  • Slider 768px breakpoint height
    Define specific breakpoints which allow changing the look and behavior of the slider when the page resizes on 768px.
  • Slider visible size
    Define the size of the visible area, allowing for more slides to become visible near the selected slide.
  • Slider force Size
    Indicates if the size of the slider will be forced to full width or full window.
  • Slider orientation
    Indicates whether the slides will be arranged horizontally or vertically.
  • Slide distance
    Define the distance between the slides.
  • Slide animation duration
    Define the duration of the slide animation.
  • Slide fading
    Enable / Disable indicates if fade will be used.
  • Slider navigation
    Enable / Disable slider navigation.
  • Slider fade navigation
    Indicates whether the arrows will fade in only on hover.
  • Slider pagination
    Enable / Disable slider pagination.
  • Slider autoplay
    Enable / Disable slider autoplay.
  • Slider full Screen
    Indicates whether the full-screen button is enabled.
  • Slider shuffle
    Indicates if the slides will be shuffled.
  • Slider loop
    Enable / Disable slider loop.
  • Thumbnails
    Enable / Disable slider thumbnails.
  • Thumbnail arrows
    Enable / Disable slider thumbnails arrows.
  • Thumbnails Position
    Define the position of the thumbnail scroller.
  • Thumbnail width
    Define the thumbnail width
  • Thumbnail height
    Define the thumbnail height
  • Reach video action
    Define the action that the video will perform when its slide container is selected.

Olark live chat

The section contains options for setting external Olark live chat plugin.

  • Enable Olark live chat
    Enable Olark live chat (frontend only).