Import / Export Settings

The Ken allows you to import or export all Theme Settings, or the settings that make your website. It is always recommended to have a backup of your theme settings as things may go wrong in the future, who knows! This option is also handy when you want to move your website to another server or domain.
In this article we’ll describe how to import and export the theme settings.

To access the Import / Export settings, from WordPress top bar, go to Theme Settings > Import / Export

import / export settings


Export Options

1Go to Theme Settings > Import / Export > Export Options

import / export settings

2Copy the code and paste it into a text file.
3Save the file.

Import Options

1In your new installation you’ll need to paste the saved content in Theme Settings > Import / Export > Import Options.

import / export settings

2Click on the Import button.

And you’re done. The Theme Settings are imported.

If you have any questions or difficulties importing/exporting the Theme Settings, you can contact our support help desk.

Typography Settings

Theme Settings is the main section of the Ken, from which you can set global settings for your website. We are going to describe about options available under the Typography section of Theme Settings in this article.

To access the typography settings, from WordPress top bar, go to Theme Settings > Typography


Typography Settings

1Body Font.  

Use this option to set the font properties for the main body section. Fonts included in the theme are standard web safe fonts and Google Fonts. You can set the properties below for selected fonts in this section:

Name Description

Font Family You can select either standard or Google Fonts here.
Backup Font Family Use this option to set a backup font, in case the first selected font does not load for some reason.
Font Weight & Style Use this option to set the font weight and/or style of the font. e.g. Bold, Italic.
Font Subsets Use this option to decide which subset should be included in the font. For example if you use English language the Latin subset will be enough, but for example the German language will need Latin Extra, or Greek will need the Greek subset.
Text Align Using this option you can set the alignment of the font, such as Justified or left. For instance, Arabic and some other languages use right justification.
Font Size Decide the size of the font using this option. This option is in pixels.

2Headings Font.  

Use this option to set the font properties for the header section. Fonts included in the theme are standard web safe fonts and Google Fonts. You can set the below properties for the selected font in this section:

Name Description

Font Family You can select either standard or Google Fonts here.
Font Weight & Style Use this option to set the font weight and/or style of the font. e.g. Bold, Italic.
Font Subsets Use this option to decide which subset should be included in the font. For example if you use English language the Latin subset will be enough, but for example the German language will need Latin Extra, or Greek will need the Greek subset.
Text Align Using this option you can set the alignment of the font, such as Justified or left.

3Widgets Title.  

Use this option to set the font properties for Widget title section. This will apply to all widget areas titles, including footer, sidebar and side dashboard. Fonts included in the theme are standard web safe fonts and Google Fonts. You can set the below properties for the selected font in this section:

Name Description

Font Family You can select either standard or Google Fonts here.
Font Weight & Style Use this option to set the font weight and/or style of the font. e.g. Bold, Italic.
Text Align Using this option you can set the alignment of the font, such as Justified or left.
Font Size Decide the size of the font using this option. This option is in pixels.

Ken Theme Settings Typography Settings 2
4Page Title Text Size.  

Set the text size of Page Title area using this option.

5Paragraph Text Size.  

Set normal paragraph text size throughout whole website using this option.

6Paragraph Line Height.  

Set normal paragraph line height throughout whole website using this option. This will decide how much vertical breathing space each paragraph has.

7Main Navigation Top level.  

Use this option to set the font properties for the main navigation first level items. This option will not have any affect on sun menu item fonts. Fonts included in the theme are standard web safe fonts and Google Fonts. You can set the below properties for the selected font in this section:

Name Description

Font Family You can select either standard or Google Fonts here.
Font Weight & Style Use this option to set the font weight and/or style of the font. e.g. Bold, Italic.
Text Align Using this option you can set the alignment of the font, such as Justified or left.
Font Size Decide the size of the font using this option. This option is in pixels.

8Main Menu Items Gutter Space.  

This option value will act as padding space on the left and right of each menu item. Default value for this option is 17 pixels.

9Main Menu Items Top & Bottom Padding.  

This option value will act as padding space on the top and bottom of each menu item. Default value for this option is 10 pixels.

10Main Menu Top Level Text Transform.  

Using this option you can decide about the case of top level menu items. Available options:

  1. Uppercase
  2. Capitalize
  3. Lowercase
11Main Menu Sub Level Font Size.  

Use this option to set the font size for sub level menu items. Value is in pixels.

12Main Menu Sub Level Text Transform.  

Using this option you can decide about case of sub level menu items. Available options:

  1. Uppercase
  2. Capitalize
  3. Lowercase

Ken Theme Settings Typography Settings 3

13Main Menu Sub Level Font Weight.  

Use this option to set the font weight of main menu sub level items. Available options:

  1. Light (300)
  2. Normal (400)
  3. 500
  4. 600
  5. Bold (700)
  6. Bolder
  7. Extra Bold (800)
  8. 900
14Toolbar Font.  

Use this option to set the font properties for the header toolbar section. This option will not have any affect on sun menu item fonts. Fonts included in the theme are standard web safe fonts and Google Fonts. You can set the below properties for the selected font in this section:

Name Description

Font Family You can select either standard or Google Fonts here.
Font Weight & Style Use this option to set the font weight and/or style of the font. e.g. Bold, Italic.
Text Align Using this option you can set the alignment of the font, such as Justified or left. For instance, Arabic and some other languages use right justification.
Font Size Decide the size of the font using this option. This option is in pixels.

15Footer Widget Title Font.  

Name Description

Font Weight & Style Use this option to set the font weight and/or style of the font. e.g. Bold, Italic.
Font Size Decide the size of the font using this option. This option is in pixels.
Letter Spacing Use this option to set the letter spacing.

15Footer Text Size.  

Set the text size of Footer using this option.
Ken Theme Settings Typography Settings 4
16Subfooter Text Size.  

Set the text size of Subfooter using this option.
17Subfooter Text Letter Spacing.  

Use this option to set the letter spacing of the Subfooter Text Letter Spacing.

18Choose a Typekit Font.  

Use this option to add the kit name you have set in Typekit if you use that service.

19Add Typekit Elements Class Names.  

Add class names for which you want the Typekit to apply the above font family. Add Class, ID or tag names (e.g. : body, p, #custom-id, .custom-class). This list is a comma separated list.

Background Settings

Theme Settings is the main section of Ken where you can change the global settings of your website. You can access Theme Settings from the top left side of your dashboard.

In this article, we will describe the options available under the Backgrounds section of Theme Settings.

background settings


Site Layout

site_layout

There are two options available to define the layout of the site: The Full Width layout and the Boxed Layout.


Boxed Layout

1Boxed Layout Shadow
boxed_layout

Toggle this option to enable or disable the shadow for the boxed layout.

2Body Background
body_background

Upload Custom Image Click on the upload button to upload a custom image for the body.
Background Color This option adds a background color to the body.
Background Position This option is used to position the background image added to the body. You can find the options in the dropdown.
Background Attachment This option lets you choose the attachment type for the background image. Choosing the fixed option will create a parallax effect.
Background Repeat Use this option if you want to repeat the background image. Choose no-repeat if you do not want to repeat the background image.
Background Cover Enable this option if you want the background image to cover the whole body.

Header

1Header Background
header_backgound

Upload Custom Image Click on the upload button to upload a custom image for the header.
Background Color This option adds a background color to the header.
Background Position This option is used to position the background image added to the header. You can find the options in the dropdown.
Background Attachment This option lets you choose the attachment type for the background image. Choosing the fixed option will create a parallax effect.
Background Repeat Use this option if you want to repeat the background image. Choose no-repeat if you do not want to repeat the background image.
Background Cover Enable this option if you want the background image to cover the whole header.
2Header Bottom Border Color
header_bottom_border

Click this option to choose the bottom border color for the header. You can also set the color to transparent.

3Header Toolbar Background
header_toolbar

Upload Custom Image Click on the upload button to upload a custom image for the header toolbar.
Background Color This option adds a background color to the header toolbar.
Background Position This option is used to position the background image added to the header toolbar. You can find the options in the dropdown.
Background Attachment This option lets you choose the attachment type for the background image. Choosing the fixed option will create a parallax effect.
Background Repeat Use this option if you want to repeat the background image. Choose no-repeat if you do not want to repeat the background image.
Background Cover Enable this option if you want the background image to cover the whole header toolbar.

Page

1Page Title Background
page_title_background

Upload Custom Image Click on the upload button to upload a custom image for the page title section.
Background Color This option adds a background color to the page title section.
Background Position This option is used to position the background image added to the page title section. You can find the options in the dropdown.
Background Attachment This option lets you choose the attachment type for the background image. Choosing the fixed option will create a parallax effect.
Background Repeat Use this option in if want to repeat the background image. Choose no-repeat if you do not want to repeat the background image.
Background Cover Enable this option if you want the background image to cover the whole page title section.
Bottom Border Color  Click this option to choose the bottom border color for the page title section.
2Page Background
page_background

Upload Custom Image Click on the upload button to upload a custom image for the page content section.
Background Color This option adds a background color to the page content section.
Background Position This option is used to position the background image added to the page content section. You can find the options in the dropdown.
Background Attachment This option lets you choose the attachment type for the background image. Choosing the fixed option will create a parallax effect.
Background Repeat Use this option if you want to repeat the background image. Choose no-repeat if you do not want to repeat the background image.
Background Cover Enable this option if you want the background image to cover the whole page content section.

Footer

1Footer Background
footer_backgound

Upload Custom Image Click on the upload button to upload a custom image for the footer section.
Background Color This option adds a background color to the footer section.
Background Position This option is used to position the background image added to the footer section. You can find the options in the dropdown.
Background Attachment This option lets you choose the attachment type for the background image. Choosing the fixed option will create a parallax effect.
Background Repeat Use this option if you want to repeat the background image. Choose no-repeat if you do not want to repeat the background image.
Background Cover Enable this option if you want the background image to cover the whole footer section.
2Sub Footer Background Color
sub_footer

This option will add a background color to the sub-footer section. You can also choose transparent background for this option.

Manage Theme Speed Settings

Theme Settings is the main section of Ken, where you can change your global settings for your website. In this article, we are going to describe the options available under the Manage Theme Speed section of Theme Settings.

To access the theme speed settings, from WordPress top bar, go to Theme Settings > Manage Theme Speed

theme speed


What is Minification

Minification is a process in which the size of the file is minified by removing empty spaces and renaming long variables names to short names (in case of JS files). The result of the minification process is 40% less sized files which ultimately help in faster page load.


Minify Javascript Files

You can enable JS minification using this option. This option will only pickup the pre-minified JS files (theme-scripts-min.js & plugins.js). So use this option if you did not hack the JS files.


Minify CSS Files

You can enable CSS minification using this option. This option will only pickup the pre-minified CSS files. So use this option if you did not hack the CSS files


Remove Query String from Static Files

The use of query string on a file is to make sure the browser re-downloads the file everytime it has been updated. This process is helpful when a user has defined caching for the files. The query string is defined on the basis of product version in majority of the cases or it can be timestamp also. Apparently, this process is logical when the files are dynamic and updated periodically which could include CSS files or JS files.

In case, the files are static, using this process on static files will only slow down the page load time because the browser will have to re-download a static file which is already present in the browser cache.

Enable this option to remove the query string from the static files to make the page load time faster.

Inserting Custom CSS

Sometimes you find yourself needing to add custom CSS codes in order to add or override some stylings. There are several places to add the custom CSS codes in The Ken theme.

In this article, we’ll explain how to add custom CSS codes into different locations using two examples about overriding the single blog post.


Writing CSS Codes

For the purpose of this article, we’ll write custom CSS codes that disable the metadata and change the content width of a single post.

To Disable the Metadata:

1Open one of your single posts. In this example, we’ll use our live demo page.
2There are three types of metadata: post date, post category and comments/likes. To disable all of them you’ll need to inspect them first.

custom css

3Inspect the above mentioned meta data and take note of its HTML class, which here is entry-meta.

custom css

4Write the appropriate CSS code.

.entry-meta {
    display: none;
}

5Take note of this code and add it into the theme as explained in the next section.

Changing Content Width

1Open one of your single posts. In this example, we use our live demo page.
2Inspect the post container and take note of the HTML class, which here is single-content.

custom css

3As shown in the image above, the max-width property is set to 1100px which means that the maximum width for the post container is 1100px. To change the width you’ll need to write the appropriate CSS codes.

/* Decrease the content width in single blog post */
.single-content {
    max-width: 980px !important;
    margin: 0 auto;
}

4Add a .single-post class to the beginning of the codes to make sure that the codes only affect the single post pages.

/* Decrease the content width in single blog post */
.single-post .single-content {
    max-width: 980px !important;
    margin: 0 auto;
}

5Take note of these codes and add them into the theme as explained in the next section.

Inserting the CSS Codes

After writing the CSS codes, you can insert them into The Ken theme. There are several locations available to add the custom CSS codes.

Theme Options

To add the custom CSS codes into Theme Options:

1From the WordPress top menu, go to Theme Settings > Custom CSS.

custom css
2Paste the codes you wrote into the Custom CSS section and Save the changes.

Child Theme

1First, enable your child theme.

2Paste the codes you wrote into ken-child/style.css

3Save the file and clear your theme cache.

Customizer

1From the left menu, go to Appearance > Customize.

2From the left menu, choose Additional CSS.

3Paste in the codes you wrote and click Save.

Page Settings

You can add the CSS codes individually on each page using Visual Composer.

1From the top right of your page editor, click on Page Settings

2Paste your code into the Custom CSS Settings area.

3Click on Save Changes and update or publish your page.


Common Issues

The CSS is added to the Custom CSS field but it doesn’t work. What should I do?

First of all, make sure you have added the correct CSS codes. You can check them by inspecting the element on your test page.

Then, make sure there is no wrong character in the codes. Sometimes, a simple “/” character will cause many issues on the website. You may also want to check and validate your CSS using a CSS beautifier tool such as cleancss.com.

You should also make sure your CSS has the right priority to apply to the element. Here is an example of when the browser would decide to apply the second CSS to the page, rather than the first:

Low Priority High Priority

body {background: white;} body {background: white !important;}

For more information about CSS priority visit https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

I imported a custom font using Import in Custom CSS but it didn’t work.

If you want to use a custom font in the theme,  add the import at-rule (@import) to the child theme’s style.css. Then you can specify the element that should use the font in the Custom CSS section.

Third Party API Settings

Theme Settings is the main section of Ken where you can change the global settings of your website. In this article, we will describe the options available under the Third Party API section of Theme Settings.

To access the third party API settings, from WordPress top bar, go to Theme Settings > Third Party API

third party api


Twitter API

ken-third-party-api-twitter
1Go to this page, login with your twitter account and click “Create a new application”.
2Fill out the required fields, accept “The Rules of the Road”, and then click on the “Create your Twitter application” button. You will not need a callback URL for this app, so feel free to leave it blank.
3Once the app has been created, click the “Create my access token” button.

Twitter Consumer Key Add the Twitter Consumer Key from the app in this textbox.
Twitter Consumer Secret Add the Twitter Consumer Secret from the app in this textbox.
Twitter Access Token Add the Twitter Access Token from the app in this textbox.
Twitter Access Token Secret Add the Twitter Access Token Secret from the app in this textbox.

Google API Key’s

Google Analytics ID

Enter your Google Analytics ID here to track your site with Google Analytics.

Google Maps API Key

To get an API key:

1Go to Google API Console page. You need to have a Gmail account.
2Create or select a project and click on Continue.

Advanced Google Maps shortcode - third party api

3Set the API key name and restrictions, and click on Create.

Advanced Google Maps shortcode - third party api

4A new pop-up window will appear with your API key.

Advanced Google Maps shortcode - third party api


Misc. API’s

ken-third-party-api

Flickr API Key

You will need to fill in this field if you want to use the Flickr widget or shortcode.

You can obtain the Flickr API key from Flickr The App Garden

MailChimp API Key

Enter your MailChimp API Key to use the MailChimp subscription shortcode.

Typekit ID

If you want to use Typekit in your site simply enter the Typekit ID you get from the Typekit site. Read More

Portfolio Settings

Theme Settings is the main section of The Ken where you can change the global settings for your website. In this article we will describe the options available under the Portfolio section of Theme Settings.

To access the portfolio settings, from WordPress top bar, go to Theme Settings > Portfolio

portfolio settings


Portfolio Settings

1Page Title: Portfolio Posts

Use this option to enable the page title section for single portfolio posts. If you disable this section, the whole page title area will not show, including the title itself and the breadcrumbs area.

2Portfolio Slug

Portfolio Slug is the text that is displayed in the URL (e.g. www.domain.com/portfolio-posts/morbi-et-diam-massa/). As shown in the example, it is set to “portfolio-posts” by default, but you can change it to anything to suit your preference. However, you should not have the same slug on any page or other page or page otherwise the page will return the 404 error due to the internal conflicts.

3Previous & Next Arrows

Use this option to show/hide the navigation arrows on portfolio single posts.

4Portfolio Single Featured Image

Use this option to show/hide the featured image on portfolio single posts. Featured images can be in gallery or video format if the post type of the portfolio is set to those types.

5Featured Image Hard Cropping

If you want to disable automatic image cropping for a featured image, disable this option. The original image size will be used; however, it will be responsive and fit to the container. This option will affect the single portfolio post featured image. Enabling this option will make use of the BFI_THUMB plugin.

6Featured Image Height

Use this option to set the height of featured image, gallery, or slideshow, depending on the portfolio post type you choose.

7Related Projects

Enable this option if you want to have a section at the very bottom of your portfolio posts which will show related portfolio posts. This option will look into the portfolio category to pick related items.

8Comments

Enable this option to have comments available in single portfolio posts.

8Portfolio Archive Loop Style number

In general you will use the Portfolio Shortcode to configure the style of the portfolio listing page, but if you access the portfolio listing from the default categories, WordPress will use its default archive system. In such cases you can use this option to set the default portfolio listing style. Available options are:

Name Description

Grid Display the portfolio listing in Grid layout.
Masonry Display the portfolio listing in Mansory layout.
Flip Display the portfolio listing in Flip layout.
Standard Display the portfolio listing in Standard layout.
Scroller Display the portfolio listing in Scroll layout.

Configuring Logos

A logo is a visual representation of your business. It reflects your company’s name, message and values. Over time, your logo should be immediately recognizable to your customers, which is why The Ken offers a lot of options for customization.

This article covers the several ways that you can add and configure your logo. It also explains the difference between the global and page-specific logo.

configuring logos


Different Types of Logos

There are several logo types that are used in specific situations.

Type Description Size
Upload Favicon  Sets the default custom favicon 16*16px, 32*32px for Retina
Upload Logo This logo will be used as your default logo when your header skin is dark. 200*200 px
Upload Retina Logo Use this option if you want your logo to appear crystal clear on retina devices(eg. Macbook Retina, iPad, iPhone). 400*400px
Upload Light Logo This option will only be used if you have a transparent header with a light skin. 200*200px
Upload Retina Light Logo Use this option if your logo to appear crystal clear on retina devices (e.g. Macbook Retina, iPad, iPhone) and if you have a transparent header with a light skin. 400*400px
Upload Mobile Logo This logo will be used on mobile devices. 150*150px
Upload Mobile Retina Logo Use this option if you want your logo appear crystal clear on mobile retina devices(eg. iPad, iPhone). 300*300px
Pre-loader Overlay Logo This logo will be viewed in the pre-loader overlay. 200*200px

Uploading a Logo Globally

The global logo will be used across your whole website.

To upload your global logo:

1From the WordPress top menu, go to Theme Settings > Upload Logo.

configuring logos

2Find the field Upload Logo and click on Upload.

configuring logos

3Click on Save Changes.

Overriding the Global Logo on a Page

Instead of using one logo for the whole website, there is also an option to add a logo only to a specific page.

To upload your page-specific logo:

1From the WordPress left menu, go to Pages and pick the page where you wish to upload your logo.

configuring logos
2Scroll down to Ken Styling Options and enable Custom Settings.

configuring logos
3Find your desired logo type and click on Upload.

4Publish or Update the page.


Adding a Logo to the Footer

To add a logo to the footer:

1From the WordPress left menu, go to Appearance > Widgets.

configuring logos

2On the Widgets page, drag and drop the Text widget into one of the Footer Column Areas.
3Inside the text widget content, add the text below and customize it to your logo URL.

<img src="Link-To-Your-Logo" alt="configuring logos" />

4Click on the Save button in the Text widget.

If you have any questions regarding the logo configuration, you can contact our support staff to get the assistance.

Mobile Header Settings

Theme Settings is the main section of Ken where you can change the global settings of your website. In this article, we will describe the options available under the Mobile Header section of Theme Settings.

To access the header mobile settings, from WordPress top bar, go to Theme Settings > Header Mobile

mobile header


Burger Menu Icon Color This option adds a color to the burger icon that toggles the menu.
Header Background Color This option adds a background color to the header on mobile.
Navigation Background Color This option adds a background color to the mobile header navigation menu items.
Navigation Text Color This option adds a text color to the mobile header navigation menu items.
Navigation Text Size This option configures the font size of the mobile header navigation menu items.
Search Form Input Background Color This option adds a background color to the search form input. To display a search form, you’ll need to first enable the Header Search Form option in Theme Settings -> Header
Search Form Input Text Color This option adds a text color to the search form input.

Side Dashboard Settings

Theme Settings is the main section of The Ken where you can change the global settings of your website. In this article, we will describe the options available under the Side Dashboard section of Theme Settings.

To access the side dashboard settings, from WordPress top bar, go to Theme Settings > Side Dashboard

side dashboard settings

Side dashboard is a dashboard that can be seen on the frontend when enabled. It opens after clicking the burger icon or any icon you choose. The elements to the side dashboard can be added in the Side Dashboard sidebar in Appearance > Widgets.


Side Dashboard

This option is used to enable or disable the side dashboard on the frontend. If this option is enabled, you will see another set of options defined below.


Side Dashboard Icon Class Name This option will give you the ability to add any icon you want to use for the side dashboard trigger icon. The icons can be found under Ken -> Icon Library. Copy and paste the desired icon class name from the library into this option.
Side Dashboard Background Color This option adds a background color to the side dashboard. You can also choose the dashboard background to be transparent.
Dashboard Widget Title This option configures the color of the widget titles which can be added to the side dashboard in Appearance -> Widgets.
Dashboard Widget Texts This option configures the color of the widget text which can be added to the side dashboard in Appearance -> Widgets.
Dashboard Widget Links This option is defined below this table.

Dashboard Widget Links

Use this option to set the color of widget links in the side dashboard. The links can have three states, and you can have a separate color for each one:

Regular: This color is the normal state of the link
Hover: This color is for when the mouse is over the link
Active: This color is for when the mouse has clicked on the link

Shop Settings

Theme Settings is the main section of Ken where you can change the global settings of your website. You can access Theme Settings from the top left side of your dashboard.

In this article we’ll describe the options available under the WooCommerce section of Theme Settings. WooCommerce is one of the popular shopping cart plugins and Ken has options to fine tune pages related to that plugin

shop settings


Shop Archive Settings

1Shop Layout

Defines the shop loop layout. Available options are:

  • Full Layout
  • With Left Sidebar
  • With Right Sidebar
2Product Loop Image Height

Use this option to set the image height for the thumbnails of products on the product listing pages. The default value for this option is 330 pixels.

3Shop Loop Image Size

Use this option to decide how the thumbnails should be rendered on the product listing pages. Available options are:

Title Description

Resize & Crop This option will make use of the BFI_THUMBNAILS plugin to resize and crop images via code before rendering them on the page.
Original Size This option will not make any change to the uploaded images but will show the exact same image with a responsive design in mind.
Large Size  This option will show the large size of an uploaded image.
Medium Size  This option will show medium size of uploaded image.
4Header Checkout/Shopping Box

Use this option to show/hide the header shopping box on the front end of the website.

5Product Loops image quality

Use this option to decide whether or not you want to have Retina compatible images. If yes, then you need to upload 2x images, and the theme will shrink them down via CSS for non-Retina devices. Available options are: Normal Size, Retina Compatible.

6Woocommerce Shop Loop Page Title

Use this option to enable/disable the page title area of the product listing pages. The page title area includes the page title and breadcrumbs.


Single Product Page Settings

1Single Layout

Use this option to choose the layout of the single product pages. Available options are:

  • Full Layout
  • With Left Sidebar
  • With Right Sidebar
2Show Product Category as Product Single Title

If you want to show the product category(if there are multiples, only the first will be used) as a single product page title, enable this option. If this option is disabled, the shop page title will be used.

3WooCommerce Single Product Page Title

Use this option to enable/disable the page title area of the single product pages. The page title area includes the page title and breadcrumbs.

If you have any problems or questions regarding WooCommerce integration with Ken please  open up a support ticket in our support system.

Blog Settings

The Blog Theme Settings is the main section which allows you to choose global settings for your Ken website posts in WordPress.

To access the blog settings, from WordPress top bar, go to Theme Settings > Blog

In this article we will describe the options available under the Blog section of Theme Settings.

blog settings


Blog Single Settings

1Blog Single Layout

You can globally manage the blog single layout using this option.

There are several options you can choose from to style the layout of your single post page:

Name Description

Feed From Meta Option Allows to control the layout locally through Ken Page Layout metabox.
Right Sets the sidebar on the right side.
Left Sets the sidebar on the left side.
Full Sets a full layout without a sidebar.
2Page Title: Blog Posts

This option allows you to hide/show the page title section (title, breadcrumb) in the blog single posts.

Just click Disable if you want to hide it.

blog settings

3Previous & Next Arrows

Using this option you can turn on/off the navigation arrows when viewing the post single page.

blog settings

4Blog Single Featured image, audio, video

This setting will completely disable the featured image, video and audio players from the blog single post if you select the “Disable” option.

5Featured image hard cropping

If you want to disable automatic image cropping for the featured image, disable this option. The original image size will be used, however, it will be responsive and fit to the container.

6Single Post Featured Image Height

Here you can set the height value of your featured image as well as your gallery post type slideshow.

7Related Posts

Using this setting you can enable or disable related posts on your single post page.

8About Author Section

This setting allows to enable/disable the “About Author” section It includes a short author bio and is shown after the post content.

9Blog Single Social Share

If you want to share your post on social networks, you need enable this option so social media icons will appear for your post. If you don’t want them, click “Disable”.

10Comments

This setting enables or disables the comments section on a single post page.


Blog Archive Settings

1Archive Layout

Defines the archive loop layout. Select the one you prefer.

2Archive Loop Style

Use this option to set the style of the Blog Archive page. The styles you can choose from are:

  • Classic
  • Masonry
  • Tile
  • Thumb
  • List
3Archive Loop Featured Image Height

Here you can set the height value for all featured images on the Blog Archive page.

4Archive Loop Page Title

Using this option you can enable/disable the page title section (including breadcrumbs).

If you have any questions regarding the Blog set up, you can create a ticket and our support staff will help.

Skin Settings

Theme Settings is the main section of The Ken where you can change the global settings of your website. You can access it from the top left side of your dashboard. In this article we will describe the options available under the Skin section of Theme Settings.

To access the skin settings, from WordPress top bar, go to Theme Settings > Skin

skin settings


Body

skin_body

Accent Color You can set the accent color of your website here. Most elements on the front end will use this color scheme. We recommend using a bold, vivid color for this option.
Body Text Color Use this option to set the color of the body text. This will be the color used for most of the text-based information on your website.
Headings Color Use this option to set the main color of the heading text. The heading text includes the copy which is wrapped in the h1, h2, h3, h4, h5, h6 tags.
Links Color This option is defined below the table.
Page Title Use this option to set the color of the text on the Page Title area on the front end.

Links Color

Use this option to set the color of your links. Links can have three states, and you can have a separate color for each one:

Regular: This color is the normal state of the link
Hover: This color is for when the mouse is over the link
Active: This color is for when the mouse has clicked on the link


Sidebar

skin_sidebar

Sidebar Widget Title Use this option to set the title color of the sidebar widget which you can add from Appearance -> Widgets.
Sidebar Widget Texts Use this option to set the inner text color of the sidebar widgets. This option will be overridden if a specific color is set in the theme style of an individual option.
Sidebar Widget Links This option is defined below the table.

Sidebar Widget Links

Use this option to set the link colors of the sidebar widgets. There are three options available:

Regular: This color is the normal state of the link
Hover: This color is for when the mouse is over the link
Active: This color is for when the mouse has clicked on the link


Footer

skin_footer

Footer Widget Title Use this option to set the color of the Footer Widget Titles.
Footer Widget Texts Use this option to set the color of the Footer Widget Body Text. This will affect all text in the footer widget (unless there is a color value for the specific option in theme styles).
Footer Widget Links This option is defined below the table.
Show Sub Footer Border Top? If you enable this option, a border will appear just above the sub-footer area on the frontend to visually divide it from the footer.
Sub-Footer Social Networks Color This option is defined below the table.
Sub-Footer Copyright Color Use this option to set the color of the copyright text on the left side of the sub footer area.
Show Widget Title Divider? Enable this option if you want to have a divider line between the title and the widget text.

Footer Widget Links

Use this option to set the link colors for the footer widgets. There are three options available:

Regular: This color is the normal state of the link
Hover: This color is for when the mouse is over the link
Active: This color is for when the mouse has clicked on the link

Sub-Footer Social Networks Color

Use this option to set the link colors for the Social Network icons in the footer. There are three options available:

Regular: This color is the normal state of the link
Hover: This color is for when the mouse is over the link
Active: This color is for when the mouse has clicked on the link


Main Navigation

skin_main_navigation

Main Navigation Top-Level This option is defined below the table.
Main Navigation Sub-Level Background Color Use this option to set the color of the main navigation sub-level background.
Main Navigation Sub-Level This option is defined below the table.
Show Main Navigation Border Top? Enable this option if you want to have a border shown on the front end at the top of the main navigation.

Main Navigation Top-Level

Use this option to set colors for the different states of the main navigation top-level menu items. Available options:

Regular: This is for the color of a menu item in the normal state.
Hover: This is for the color of a menu item when the mouse is over it.
Background Color: This is for the background color of a menu item in the normal state.
Hover: This is for the background color of a menu item when the mouse is over it.

Main Navigation Sub-Level

Use this option to set colors for the different states of the main navigation sub-level menu items. Available options:

Regular: This is for the color of a menu item in the normal state.
Hover: This is for the color of a menu item when the mouse is over it.
Background Color: This is for the background color of a menu item in the normal state.
Hover: This is for the background color of a menu item when the mouse is over it.


Header

skin_header

Show Toolbar Border Bottom? Enable this option if you want to have a border shown on the front-end at the bottom of the header toolbar area.
Header Toolbar Border Bottom Color Use this option to set the color of the border for the header toolbar area.
Header Toolbar Text Color Use this option to set the color of the text for the header toolbar area.
Header Toolbar Phone & Email Icon Color Use this option to set the color of the Header Toolbar Phone and Email Icon.
Header Toolbar Link Color This option is defined below this table.
Header Toolbar Social Network Link Color This option is defined below this table.
Header Search Icon Color Use this option to set the color of the search icon in the header.

Header Toolbar Link Color

Use this option to set the link colors for the header toolbar area. There are two options available:

Regular: This color is for the normal state of the link.
Hover: This color is for when the mouse is over the link.

Header Toolbar Social Network Link Color

Use this option to set the colors for the header toolbar area social network icons. There are two options available:

Regular: This color is for the normal state of the link.
Hover: This color is for when the mouse is over the link.


Pre Loader

skin_pre_loader

Preloader Text Color Use this option to set the text color of the preloader feature.
Preloader Background Color Use this option to set the background color of the preloader feature.
Preloader Bar Color When using the preloader feature, a bar appears on the screen indicating the loading state. Use this option to set the color of that bar.

Breadcrumbs

skin_breadcrumb

Breadcrumb Skin

Use this option to decide on the skin style of the breadcrumbs section. Available options are:

Light
Dark
Custom: Choosing this will give you an option to select your desired color

Breadcrumb Custom Skin Color

If you choose “Custom” for the Breadcrumb Skin, you’ll have the option to set a custom color for the skin of the breadcrumbs section. Available options are:

Regular: This color is the normal color of the breadcrumb.
Hover: This color is for when the mouse is over the breadcrumb.

Footer Settings

Theme Settings is the main section of The Ken where you can set the global settings for your website. In this article, we will describe the options available under the Footer section of Theme Settings.

To access the footer settings, from WordPress top bar, go to Theme Settings > Footer

footer settings


Footer Settings

1Footer

This option will enable the footer section on the front page following the content. You can also disable the footer section altogether using this option.

2Footer Type

Use this option to set the type of the footer section. Available options are:

  1. Regular
  2. Fixed
3Footer Width

Use this option to set the width style of the footer section. Available options are:

  1. Boxed
  2. Fullwidth
4Footer Widget Area Columns

This option decides how many columns the footer section will have. Depending on which layout you have chosen, you will have the Footer Widget areas available in the Appearance > Widgets section where you can assign your widgets.

Adding Content to the Footer

The Footer section of The Ken can accept content only through Widgets.

To add content to the footer area you’ll need to go to Main Dashboard Menu > Appearance > Widgets. There you will find six different footer widget areas where you can assign your desired widgets. The number of columns shown in the footer area is decided by the Theme Settings > Footer Widget Area Columns section. So if you’ve set only three footer columns, then the footer widget areas four, five and six will not appear on the front-end of the website.

Footer Padding

Using this option you can increase or decrease the top and bottom footer padding.

Sub Footer Settings

1Sub Footer

Enable this option to show a sub footer section, after main footer area.

2Sub Footer Copyright text

As explained previously, the sub footer section is designed to add in copyright text. Use this option to add your copyright text.

3Sub Footer Right Section Logo Image

Use this option to add a logo into the sub footer section to make it more colorful.

4Sub Footer Right Section Logo Link

You can add a link to the logo image from the previous section.

5Facebook

You can add a link to your Facebook page with this option. It will show a Facebook icon with the link to your page on the homepage of the website. Leave this option empty if you don’t want to have this link shown on the homepage.

6Twitter

You can add a link to your Twitter page with this option. It will show a Twitter icon with the link to your page on the homepage of the website. Leave this option empty if you don’t want to have this link shown on the homepage.

”7″RSS

You can add a link to your RSS page with this option. It will show an RSS icon with the link to your feeds page on the homepage of the website. Leave this option empty if you don’t want to have this link shown on the home page.

”8″Dribbble

You can add a link to your Dribbble page with this option. It will show a Dribbble icon with the link to your page on the homepage of the website. Leave this option empty if you don’t want to have this link shown on the homepage.

”9″Pinterest

You can add a link to your Pinterest page with this option. It will show a Pinterest icon with the link to your page on the homepage of the website. Leave this option empty if you don’t want to have this link shown on the homepage.

”10″Instagram

You can add a link to your Instagram page with this option. It will show a Instagram icon with the link to your page on the homepage of the website. Leave this option empty if you don’t want to have this link shown on the homepage.

”11″Google Plus

You can add a link to your Google Plus page with this option. It will show a Google Plus icon with the link to your page on the homepage of the website. Leave this option empty if you don’t want to have this link shown on the homepage.

”12″Linkedin

You can add a link to your Linkedin page with this option. It will show a Linkedin icon with the link to your page on the homepage of the website. Leave this option empty if you don’t want to have this link shown on the homepage.

”13″Youtube

You can add a link to your Youtube page in this option. It will show a Youtube icon with the link to your page on the homepage of the website. Leave this option empty if you don’t want to have this link shown on the homepage.

”14″Vimeo

You can add a link to your Vimeo page with this option. It will show a Vimeo icon with the link to your page on the homepage of the website. Leave this option empty if you don’t want to have this link shown on the homepage.

”15″Spotify

You can add a link to your Spotify page with this option. It will show a Spotify icon with the link to your page on the homepage of the website. Leave this option empty if you don’t want to have this link shown on the homepage.

”16″Tumblr

You can add a link to your Tumblr page with this option. It will show a Tumblr icon with the link to your page on the homepage of the website. Leave this option empty if you don’t want to have this link shown on the homepage.

”17Behance

You can add a link to your Behance page with this option. It will show a Behance icon with the link to your page on the homepage of the website. Leave this option empty if you don’t want to have this link shown on the homepage.

”18″WhatsApp

You can add a link to your WhatsApp page with this option. It will show a WhatsApp icon with the link to your page on the homepage of the website. Leave this option empty if you don’t want to have this link shown on the homepage.

”19″WeChat

You can add a link to your Wechat page with this option. It will show a Wechat icon with the link to your page on the homepage of the website. Leave this option empty if you don’t want to have this link shown on the homepage.

”20″Qzone

You can add a link to your Qzone page with this option. It will show a Qzone icon with the link to your page on the homepage of the website. Leave this option empty if you don’t want to have this link shown on the homepage.

”21″vk.com

You can add a link to your VK page with this option. It will show a vk.com VK icon with the link to your page on the homepage of the website. Leave this option empty if you don’t want to have this link shown on the homepage.

”22″IMDb

You can add a link to your IMDb page with this option. It will show a IMDb icon with the link to your page on the homepage of the website. Leave this option empty if you don’t want to have this link shown on the homepage.

”23″Renren

You can add a link to your Renren page with this option. It will show a Renren icon with the link to your page on the homepage of the website. Leave this option empty if you don’t want to have this link shown on the homepage.

”24″Weibo

You can add a link to your Weibo page with this option. It will show a Weibo icon with the link to your page on the homepage of the website. Leave this option empty if you don’t want to have this link shown on the homepage.

General Settings

Theme Settings is the main section of The Ken and where you can set the global settings for your website. You can access Theme Settings from the top left side of your dashboard. In this article, we will describe the options available under the General Settings section of Theme Settings.

To access the general settings, from WordPress top bar, go to Theme Settings > General Settings

general settings

Options Descriptions

Main Navigation Responsive Width Defines when the Main Navigation should be viewed as Responsive Navigation. The default is 1140 pixels but if your navigation items fit in the header in smaller widths you can change this value.
Main Grid Width Defines the main content max-width. The default value is 1140 pixels.
Content Width (In Percent) Lets you define the width of the content. Consider that it is in percent, so let’s say for example if you set it to 60%, the sidebar will occupy 40% of the main content space.

Breadcrumb

Breadcrumb is a type of secondary horizontal navigation that displays the user’s location on the website in a hierarchical way. It is especially important to use breadcrumb on big websites that contain a large amount of content in order to provide a better user experience.
To learn how to configure breadcrumbs, check out this article.

Options Descriptions

Smooth Scroll This option adds an easing movement to the page scroll and modifies the browser’s native scrollbar. If you don’t want the feature, just disable it with this option.
Page Comments Use this option to enable the commenting system for pages. This is an additional feature which Ken adds to the default WordPress commenting system, and which you can set from settings -> discussion for posts.
Custom Sidebars Use this option to add custom sidebars. This will add new Widget Areas in Appearance -> Widgets page. You can then easily assign Widgets to the Custom Sidebar you’ve added. Then inside each page or post, you will have an option to assign the custom sidebar you want to use.
Quick Contact You can enable or disable the Quick Contact Form using this option. It adds an icon to the bottom right side of the page which will open pop-up contact form on click.

Jupiter Fonts (Typography)

Theme Options is the main section of Jupiter, which you can use to change your global settings for your website. You can access Theme Options from top left side of your dashboard or from left side via Jupiter menu. We are going to describe about Jupiter Fonts options available under Typography section of Theme Options in this article.

It is possible to have 3 Font Types assigned for the whole website in Jupiter, they are Google Fonts, Web Safe fonts and Typekit fonts.


Setting a Font Family

1From WordPress left menu, go to Jupiter > Theme Options > Typography.

typography

2To add a new font family, click on + icon and select a font family. Then save the font clicking on the green icon.

3You can also change this font clicking on the pencil icon to choose another font family.

From the drop-down list select the font type you want to use: Google Fonts, Web Safe fonts or Typekit fonts.

4Select Google Font Character Set.

You can choose from these sets:

  • latin
  • latin-ext
  • cyrillic-ext
  • greek-ext
  • greek
  • vietnamese
  • cyrillic

You need to lookup your font in Google Fonts website to check the supported subset. Each font may support different subsets.

5Choose elements that you would like to affect with specific font family. Setting it to Body will affect all elements.

6Save the settings.

Setting a Custom Font

If you want to add a font that is missing in the Theme Options > Typography, you can do this manually using a plugin or via css code.

Setting a Custom Font with a Plugin

There is a plugin that will give you a possibility to add a custom font without css knowledge. It’s so easy, just install the plugin Use Any Font.

1In your WordPress dashboard, go to Plugins > Add new and search for Use Any Font plugin.

typography

2Click on Install button and after that Activate button.

typography

3In WordPress dashboard on the left side go to Settings and select Use Any Font

typography

4Choose a font you want, then upload it.
5Click on Assign font to add the new fonts to your elements.

You can now use the new fonts for your website.

Setting a Custom Font via CSS

This allows you to use any font you want on your website.

1Download your font in a web format. You can then convert your font in a web format using Font Squirrel Webfont Generator.
2Create a new “fonts” folder in the child theme’s directory of your hosting server, and upload the webfont files there. You can use the FTP client like FileZilla  or your cPanel to do this.
3Load the font in your Child Theme’s “fonts” folder.
4Add the css code in your Child Theme’s style.css file and replace the font family and URL with your own. Assign a new font to the element you need.

@font-face {
font-family: Great Vibes; 
src: url(fonts/GreatVibes-Regular.ttf); 
font-weight: normal; 
}

h1 {
font-family: "Great Vibes";
}

You can now use your custom font anywhere in your theme’s stylesheet.

If there are any questions or you have difficulties setting a font, you can contact our support via Help Desk.

General Colors Styling

Theme Options is the main section of Jupiter, where you can configure the global settings for your website. You can access Theme Options from the top left side of your dashboard. In this article we will describe the general colors styling options available under the Global Settings > Site Settings and Main Content sections of Theme Options.


Setting a Primary Theme Color

You can set the primary theme color for the whole website. This option is available in Theme Options > Global Settings > Site Settings > Theme Accent Color.

general colors styling

It only affects some of the elements. not all.


Setting the Background Color

You can set the background color for different sections of your website like the header, page title, page and footer.

To do this go to Theme Options > Main Content > Layout & Backgrounds.

Scroll down to the section Background Color & Texture, and click on each section to customize it.

general colors styling


Setting the Text Color

The text color of your website can be changed in Theme Options > Main Content > Texts.

general colors styling

You have these options to modify:

1Body
Setting Description

Text Color Sets the main text color of the website.
Content Links Color Sets the color of the links.
Content Links Hover Color Sets the color of the links on mouseover.
Content Strong Tag Color Sets the bold text color. This option will only work on bold texts that use the <strong> html tag.
2Paragraph
Setting Description

Paragraph Sets the paragraph text color.
3Headings
Setting Description

H1 Text Color Sets the h1 color.
H2 Text Color Sets the h2 color.
H3 Text Color Sets the h3 color.
H4 Text Color Sets the h4 color.
H5 Text Color Sets the h5 color.
H6 Text Color Sets the h6 color.

If you have any questions regarding styling, please open a support ticket in our helpdesk.

Speed Optimizations

The speed optimizations settings in the Theme Options let you improve website performance by optimizing and compressing CSS and JS files in the Jupiter theme.

In this article we will explain the options available in the speed optimizations settings and how to use them. You can access the options from Theme Options > Advanced > Speed Optimizations.

To access Theme Options:

1From WordPress left menu, go to Jupiter > Theme Options.

speed optimizations


Minify Theme JavaScript Files

The Minify theme JavaScript files option lets you minify the JavaScript files associated with the theme. If this options is enabled, it will load the minified versions of the JS files which will increases your website’s page load speed. Minifying your code removes:

  • White space characters
  • New line characters
  • Comments
  • Block delimiters

These characters only adds readability to the codes, and aren’t required for the code to execute properly.


Minify Theme Styles Files

The minify theme style files option lets you minify the CSS files associated with the theme.  When this option is enabled, it will load the minified version of the CSS files and increase your website speed.


Move Shortcode Styles to Footer

If this option is enabled, all shortcode styles will be combined/minified and moved to the footer of the page.


Query String from Static Files

When you enable this option, it will remove every query string from the JS and CSS files. For more information read here. Disabling this option may cause issues with some hosting provider’s internal caching tools.


Global Lazy Load

The Global Lazy Load option, when enabled, delays the loading of images when the images are outside of the viewport. The images will not be loaded until the user scrolls down to them which increases the website speed.

speed optimizations

When the Global Lazy Load option is turned on, the disable lazyload option will be available in the individual shortcodes settings.

speed optimizations

Global Styling Settings

Styling settings in the Jupiter theme let you customize text colors and layouts. The styling settings in 5.9.3 have been moved to the Theme Options > Main Content and renamed to Layout & backgrounds and Text.

In this article, we will explain how to configure the global text styling and layout settings in the Main Content Settings under Theme Options. Main content settings contains two sections: Layout & backgrounds and Text.

To access Theme Options, you have two ways:

  • From WordPress top menu > Theme Options
  • From WordPress left menu > Jupiter > Theme Options

Layout & Backgrounds

1From the WordPress left menu go to Jupiter > Theme Options > Main Content > Layout & Backgrounds.

styling settings

2Configure the settings as explained.
Options Descriptions

Boxed And Fullwidth Layout Lets you choose between a full or a boxed layout to set how your website’s layout will look like.
Main Grid Width Defines the main content max-width. Default value is 1140 pixels.
Content Width (In Percent) Lets you define the width of the content. Consider that it is in percent, let’s say if you set it 60%, sidebar will occupy 40% of the main content space.
Main Content Responsive State Define when responsive state of content will be triggered. Different elements in your website such as sidebars will stack on window sizes smaller than the one you choose here.
Main Navigation Threshold Width Define when Main Navigation should viewed as Responsive Navigation. Default is 1140 pixels.
Stick Template Removes padding after header and before footer for single pages.
Body Border  When enabled, a border goes around entire browser window, stuck to the edge regardless of screen size. All edges stay in place as page scrolls.
Expand Page Title Section To Header Enabling it will expand the page title section (background image, color) to header section.

Background and Texture

Background and texture options lets you modify header, page title, body and footer background section. To configure see this article.


Setting Gradient Background Color

Gradients backgrounds are typically one color that fades into another. CSS3 defines two types of gradients:

Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)

1In the background setting box select Gradient from the dropdown under Background color option.
2Configure the settings as required.

Options Descriptions

From Select an origin/start color.
To Sets a stop color or the color feds into the origin color.
Style Lets you choose between Linear and Radial gradient style.
Angle If linear is selected in style this option will let you define the angle. Available options are: Vertical, Horizontal, Diagonal top, Diagonal bottom.

[image-gradient][image-linear]


Text

In this group of settings you can configure global text colors and sizes. All global setting can be overridden in the individual elements in their respective settings.

Body

1Font Family

Let’s you configure the body font family. This option moved to new typography settings in Theme Options > Typography.

2Text Weight

Let’s you choose default body text weight. Available options are:

  • 100
  • 200 (light)
  • 300
  • 400 (normal)
  • 500 (medium)
  • 600 (semi-bold)
  • 700 (bold)
  • 800 (bolder)
  • 900
3Text Size

Allow you to define text size. You can manually enter a font size or use slider to adjust.

4Text color

Use this option to set the main text color of the website using color picker. Color hash code can also be inserted.

5Content Links color

Use this options to set anchor hyperlink colors.

6Content Strong Tag Color

Set your strong tag color using this option.

Paragraphs

This section will let you configure default paragraph stylings.

1Text Size

Allow you to define text size for paragraph elements. You can manually enter a font size or use slider to adjust.

2Line Height

This option lets you adjust default paragraph text line height.

3Text Color

You can set paragraph text font color using color picker. Color hash code can also be used.

Headings

This section configures the default heading fonts: H1, H2, H3, H4, H5, H6

1H1 Text Weight

Lets you set H1 text weight. Available options are:

  • 100
  • 200 (light)
  • 300
  • 400 (normal)
  • 500 (medium)
  • 600 (semi-bold)
  • 700 (bold)
  • 800 (bolder)
  • 900
2H1 Text Case

Use this options to set heading 1 text case. Available options are:

  • None
  • Uppercase
  • Capitalize
  • Lowercase
3H1 Text Size

Use this options to set Heading 1 text size.  You can manually enter a font size or use slider to adjust.

4H1 Text Color

Use this option to set the heading 1 color.

Options explained from 1 to 4 is common to rest of the header H2 – H6. Configure the as required.

Advanced Settings

Advanced settings section of Theme Options enables you to configure some advanced options such as Speed Optimizations, Custom CSS and JS, Post Types, etc.

advanced settings

In this article we’ll explain about each option and their use in the Advanced settings.


Speed Optimizations

There are four sub options in the Speed Optimizations settings.

1From WordPress left menu go to Jupiter > Theme Options > Advanced > Speed Optimizations.
2Enable or disable the options as required.
3Click on the Save Settings button.

Post Types

You can enable or disable post types such as FAQ, Portfolio, Employee, Client, Pricing, etc. Not all of the post types are enabled by default, if you don’t see one in the WordPress left menu, enable it from here.

Disabling a post type won’t delete the posts associated with it from the database, it just stops showing them. You can enable it any time to show them again.

1From WordPress left menu go to Jupiter > Theme Options > Advanced > Post types. 
2Enable or disable the options as required.
3Click on the Save Settings button.

Custom CSS

Custom CSS option lets you add your custom CSS codes to modify/add custom theme stylings. Use Shift + Space to use code-completion. Press Esc or double-click on the editor, or click anywhere outside the editor to exit code-completion. You can read more about applying custom CSS here.

1From WordPress left menu go to Jupiter > Theme Options > Advanced > Custom CSS. 

advanced settings

2Click on the Save Settings button.

Custom JS

Custom JS option lets you insert custom JS to modify/add Theme JS functionalities. Use Shift + Space to use code-completion. Press Esc or double-click on the editor, or click anywhere outside the editor to exit code-completion. You can read more about applying custom JS here.

1From WordPress left menu go to Jupiter > Theme Options > Advanced > Custom JS. 
2Click on the Save Settings button.

Export Theme Options

This option lets you export your Theme Options settings if you have decided to move your WordPress installation to other hosting, it will help you do this migration painlessly.

1From WordPress left menu go to Jupiter > Theme Options > Advanced > Export Theme Options.
2Click on the text-area once, the whole content will be selected.
3Copy and paste it to a text file, to be used when importing.

Import Theme Options

This option let you import all your Theme Options settings from existing Jupiter website to a new website.  You should have the options exported before and saved in a safe place/text file beforehand. After this you will have all your previous Theme Options settings restored again.

1From WordPress left menu go to Jupiter > Theme Options > Advanced > Import Theme Options.
2 Simply paste the previously saved code to the import options field.
3Click on the Save Settings button.

Shop Settings

Theme Options is the main section of Jupiter, where you can change your global settings for your website. You can access Theme Options from Jupiter > Theme Options.

In this article we’ll describe the options available under the Shop section of Theme Options. Woocommerce is one of the popular shopping cart plugins and Jupiter has options to fine tune pages related to it.


Shop Archive Settings

There is a section where you can style shop archive pages, to do this go to Theme Options > Shop > General. The settings you can find there are:

1Shop Loop Columns

This setting allows you to select number of products column for shop page. Available options are:

  • Default (4 columns full layout, 3 columns with sidebar)
  • 1 column
  • 2 columns
  • 3 columns
  • 4 columns
2Shop Catalog Mode

Use this option to disable the add to cart functionality of WooCommerce and use this plugin just as a catalog to only display your products.

3Product Category Loop Image Size

You can decide whether you want to have the theme crop and resize your thumbnail product images in the products listing page or if you want the original image size shown in the website. Available options are:

  • Resize and Crop (Not Recommended)
  • Default – Original Size
  • Default – Large Size
  • Default – Medium Size
  • Custom Options listed depending the selection described (Recommended)

Use this option to set the image size for the thumbnails of the products. We suggest that you go to Jupiter > Control Panel > Image Sizes and add your custom width/height size for the shortcode. Then come back to this option and you will see the same option you just created here which you can select. In Jupiter V5 the WooCommerce single product image size is being managed from the location shown below. If you see quality loss in the image, simply go to the WooCommerce settings and change the size to 550×550 pixels. The Suggested Minimum required size is 500 pixels and if you want to avoid cropping the image, leave the height option blank and uncheck the crop checkbox from Woocommerce > Settings > Products > Display.

4Product Category Archive Loop Title

Use this option to change the product category archive page title. This title will be the same for all categories. You do not have options in Jupiter to have the specific category name added into the page title area.

5Use Product Name as Page Title

Use this option if you want to display product name as page title in single product page.

6Use Product Category/Tag Name as Page Title

Enable the option if you want to display product category/tag name as page title on product category/tag page.

7Use Product Category/Tag Name as Product Filter Title

Use this option to display product category/tag as filter label for products on product category/tag page.

8Show Shopping Cart

Use this option to enable or disable the shopping cart icon in the header section of the theme.

9Shopping Cart on Mobile Phone

Use this option to enable or disable the floating shopping cart link for small devices. The visibility is determined based on main navigation threshold width value.

Product Loop

1Product Loop Image Size

The settings are the same as for the option Product Category Loop Image Size described above. You can refer to it to read description of Product Loop Image Size option.

2Product Loop Image Height

Use this option to set the height of thumbnail product images in product listing pages. Default value is 330 pixels.

3Excerpt For Product Loop

Enable this option if you would like to show the small description for products loop.


E-Commerce Single Product Page Settings

1Woocommerce Single Product Layout

Use this option to choose the layout of single product pages. Available options are:

  • Full Layout
  • Left Sidebar
  • Right Sidebar
2Previous & Next Arrows

If you want to show product posts navigation in single product pages, you need enable this option. It guides a visitor to go through previous and next products.

3Show Previous & Next for Same Categories

Use this option to limit the product posts navigation to same categories of current product.

4Single Product Page Title

Use this option to enable or disable the page title area of single product pages. Page title area includes page title and breadcrumbs.

5Social Share

Use this option to enable or disable the social media functionality for single product pages of WooCommerce.

If you have any sort of problem or questions regarding Woocommerce integration with Jupiter, open up a support ticket in our support desk.

Blog/News Settings

Blog settings is the main section which allows you to choose global settings for your Jupiter posts in WordPress. You can access Blog Settings from Jupiter > Theme Options > Blog.

In this article we will describe the options available under the Blog section of Theme Options.


Blog Single Post Settings

1Single Layout

You can globally manage blog single layout using this option.

There are several options you can choose from to style the layout of your single post page:

Name Description

Right Layout Sets sidebar on the right side.
Left Layout Sets sidebar on the left side.
Full Layout Sets the full layout without sidebar.
2Post Style

Use this blog theme option to set the style of a single blog post page. Available options are:

  1. Traditional and Compact
  2. Clear and Bold

The Traditional and Compact option is the standard style of a single blog post in Jupiter. The Clear and Bold style has a big hero section at the top of the page including the blog title and the featured images as the background of the hero section.For more information about Clear and Bold style read this article.

3Featured Image

Use this option to enable or disable the featured image for the single blog post page. The video player for video post type and audio player for audio post type will be enabled or disabled using this option.

blog settings

4Featured Image Height

Use this option to set the featured image height.

5Image Cropping

Use this option to enable or disable the automatic image cropping for the single blog post page.

6Post Title

Use this option to enable or disable the single blog post title. This option will work for both styles of the single blog post.

7Previous & Next Arrows

Use this option to enable or disable navigation arrows in the single blog post page. The navigation arrows gives the visitor an option to go to the next or previous blog post directly from the single blog post page.

8Show Previous & Next for Same Categories?

This option limits the blog posts navigation to same categories of current post.

9Recommended Posts

Use this option to show or hide the recommended posts section in the single blog post page. The Recommended Posts section is a list of blog thumbnails with the link to their respective single blog pages. The blog thumbnails are selected automatically from the same category that the current blog post is in.

blog settings

10Comments on Blog Posts

Use this option toenable or disable the comments section for the single blog posts. This option is for the single blog posts only. If you are interested in having a comments section for WordPress pages, you need to go to Theme Options > Global Settings and enable the Comments on Pages options. For more information about that option click here.

11About Author Box

Use this option to enable or disable the author box section in the single blog post page. The author box is positioned at the bottom of the single blog post page and shows information about the author of that particular post. To change the author information you need to go to WordPress Admin Menu > Users > Your Profile and add your name and information there. If you add your Website URL, Email Address and Twitter Account, they will be shown as linked icons in the author box.

blog settings

12Social Share

Use this option to enable or disable the social share section for both the Single Blog Post and the Archive pages.


Blog Meta Settings

1Display Meta Options

Use this option to show or hide the extra information about the single blog post, such as author, date created, etc.

2Meta Tags

Use this option to show or hide meta tags that you added in the single blog post edit screen in the WordPress admin. The meta tag addition box is at the right section of the single blog post edit screen in the admin section.


Blog Archive Settings

1Archive Layout

Defines an archive loop layout. Available options are:

  1. Left Sidebar
  2. Right Sidebar
  3. Full Layout
2Blog Archive Style

Jupiter has different styles to show the blog list which is more configurable in the Blog shortcode. Use these blog theme options to set the style for the archive page blog thumbnails list. Available options are:

  1. Modern
  2. Classic
  3. Newspaper
  4. Spotlight
  5. Thumbnail
  6. Magazine
  7. Grid
3Page Title

Use this option to set the page title section text of the auto generated archive page.

4Page SubTitle

Use this option to enable or disable the subtitle for the page title section of the auto generated archive page.

5Featured Image Height

Use this option to set the height of the thumbnail images in the blog archive page.

6Blog Meta

Use this option to show or hide extra information for each blog item in the auto generated blog archive page including categories, date created, etc.

7Pagination Style

Use this blog theme option to set the pagination style of the blog archive page. Available options are:

  1. Pagination Nav
  2. Load More Button
  3. Load on Page Scroll

Blog Archive Full Sized Images

To show the full image sizes in the blog archive:

1Install and enable the child theme.
2Copy jupiter/views/templates/wp-archive.php to the same hierarchy in the child theme.
3Add the code below before the grid_image_height line:

image_size="full"


News Settings

In the Blog Theme Options there is also the News section where you can style the news archive page. Here are its settings:

1Featured Image

Use this option to enable or disable the featured image for news single page.

2Featured Image Height

Use this option to set the height of the thumbnail images in the news single page.

3Slug

News slug is the text that is displayed in the URL (e.g. www.domain.com/news-posts/morbi-et-diam-massa/). As shown in the example, it is set to ‘news-posts’ by default but you can change it to anything to suite your preference. However you should not have the same slug in any page or other post slug and if so, the pagination will return 404 error naturally due to the internal conflicts.

If you have any questions regarding the Blog set up, you can create a ticket and our support staff will help.

Global settings in Theme Options

Theme Options controls almost all the settings in Jupiter theme. To access Theme Options, you have two ways:

  • From WordPress top menu > Theme Options
  • From WordPress left menu > Jupiter > Theme Options

In this article, we’ll explain Global Settings of Theme Options. In this group of settings, you can configure:

  • Site Settings
  • Logo & Title
  • Preloader
  • Quick Contact
  • API Integrations


Site Settings

1Theme Accent Color

This setting allows to select the primary theme color. It affects some of the elements, not all.

2Smooth Scroll

Enable an easing scrolling effect for default browser scrolling? It affects the default mouse scrolling in whole website.

3Comments on Pages

This option enables comments section on all website pages.

4Go to Top

This option enables “Go to Top” button on the site.

5Retina Images

This options enables automatic generation of high quality images. The images are used for retina devices.

6Responsive Images

Enable this option for automatic generation of responsive and adaptive images. It generates different image sizes for various devices automatically.

7Image Resize Quality

This option defines the quality for built-in image cropping. The default value is 100%.


Logo & Title

1Logo Margin

Set the number of pixels to adjust bottom spacing of logo. This option works only in full screen navigation.

2Default & Dark Logo

Here you can upload a default logo. It will be also used for for transparent header and dark header skin (these options can be set for each page individually in Jupiter Styling Options section in the single page editor).

3Light Logo

Here you can upload a light logo. It will be also used for transparent header and light header skin.

4Sticky Header Logo

This option allows to upload a logo for sticky header.

5Mobile Logo

This options allows to upload a logo for small devices. It is helpful when the default logo is big.

6Sub Footer Logo

Here you can upload a logo for sub footer section. The image should not exceed 150×60 pixels.

7Custom Favicon

Use this option to upload a custom favicon of your website. You may use Generate Favicon website.

Touch Device Icons

Setting Description

Apple IPhone Icon Uploads an icon for Apple iPhone (57×57 pixels).
Apple IPhone Retina Icon Uploads an icon for Apple iPhone Retina Version (114×114 pixels).
Apple IPad Icon Upload Uploads an icon for Apple iPhone (72×72 pixels).
Apple IPad Retina Icon Upload Uploads an icon for Apple iPad Retina Version (144×144 pixels).

Preloader

Enable this option to show preloader functionality globally throughout the website. This option can be overridden from each page options.

More information about Preloader settings can be found in the article General Site Preloader Theme Options in Jupiter.


Quick Contact

Quick contact form is a tiny icon at the right bottom of the front end in the theme which will bring a pop up quick contact form on click.

The more detailed description of this option is written in the article Quick Contact Form (Theme Options > Global Settings > Quick Contact).


API Integrations

This section is used to fill in API key to make some widget or Visual Composer element work, for example, Twitter widget or Google Map, or MailChimp Subscribe Form, etc. All these elements require API keys for proper work.

Twitter Settings

To fill in the fields, you need follow these steps:

1At first you must apply for a Twitter developer account and be approved before you may create new apps. Once approved, you will be able to create new apps from developer.twitter.com.
2Log in to the developer portal on this site (must have applied or have been approved) or apps.twitter.com using your Twitter credentials.
3Open the Twitter app for which you would like to generate access tokens.
4Navigate to the “Keys and Tokens” page.
6Select ‘Create‘ under the “Access token & access token secret” section.
6Fill in the required fields with the received data.
  • Consumer Key
  • Access Token
  • Access Token Secret

MailChimp Settings

Setting Description

Mailchimp List ID Add your MailChimp List ID here. For more information, please read Find Your List ID article.
Mailchimp Opt-In Email Enable the option of you think that subscribers must receive a Please Confirm Subscription email.

Other Integrations

Setting Description

Google Maps API Key Enter the key which you can generate as described at this link.
Google Analytics ID Enter your Google Analytics ID here to track your site with Google Analytics. Jupiter does not support Event Tracking. To use this feature, a 3rd-party plugin is required.
Typekit Kit ID Enter a Typekit Kit ID for using Typkit fonts.
MailChimp API Key Enter a MailChimp API Key.

 

If you have any questions or difficulties setting up Theme Options, please create a ticket to our support staff.