Suffice

This is the Suffice theme instruction page. We have tried our best to keep it as simple as possible. If you think it can be made even simpler let us

close

Relevant Links

Getting started

This is the Suffice theme instruction page. We have tried our best to keep it as simple as possible. If you think it can be made even simpler let us know we will be glad to change it. Let’s start! On the left side, you can see the table of contents of this documentation. Jump to the section you want, or read it all through – your choice. Let’s move on!

Installation

Installing your theme is pretty easy! After downloading you should have a suffice.zip file. This is a compressed file containing all of the required templates and images required for the theme to function properly.

Upload Theme

  1. Go to Appearance > Themes in the WordPress Dashboard
  2. Click on the Add New button
  3. Search for the Suffice
  4. Select the Suffice theme
  5. Click Install Now

Activate the theme

Go to Appearance > Themes in the WordPress Dashboard.
Now, hover over the theme thumbnail and press the Activate button

Additional information: WordPress Codex – Using Themes

Custom Menu

By default, the menus will fallback to Pages. That means just after activation of the theme, you will see all the pages as menus. If you want selective menus with combination of links, pages, categories then custom menu is what you should be looking for.

Set up Custom Menu

  1. Go to Appearance > Menus in the WordPress menu
  2. Click on create a new menu link
  3. Give a name to your menu in Menu Name and click Create Menu button
  4. Now choose the pages, categories, custom links from the leftside of your screen by selecting the checkbox and click on Add Menu
  5. Click Save Menu after adding required pages, categories in the menu
Additional information: Have a look here if you are still confused WordPress Custom Menu

Theme Location for Menu settings

  • Primary MenuDisplay the menu next the logo/header text.
  • Social menuDisplay the menu containing Social Icons in the top header section.
  • Header TopDisplay the menu in the top header section
  • Footer MenuDisplay the menu on the bottom right corner of the Footer.

Social Menu setup

fitclub-social-menu

  1. Use Custom Links to create a menu.
  2. In URL field type your social media link. For example: www.facebook.com/profile_id
  3. Social media supported by theme are: Facebook, Twitter, Google Plus, Youtube, Pinterest, Instagram, LinkedIn, Tumblr, WordPress, Vimeo, SoundCloud, Slack, Skype, Github, Dropbox, Behance.
  4. Check Social Menu under Theme Location.

Site Identity

This theme supports the default Side Identity section provided by the WordPress and we have integrated some options in this theme in this section.

Site Identity

    1. Go to Appearance > Customize > Site Identity section from the WordPress dashboard

The options integrated in this theme in this section are:

      • Logo

This option enables you to upload the header logo in your site, making your site brand look unique by using the custom image with 150 x 150 Pixels of size. Recommanded size for the logo is 107 X 30 pixels.

      • Site Title

Add the required Site Title from this section in your site.

      • Tagline

Add the required Site Tagline from this section in your site.

      • Display Site Title & Tagline

This option provides you whether to display the Site title and tagline or not in your site.

  2. Click on Save & Publish button after the required setup has been done in your site through this setting.

suffice instruction header logo

Header Image

To set the Header Image follow below steps.

Steps

    1. Go to Appearance > Customize > Header Image section from the WordPress dashboard

Upload the header image from the Add new image button. After selecting the header image, it will ask you to crop. If you like to crop it, then, you can crop else leave it as you want for your site to best suit it.

  1. Now, click on Save & Publish button.
The recommended Header Image size is 1000 × 250 pixels.

Color Options

This theme supports the option to change the color setting for your site, according to which you want for your site. The options integrated in this section are:
    1. Header Text Color

Select a font color for the site title and tagline.

    1. Background Color

Select a background color, this will effect the whole site but you have to select the Boxed Layout option to view the background color.

suffice-color

The image above is the customizer section of WP default color options

Theme Options

All our custom settings related to theme are available through Appearance > Customize > Theme Options section from the WordPress Dashboard.

Top Header Settings

    1. Go to

Appearance > Customize >Theme Options > Top Header Settings

    1. section from the WordPress dashboard. The options integrated into this section are:
    1. Header Content Left

Select one of the content to display on the left side of the top header section or select disable if you don’t want to display anything. It has four options which are listed below:

      • Contact Info

Contact information like location, phone number and email address; these information can be set within the theme itself.

      • Social Icon

Social Icons/menu which is set to the Social menu location.

      • Header Menu

A menu which is set to the Header Top menu location.

      • Disable

Select this option if you want nothing to be displayed in the left of top header section.

    2. Header Content Right

Select one of the content to display on the right side of the top header section or select disable if you don’t want to display anything. It has four options which are same as the Header Content Left.

CONTACT INFO

    1. Location for Contact Info

Enter your location for contact info which is displayed in the top header.

    1. Phone Number for Contact

Enter your phone number for contact info which is displayed in the top header.

    1. Email Address for Contact

Enter your email address for contact info which is displayed in the top header.

    1. Contact Font Color

Select a color for the text used in the contact info section in the top header.

    1. Contact Icon Color

Select a color for the icons used in the contact info section in the top header.

HEADER MENU STYLING

    1. Header Menu Font Color

Select a font color for the text in the Top Header Menu.

    1. Header Menu Font Hover Color

Select a font color for the text in the Top Header Menu when hovered.

SOCIAL ICON STYLING

    1. Social Menu Icon Color

Select a font color for the social icons in the Top Header.

    1. Social Menu Icon Hover Color

Select a font color for the social icons in the Top Header when hovered.

    1. Social Menu Font Size

Select a font size for the social icons.

TOP HEADER STYLING

    1. Top Header Padding

Provide padding-top and padding-bottom for the Top Header.

    1. Header Top Background Color

Select a background color for Top Header section.

    1. Header top border bottom(Default: 0)

Set the font size for the border placed at the bottom of the Top Header. You can set it to zero(0) if you don’t want the border.

    1. Header top border color(Default: rgba(255,255,255,0.5) )

Set the font color for the border placed at the bottom of the Top Header.

Click on Save & Publish button after the required setup has been done in your site through this setting.

Header Settings

    1. Go to

Appearance > Customize >Theme Options > Header Settings

    1. section from the WordPress dashboard. The options integrated into this section are:
    1. <li

>Header Layout Style You can choose how you want to display the header from the three options available in this section, the options are mentioned below:

    • Logo Left, Menu Right(Default):

This is the default layout for the header where the site logo is placed to the left and the primary Menu to the right.

    • Logo Center, Menu Center:

This layout option will center align both the logo and the primary menu to the center.

    • Logo Right, Menu Left:

This layout is the mirror image of the previous(default) layout where the logo is placed to the right and the primary Menu to the left.

Sticky Header

  • Sticky Header

Select whether or not you want the header to be sticky.

  • Sticky Header on Tablets

Select whether or not you want the header to be sticky on tablets.

  • Header Sticky Style

Select how you want the header to be sticky. It has two choices which are listed below:

    • Show Menu on Scroll Up

The header will stick around and can be seen when you scroll up in the page.

    • Fix Menu on Scroll Down

The header will be fixed and stick around as you scroll down in the page.

HEADER ACTION BOX

  • Search Icon

Toggle between ON/OFF to show/hide the search icon beside the primary menu on the header section.

  • Header Search Style

Choose how you want the search form to be displayed. It is displayed when you click on the search icon.

    • Dropdown Search Form

A small search form will be displayed just below the search icon in the header.

    • Slide Search From Top

A full-width search form will slide down from the top of the page.

    • Full Screen Search

A fullscreen search from will be displayed covering the whole site.

  • Header Icon Color

Select a font color of search icon, cart icon and wishlist icon when the header is non-transparent.

BOTTOM HEADER BACKGROUND STYLING

  • Bottom Header Padding

Provide padding-top and padding-bottom to the Bottom Header section.

  • Bottom Header Background Color

Select a background color for the bottom header when it is transparent.

  • Bottom Header Bottom Border(Default: 0)

Set the font size for the border placed at the bottom of the bottom header. You can set it to zero(0) if you don’t want the border.

  • Bottom Header Border Color

Set the font color for the border placed at the bottom of the bottom header.

</li

Transparent Header Settings

    1. Go to:

Appearance > Customize > Theme Option > Transparent Header Settings

    1. section from the WordPress dashboard.
    1. This section includes the settings for the Transparent Header only and the options integrated are:
  1. Site LogoUpload/select an image for the site logo.
  2. Header action Icon ColorSelect a font color for the icons(cart, search, wishlist) inside the Header Action.
  3. Header Top Background ColorSelect a background color for the top header.
  4. Header Bottom Background ColorSelect a background color for the bottom header/header action.

Menu Settings

    1. All the options for setting the layouts are available in

Appearance > Customize > Theme Option > Menu Settings

    1. section from the WordPress dashboard.
    1. The options integrated into this section are:
    1. Main Menu StyleSelect how the Primary Menu functions from the four choices listed below .
      • Default MenuThis is the defalut WP menu design where the menu items are seen in the bottom header.
      • Offcanvas MenuA hamburger icon is displayed and the primary menu slides in from the side(left/right) when the hamburger icon is clicked.
      • Offcanvas Push MenuExactly similar to the Offcanvas Menu but the page content is pushed when the menu slides in from the side.
      • Full Screen MenuA hamburger icon is displayed and the primary menu covers the whole site when the hamburger icon is clicked.

MAIN MENU STYLING
This section controls the styling of the top level menu items in the primary menu

    1. Main Menu Item PaddingSet a padding value to the menu items in the primary menu. This can taken as the space between the menu items.
    2. Menu Font SizeSet a font size to the menu items in the primary menu.
    3. Menu Font ColorSelect a font color for the menu items in the primary menu.
    4. Menu Font Hover ColorSelect a font color for the menu items in the primary menu when hovered.

SUB MENU STYLING
This section controls the styling of the sub menu items in the primary menu

    1. Dropdown Icon IndicatorTurn on to show an arrow icon beside the parent menu item if it has sub-menu items.
    2. Dropdown ShadowTurn on to show a shadow like display for the sub-menu items in the primary menu.
    3. Sub Menu Width( Default: 250px )Set a fixed width for the sub-menu items.
    4. Sub Menu Item Background ColorSelect a background color for sub-menu items.
    5. Sub Menu Background Hover ColorSelect a background color for sub-menu items when hovered.
    6. Sub Menu Font SizeSelect a font size for sub-menu items.
    7. Sub Menu Font ColorSelect a font color for sub-menu items.
    8. Sub Menu Font Hover ColorSelect a font color for sub-menu items when hovered.
    9. Sub Menu Item DividerTurn on to display a divider line between the two sub-menu items.
    10. Sub Menu item Seperator ColorSelect a font color for the divider line between the two sub-menu items.

Typography

  1. Menu TypographySet desired values in the various options below to customize the typography of the top level menu items in the primary menu.
    • Font FamilySelect font family for the top level menu items.
    • VariantSelect a variant for the choosen font family.
    • SubsetSelect a subset for the choosen font family.
    • Letter Spacing( Default: 0 )Enter a numerical value for the space between the letters in the top level menu items.
    • Text TransformSelect from the available values, the style of the text in the top level menu items.
      1. None
      2. Capitalize
      3. Uppercase
      4. Lowercase
      5. Initial
      6. Inherit
  2. Sub Menu TypographySet desired values in the various options below to customize the typography of the sub-menu items in the primary menu.
    • Font FamilySelect font family for the sub-menu items.
    • VariantSelect a variant for the choosen font family.
    • SubsetSelect a subset for the choosen font family.
    • Letter Spacing( Default: 0 )Enter a numerical value for the space between the letters in the sub-menu items.
    • Text TransformSelect from the available values, the style of the text in the sub-menu items.
      1. None
      2. Capitalize
      3. Uppercase
      4. Lowercase
      5. Initial
      6. Inherit

Layout Settings

    1. All the options for setting the layouts are available in

Appearance > Customize > Theme Option > Layout Settings

    1. section from the WordPress dashboard.
    1. The options integrated in this section are:
    1. Layout StyleYou can set the site layout via this option. You can choose from the available two options mentoned below:
      • Boxed LayoutSelect the boxed layout for your site. All the contents in the site will be displayed in the boxed structure.
      • Full Width LayoutSelect the full-wdith layout for your site. All the contents in the site will spread widely all over the viewport.
For the layout options below this section you can choose between the three options(images) listed below.

  • Right SidebarLayout with content to the left and a sidebar on the right.
  • Left SidebarLayout with content to the right and a sidebar on the left.
  • Full WidthLayout with content in the center covering the whole page without any sidebars.
  1. Blog/Home LayoutSelect a layout for the Homepage when it is set to display the latest posts.
  2. Page/Home LayoutSelect a layout for the Homepage when it is a static page.
  3. Archive LayoutSelect a layout for the archives pages.
  4. Single Content LayoutSelect a layout for a single post page.
  5. Page LayoutSelect a layout for a static page.
  6. Category LayoutSelect a layout for a category page.
  7. Author Bio LayoutSelect a layout for the Author bio page.
  8. Search Results LayoutSelect a layout for the Search page.
  9. 404 LayoutSelect a layout for the 404 page.
  10. WooCommerce Shop LayoutSelect a layout for the WooCommerce shop page.
  11. WooCommerce Product Category LayoutSelect a layout for the WooCommerce category page.
  12. WooCommerce Product Tag LayoutSelect a layout for the WooCommerce tag page.
  13. WooCommerce Single Product LayoutSelect a layout for the WooCommerce product detail page.

Color Settings

    1. Go to:

Appearance > Customize > Theme Option > Color Settings

    1. section from the WordPress dashboard.
    1. This section includes various settings for color customization of the theme and the options integrated are:
  1. Theme SkinSelect between the two available skin options which are listed below:
    • Light SkinA scheme which has light colored background with dark colored content(text).
    • Dark SkinA scheme which has dark colored background with light colored content(text).
  2. Predefined Color SchemeSelect from the predefined five different color scheme for the Primary Color, Background Color, Heading Color, Paragraph Color, Meta Color. These colors can be set seperately for each of the color option.
  3. Primary ColorSelect a primary color of the site.
  4. Background ColorSelect a background color for the main content section of the site.
  5. Heading ColorSelect a color for the heading section of the site.
  6. Paragraph ColorSelect a font color for text in the paragraphs.(Effects the content inside ‘p’ (paragraph) tag).
  7. Meta ColorSelect a font color for the meta elements like author’s name, category, published date etc.

Preloader Settings

    1. Go To:

Appearance > Customize > Suffice Theme Options > Preloader Settings

    1. section from the WordPress dashboard.
    1. The options integrated in this section are:
  1. PreloaderTurn on to enable the preloader on your site.

Page Title Settings

    1. All the options related to page titles are available in

Appearance > Customize > Suffice Theme Options > Page Title Settings

    1. section from the WordPress dashboard.
    1. The options integrated in this section are:
  1. Page Title BarTurn on to display a bar that holds the page title and breadcrumb
  2. Page Title Font SizeEnter a desired value for the font size of the page title in the page title bar. The value should be added with the valid CSS units like px, em, pt etcetera.
  3. Page Title Font Size on MobileEnter a desired value for the font size of the page title in the page title bar while viewing in the mobile devices. The value should be added with the valid CSS units like px, em, pt etcetera.
  4. Page Title Font Color Select a font color for the page title.
  5. Page Title Background Color Select a background color for the page title. This color will be over-ridden if the background image is set in the option below.
  6. Page Title Background Image Select/upload a background image for the page title bar.

Breadcrumb Settings

    1. All the options related to Breadcrumbs are available in

Appearance > Customize > Suffice Theme Options > Breadcrumb Settings

    1. section from the WordPress dashboard.
    1. The options integrated in this section are:
  1. BreadcrumbsTurn on the switch to display the breadcrumb.
  2. Breadcrumbs on Custom Post Type ArchivesTurn on the switch to display the breadcrumb on the archive pages of the Custom Post Type.
  3. Breadcrumbs Font SizeSet a font size for the texts in the breadcrumb.
  4. Breadcrumbs Font ColorSelect a font color for the texts in the breadcrumb.
  5. Breadcrumbs Link Font ColorSelect a font color for the links in the breadcrumb.
  6. Breadcrumbs Link Hover ColorSelect a hover color for the links in the breadcrumb.

Footer Settings

    1. All the options related to footer are available in

Appearance > Customize > Suffice Theme Options > Footer Settings

    1. section from the WordPress dashboard.
    1. The options integrated in this section are:
    1. Footer WidgetsTurn on to display the widgets area in the footer.
    2. Footer Widget ColumnSelect one of the options available for the number of columns to be displayed in the footer widget area.
      • One ColumnA single column covering the whole footer widget area.
      • Two ColumnsTwo columns covering the whole footer widget area.
      • Three ColumnsThree columns covering the whole footer widget area.
      • Four ColumnsFour column covering the whole footer widget area.
    3. Footer Bottom Right ContentSelect one of the options available for the content to be displayed on the right of the bottom footer section.
        • Social Icon

      Social Icons/menu which is set to the Social menu location.

        • Footer Menu

      A menu which is set to the Footer menu location.

        • Disable

      Select this option if you want nothing to be displayed on the right of footer bottom section.

FOOTER STYLING

    1. Footer Background ColorSelect a background color for the whole footer section. This color will be over-ridden if a background image is selected for the background.
    2. Footer Background ImageSelect/upload a background image for the whole footer section.
    3. Footer Border Size ( Default: 1 )Select a font size for the border which seperate the footer widgets area and the bottom footer section.
    4. Footer Border ColorSelect a font color for the border which seperate the footer widgets area and the bottom footer section.

FOOTER WIDGET AREA OPTION

    1. Footer Widget Area Padding ( Default: 60px 0 15px 0 )Enter the desired value for the padding in the footer widget area. Top, right, bottom and left pagging can be set just enter the values with the valid CSS unit(px, em, pt) in the respective field.
    2. Widget Seperating MarginEnter the margin value to seperate the footer widget area and bootom footer section.

FOOTER WIDGET TITLE

    1. Footer Widget Title Font SizeEnter a font size value with valid CSS unit for the widget title inside the footer widget area.
    2. Footer Widget Title ColorSelect a font color for the widget title inside the footer widget area.

FOOTER WIDGET LIST ITEM
This section is for the styling of the list items displayed via the widgets in the footer widget area.

    1. Footer Widget List Item Text ColorSelect a font color for the text in the list item.
    2. Footer Widget List Item Hover ColorSelect a hover color for the text in the list item.
    3. Footer Widget List Item Padding ( Default: 10px 0 10px 0 )Enter the desired value for the padding to the footer widget list item. Top, right, bottom and left pagging can be set just enter the values with the valid CSS unit( like px, em, pt ) in the respective field.
    4. Footer Widget List Element Border Width ( Default: 0 )Select a width value for the border that seperates the two list items.
    5. Footer Widget List Element Border Color ( Default: 0 )Select a font color for the border that seperates the two list items.

COPYRIGHT
This section is for the customization of the copyright section which is displayed at the right corner in the footer bottom.

  1. Copyright BarTurn on to display the copyright section at the right side in the bottom footer setcion.
  2. Copyright TextEnter the text or HTML to display in the copyright section.
  3. Copyright Text ColorSelect a font color for the text in the copyright section.
  4. Copyright Text Link ColorSelect a font color for the links in the copyright section.
  5. Copyright Font Size ( Default: 12px )Enter the font size for the text in the copyright section. Enter the values with the valid CSS unit ( like px, em, pt ).

Sidebar Settings

    1. All the options related to sidebar(right and left) settings are available in

Appearance > Customize > Suffice Theme Options > Sidebar Settings

    1. section from the WordPress dashboard.
    1. The options integrated in this section are:
  1. Sidebar Background Color Select a background color for the left or right sidebar.
  2. Sticky Sidebar Turn on to make the sidebar sticky.

Widget Settings

    1. All the options related to widgets in the left and right sidebar are available in

Appearance > Customize > Suffice Theme Options > Widget Settings

    1. section from the WordPress dashboard.
    1. The options integrated in this section are:
  1. Widget Bottom Margin ( Default: 45 ) Set a margin bottom value for each widget in the sidebar. This provides gap between the widgets in the sidebar.
  2. Widget Title Font Size Set a font size value for the widget title in the sidebar.
  3. Widget Title Color Select a font color for the widget title in the sidebar.
  4. Widget Title Ribbon Turn on to display a ribbon like structure above the widget title in the sidebar.
  5. Widget Title Ribbon Color Select a font color for the ribbon displayed above widget title in the sidebar.
  6. List Item Text Color Select a font color for the list item text inside the widget.
  7. List Item Hover Color Select a hover color for the list item text inside the widget.
  8. List Item Padding ( Default: 10 ) Set a value for the padding between the list items inside the widget.
  9. List Element Border Width ( Default: 1 ) Set a value for the border width between the list items inside the widget. The border seperates two list items so you can set the value to zero if you don’t want the border.
  10. List Element Border Color Select a font color for the border placed between the two list items displayed by a widget in the sidebar.

Typography Settings

    1. All the options related to typography settings are available in

Appearance > Customize > Suffice Theme Options > Typography Settings

    1. section from the WordPress dashboard.
    1. The options integrated in this section are:
    1. Body Typography Set desired values in the various options below to customize the typography of the various elements inside body tag.
      • Font FamilySelect font family for the elements inside the body.
      • VariantSelect a variant for the choosen font family.
      • SubsetSelect a subset for the choosen font family.
      • Font SizeSelect a font size for the various elements inside the body tag.
      • Line Height Set a line height for the elements inside the body tag.
      • Letter Spacing( Default: 0 )Enter a numerical value for the space between the letters.
    1. H1 Typography Set desired values in the various options below to customize the typography of the various elements inside ‘h1‘ tag.
      • Font FamilySelect font family for the elements inside the ‘h1‘ tag.
      • VariantSelect a variant for the choosen font family.
      • SubsetSelect a subset for the choosen font family.
      • Font SizeSelect a font size for the various elements inside the ‘h1‘ tag.
      • Line Height Set a line height for the elements inside the ‘h1‘ tag.
      • Letter Spacing( Default: 0 )Enter a numerical value for the space between the letters inside the ‘h1‘ tag.
    2. H1 Color Select a font color for the elements inside the ‘h1‘ tag.
The above settings is for ‘h1‘ tag and similar settings are provided for the rest of the available heading tags like ‘h2‘, ‘h3‘, ‘h4‘,’h5‘, and ‘h6‘
  1. Post Title Font Size Enter a value with valid CSS unit for the font size of the post title in the single and blog listing page.
  2. Post Title Line Height Enter a value with valid CSS unit for the line height of the post title in the single and blog listing page.

Blog/Article Settings

    1. All the options related to blog/article settings are listed under this section, so to customize the blog posts, go to:

Appearance > Customize > Suffice Theme Options > Blog/Article Settings

    1. section from the WordPress dashboard.
    1. The options integrated in this section are:
    1. Blog Post StyleChoose between the two available style options which are listed below:
      • ClassicThe classic style where the blogs are displayed as a list.
      • GridThe bolg posts are displayed in a grid.
    2. Grid Layout Columns Select the number of columns to be displayed in the blog listing page if the grid style is choosen. The choices available here are:
      • Two Columns Two columns layout for the grid style.
      • Three ColumnsThree columns layout for the grid style.
      • Four ColumnsFour columns layout for the grid style.
      • Six ColumnsSix columns layout for the grid style.
    3. Featured Image on Blog Archive Page Turn on to display the featured image of a post in the archive pages.

BLOG POST SINGLE
This section includes settings to customize the blog post on its single page.

    1. Featured Image on Single Blog Post Turn on to display the featured image of a post in the single page.
    2. Post Title alignment Choose where you want to display the post title in single page.
      • Below Select this option to display the post title below th e featured image.
      • Above Select this option to display the post title above th e featured image.
      • Disable Select this option to disable the post title.
    3. Post Navigation Turn on to display the post navagtion in the single page.
    4. Comments Turn on to enable the comments in the single page.

BLOG META
This section includes the settings for the post meta like category, date, author, tags, and comment number on all the pages.

  1. Post Meta Item Font Size ( Default: 13 ) Set a value for the fontsize of the post meta.
  2. Post Meta Turn on to display all the post meta. The settings below similarly controls the each of the post meta elements seperately.
  3. Post Meta Author Turn on to display the author post meta.
  4. Post Meta Date Turn on to display the author post meta.
  5. Post Meta Categories Turn on to display the categories post meta.
  6. Post Meta Comments Turn on to display the comments post meta.
  7. Post Meta Tags Turn on to display the tags post meta.

Category Color

    1. To assign different color to different category, go to:

Appearance > Customize > Suffice Theme Options > Category Color

    1. section from the WordPress dashboard.
    1. The options integrated in this section are:
In this section you can see the list of post categories with a color picker so that you can assign different color to each category.

Search Settings

    1. For the settings related to search page styling, go to:

Appearance > Customize > Suffice Theme Options > Search Settings

    1. section from the WordPress dashboard.
    1. The options integrated in this section are:
  1. Search Results StyleChoose between the two available style options which are listed below:
    • ClassicThe classic style where the search results are displayed as a list.
    • GridThe search results are displayed in a grid.
  2. Featured Image for Search ResultsTurn on to display the featured image in the search results.

Related Posts Settings

    1. All the options related to Related posts settings are available in

Appearance > Customize > Suffice Theme Options > Related Posts Settings

    1. section from the WordPress dashboard.
    1. The options integrated in this section are:
  1. Related Post Turn on to display the related posts in the single post page.
  2. Get Related Post From Choose whether you want the related posts to be genereted based on similarities of ‘categories’ or ‘tags’.
  3. Related Post StyleChoose between the three available style options which are listed below:
    • DefaultThe default style where the featured image is displayed above the post title.
    • Title on HoverThe post title is displayed over the featured image on hover.
    • Title OverlayedThe post title is overlayed on featured image.
  4. Number of Related Posts ( Default: 6 ) Set the number of related post articles to be displayed in the single post page.
  5. Related Post Column Select the number of columns to be displayed in the single page for the related posts. The choices available here are:
    • Two Columns Two columns layout for the related posts.
    • Three ColumnsThree columns layout for the related posts.
    • Four ColumnsFour columns layout for the related posts.
    • Six ColumnsSix columns layout for the related posts.
  6. Column Spacing between Posts ( Default: 15 ) Set the space between two related posts in the single page.
  7. Realted Post Carousel Turn on to enable the carousel effect for the realted posts.
  8. Realted Post Carousel Autoplay Turn on to enable the autoplay feature in the related post carousel.
  9. Realted Post Carousel Navigation Turn on to display the navigation buttons in the related post carousel.

WooCommerce Settings

    1. To set WooCommerce pages settings for your site, go to

Appearance > Customize > Suffice Theme Options > WooCommerce Settings

    1. section from the WordPress dashboard.
    1. Products Per Page ( Default: 12 ) Set the number of products to be displayed per page on shop and archive pages.
    2. Products Per Row ( Default: 3 ) Set the number of products to be displayed in a single row on shop and archive pages.
    3. Related Products Turn on to display the related products on the product detail(single) page.
    4. Number of Related Products ( Default: 4 ) Set the number of related products to be displayed.
    5. Number of related products per row ( Default: 4 ) Set the number of related products to be displayed in a single row.
    6. Upsell Product Turn on to display the upsell product in the product detailed page.
    7. Number of Upsell Products Set a the number of upsell products to be displayed.
    8. Number of upsell products per row Set a the number of upsell products to be displayed in a single row.

WOOCOMMERCE STYLING

  1. WooCommerce Product Style Choose from the two available options for styling the products on the product archive pages. The available choices are:
    • Clean Clean style for the products.
    • ModernModern style for the products.

Additional Settings

    1. All the options related to Additional Settings are available in

Appearance > Customize > Suffice Theme Options > Additional Settings

    1. section from the WordPress dashboard.
    1. The options integrated in this section are:
  1. Google Map APIEnter your Google Map API here. If you are using Gmap Widget.

Page Templates

This theme has built in page templates to show your pages in different way by using the bundled widgets.

Page Templates

If you want your static page to have different layout then you can select from the availabl four page templates which are listed below:

  1. Default TemplateThe page will inherit the layout selected from the ‘Customizer’.
  2. Full Width A page template with content spreading the full width of the site without any sidebars in the left or right.
  3. Left Sidebar A page template with content to right and a sidebar to the left.
  4. PagebuilderA page template for creating you page with Page Builder by SiteOrigin plugin. This provides you more flexiblity on creating new page designs any using widgets.
  5. Right Sidebar A page template with content to left and a sidebar to the right.

Page Specific Meta

This theme has built in page specific metabox option to select a transparent header.

Metabox Option

  1. Transparent Header Check this option to make page content to overlap under the transparent header.

Page Builder

Build responsive page layouts using the widgets using this simple drag and drop page builder.

Page Builder by SiteOrigin

While using this page template, you have the ability to display the widgets by using the Pagebuilder plugin, named as Page Builder by SiteOrigin and manage your widgets on this page. The link to this plugin is here: Page Builder by SiteOrigin

Add Widget

  • Go to any of your page.
  • Click the Page Builder tab which is located in top right of content.
  • You can add your widgets just by clicking Add widgets button

The image for adding your widgets in particular page using Page Builder by SiteOrigin is shown below which will be displayed as below in the backend:-

Add Row

  • Go to any of your page.
  • Click the Page Builder tab which is located in top right of content.
  • You can add your widgets just by click add row button

The image for adding your rows in particular page using Page Builder by SiteOrigin is shown below which will be displayed as below in the front-end:-
Page Builder row

Info: need to install Page Builder by SiteOrigin plugins.

Suffice Toolkit

Suffice Toolkit is companion plugin of this theme which contains many awesome widgets. This plugins is specially developed for the Suffice Theme so there are no compatibility issues.

Widgets

This plugin includes 16 custom built widgets so that one can construct any kind of website using those widgets.

ST: Slider

This widget is designed to display a image slider with various text and button overlayed on the image .

  • Add the ST: Slider Widget in a page via Page Builder and fill out the necessary informations like the Slider title, image, button text and link etc.
  • Various elements of the slider can be customized such as: slider content style and position, button size, style and shape.
  • Slider HeightChoose the height of the slider.
    • Auto Height:The slider height is equal to the height of the image uploaded.
    • Full Viewport Height:The slider covers the whole screen (viewport).
  • On the top of the widget you can see another tab named ‘Styling’ which contains an option for styling the slider navigation button, you can choose between the two images, first displays circular navigation buttons whereas sqaure shaped buttons are displayed by the second.

The following is an image of the front-end of the ST: Slider Widget.

ST: Title

    • This widget is designed to display a title and its short description.
  • Add the ST: Title Widget in a page via Page Builder and fill out the title and sub-title field. One of these field could be left empty if not required.
  • At the top of the widget you can see two additional tabs, namely Styling: contains options customized the design as desired and Styling: contains color related settings.

The following is the front-end image of the fully customized ST: Title Widget

ST: Call To Action

    • This widget is designed to display a call to action banner with a title, short description, an icon and two buttons.
  • Add the ST: Call To Action in a page via Page Builder and fill out the necessary information like title, description, icon, button text and link.
  • There are three style options to choose from, these options can be found under the ‘Styling’ tab at the top of the widget.
  • Similarly a whole lot of color-related options can be found under ‘Color’ tab right next to the ‘Styling Tab’

The following is the front-end image of the fully customized ST: Call To Action Widget

Info: There are three different style options for this widget and the image above is when the first style option is selected.

FT: Button

    • As the name suggests, this widget is designed to display a button. An icon can be displayed inside the icon if required.
  • Add the FT: Button in a page via Page Builder and fill out the necessary information like button text, link and select and icon from the provided list.
  • Just like the widgets mentioned above, this widget also contains the options for styling and color under its respective tabs placed at the top of the widget.

The following is the front-end image(encircled portion) of the fully customized ST: Button

ST: Logo

    • This widget is desinged to display a horizontal list of images.
  • Add the ST: Logo Widget via Page Builder and fill out the necessary information like logo image, link.
  • You can add as many logo images as desired, the widget acts as slider and the images inside can be swiped when more images are added.
  • Two style options are provided in this widget which can accessed via the Styling tab at the top.

The image below depicts the front-end of the ST: Logo Widget with five added images:-

ST: Portfolio

    • This widget is primarily designed to display the portfolio of your recent work. The

Suffice Toolkit

    • plugin registers a custom post type named Portfolio and this widget displays these custom post type.
  • Add the ST: Portfolio Widget via Page Builder and fill out the necessary information like portfolio category, number of items to display.
  • There are four different style options available which can be found under the Styling tab.

The image below depicts the front-end of the ST: Logo Widget with fives added images:-

Info: You need to create portfolio from the admin panel via Portfolio->Add Project so that it can be displayed by this widget.

ST: Image

    • This is a widget designed just to display an image.
  • Add the ST: Image Widget via Page Builder and add an image and its link

The image below depicts the front end of the ST: Image Widget

ST: Blog

    • This widget is designed to display the WP default blog posts in different styles.
  • Add the ST: Blog Widget via the Page Builder and fill out the required information like number of post, latest/category etc.
  • Four different style options are provide to choose from which can be accessed via the ‘Styling’ tab at the top.
  • Options like number of posts to be displayed in a row, blog post source(latest posts or specific category) are available under the General tab.
  • There are two available options for the Featured Posts Source and they are:
    1. Latest Posts Recently added posts are displayed regardless of the category.
    2. Category Posts from specific categories are displayed. The category to be displayed can be chosen from the Category lists dropdown field below.

The following image depicts the front-end of the ST: Bolg Widget when the first style option is selected.

ST: Team

    • This widget is designed to display the Team Members with additional information.
  • Add the ST: Team Widget via the Page Builder plugin and fill out the team member’s details like name, image, designation and social links.
  • It has three different style options to choose from which can be found under the Styling tab at the top and similarly color options can be found under the Color tab.

The image below depicts the front-end of the fully set ST: Team Widget.

ST: Testimonial

    • This widget is primarily designed to display the clients testimonials with image.
  • Add the ST: Testimonial Widget via the Page Builder and fill out the information such as name, image and description.
  • Option to control the number of testimonials to be displayed per row can be found under the General tab.
  • There are three style options under Styling tab, and the various color related options are under the Color tab at the top of the widget.

The image below depicts the front-end of the ST: Testimonial Widget when the first style option is chosen.

ST: Counter

    • This widget is primarily designed to display a counter with icon.
  • Add the ST: Counter Widget via the Page Builder and fill out the information such as title, icon, count number etc.
  • Prefix and suffix can be added to the count number.
  • There are four style options under Styling tab, and the various color related options are under the Color tab at the top of the widget.

The image below depicts the front-end of the ST: Counter Widget when the first style(Hexagon) option is chosen.

ST: Iconbox Widget

    • This widget is primarily designed to display an icon with title, description and a button.
  • Add the ST: Iconbox Widget via the Page Builder and fill out the information such as title, icon, button link, text etc.
  • There are four style options under Styling tab, and the various color related options are under the Color tab at the top of the widget.

The image below depicts the front-end of the ST: Iconbox Widget when the fourth(Round Icon With Border) style option is chosen.

The image below depicts the front-end of the ST: Iconbox Widget when the third(Small Icon) style option is chosen.

ST: Google Map

    • This widget is designed to display a google map.
  • Add the ST: Google Map via the Page Builder and fill out the information such as map height, longitude, latitude, zoom level etc.
  • Enter the desired text Marker Tooltip field to display it when a user clicks on the marker icon(set location.)

The image below depicts the front-end of a fully set ST: Google Map Widget

The map above is set to display the location of our ThemeGrill Office.

ST: Pricing Table

    • This widget is primarily designed to display pricing tables to showcase your various pricing plans.
  • Add the ST: Pricing Table via the Page Builder and fill out the information such as title, sub-title, currency etc.
  • Dynamic fields can be added to show the key points as a list.
  • There are three style options under Styling tab, and the various color related options are under the Color tab at the top of the widget.

The image below depicts the front-end of a fully set ST: Pricing Table

The pricing table above is displayed when the third style(sleek) option is choosen.

ST: Featured Posts

    • This widget is designed to display the WP default blog posts in different styles.
  • Add the ST: Featured Posts via the Page Builder and fill out the required information like source, category etc.
  • Three different style options are provide to choose from which can be accessed via the ‘Styling’ tab at the top.
  • There are two available options for the Featured Posts Source and they are:
    1. Latest Posts Recently added posts are displayed regardless of the category.
    2. Category Posts from specific categories are displayed. The category to be displayed can be chosen from the Category lists dropdown field below.

The following image depicts the front-end of the ST: Featured Posts when the first style option is selected.

ST: WooCommerce Product

    • This widget is designed to display WooCommerce products.
  • Add the ST: WooCommerce Product Widget via the Page Builder and fill out the information such as product type, number of products and number of columns in a row.
  • You can either display Featured product, On Sale Products or choose the All Products option to display all kinds of WC products.
  • You can choose among the two available style options which can be found under the Styling tab at the top of the widget.

The image below depicts the front-end of a fully set ST: WooCommerce Product Widget

Initially you need to create WooCommerce products so that it could be displayed by this widget.

ST: WooCommerce Category

    • This widget is designed to display WooCommerce categories with the image.
  • Add the ST: WooCommerce Category Widget via the Page Builder and fill out the information such as categories and number of columns in a row.
  • Desired number of categories can be added by selecting from the dropdown list. Valid WooCommerce categories are displyed in the list.
  • Two different style options(Transparent and Flat) are provided which can be selected from the dropdown list of the Styling field.

The image below depicts the front-end of a fully set ST: WooCommerce Product Widget

Initially you need to create the WooCommerce categories and add image to the category. Go To: Products->Categories select a category and upload an image. A default image will be displayed no image is assigned to the category.

How to limit the excerpt text

Now if you want to reduce or increase the number of words that appear in services widgets or post. You can easily change that.

Steps

  1. First Go to the service widget page or post in your dashboard.
  2. Just below the page editor you will see the excerpt box
  3. If you don’t see the excerpt box. Scroll to the top and you will see the screen options on the right hand side corner.

screen-options

  1. Click it and check the Excerpt box. Now you should see the excerpt box below the editor.
  2. Fill the excerpt box with the desired amount of text that you want to show.

How to Setup Blog page?

You can select either list or grid layout for the blog posts.

Steps

  1. First go to Settings->Reading->Front Page displays->A static page (select below).
  2. Now from Posts page: dropdown select any page where you like to show blog post.
  3. Click Save Changes.

Recommended Images

Since this theme heavily relies on the featured images of the post, custom post type(portfolio) and the images used in other widgets. So, we have created different recommended image size for this theme. Recommended image size (width*height) used in Suffice theme in pixels.

Recommended Image Size

  1. Recommended image size for ST:Slider – 1920 x 1080 pixels
  2. Recommended image size for FT:Team(Default,Bubble) – 270 x 230pixels
  3. Recommended image size for FT:Team(Boxed) – 270 x 230pixels
  4. Recommended image size for FT:Testimonial – 270 x 230pixels
  5. Recommended image size for Posts – 1280 x 1024 pixels
  6. Recommended image size for Portfolio(Project) – 1280×1024 pixels
  7. Default Portfolio image will be cropped into- 572 x 552pixels
  8. Masonry Portfolio image will be cropped into – 572 x 652pixels
  9. Default Blog Post will be cropped into – 750 x 420pixels
Suffice