How to Override Theme Settings in The Ken

Updated on December 1, 2017

To override theme settings in The Ken you will need to enable the option from The Ken Styling Options on each page. The Ken supports individual pages, which have different settings from the global options set in theme settings section

How to Override Theme Settings

Override Theme Settings Disabled

The following is the process of overriding theme settings and detailed information about each option functionality:

The Ken provides options to override settings in the Theme Settings section on each page. To do so you will need to add a page and scroll down to The Ken Styling Options section and enable the Custom Settings option.

Override Theme Settings Enabled

1Upload Logo (Dark & Default).  

Use this option to upload or select from media library the default logo for the page.

2Upload Retina Logo (Dark & Default).  

Use this option if you want your logo in the page to appear crystal clear in Retina devices (such as Macbook Retina, iPad, iPhone). Please note that the image you are uploading should be exactly 2x the size of the original logo you have uploaded in the previous option.

3Upload Logo (Light Skin).  

This option will only be used if you have a transparent header on a page on which you have chosen light skin for header elements. This will make sure your logo does not have the same color as the background of the website. It is up to you to design a logo with other colors to be able to use this option.

4Upload Retina Logo (Light Skin).  

This option is for a transparent header-style logo when appearing on a light background. Please note that the image you are uploading should be exactly 2x size of the original logo you have uploaded in the previous option.

5Upload Logo (Mobile Version).  

This option comes in handy when your logo is too long for a mobile device and you would like to upload a shorter and smaller logo just to fit the header area.

6Upload Retina Logo (Mobile Version).  

Please note that the image you are uploading should be exactly 2x size of the original logo you have uploaded in the previous option (Upload Mobile Logo).

Override Theme Settings Logos

For more information about logo related options in Theme Settings read this article.

7Choose Layout.  

Use this option to set the layout of the page. Available options are:

  1. Full Width
  2. Boxed

Override Theme Settings Layout

8Boxed Layout Shadow.  

Use this option to Enable/Disable shadow for the box of the page if you set the layout of the page to Boxed.

9Background Color & Texture.  

Override Theme Settings Backgrounds

Use the options below to set background properties for Header, Page Title, Page Body or Footer area.

Background color

Use this option to set the background color of the page.

Background Image

Use this option to upload an image or use the WordPress default Media functionality to select the desired image for the page background. Available options are:

  1. No Image
  2. Upload Image

Background Repeat

Use this option to set how you want the background image to repeat. Available options are:

  1. No Repeat
  2. Repeat
  3. Repeat Vertically
  4. Repeat Horizontally

Background Attachment

Use this option to set how you want the background image attached to the page. Available options are:

  1. Scroll
  2. Fixed

Background Position

Use this option to set the position of the background image. Available options are:

  1. Top Right
  2. Top Center
  3. Top Left
  4. Center Right
  5. Center Center
  6. Center Left
  7. Bottom Right
  8. Bottom Center
  9. Bottom Left

Background Fit and Stretch

Use this option to force the background image to take up the whole container. Browsers may cut off portions of the image to fit in different window sizes.

Override Theme Settings Backgrounds

For more information about background options in theme settings read this article.

10Page Title Effect.  

Use this option to set an animation for your page title area on scroll. Available options are:

  1. No Animation
  2. Parallax
  3. Parallax Zoom Out
  4. Gradient

Parallax is a decorative effect which makes the part of the website scroll slower or faster than the native scroll speed of the browser window. This makes a beautiful effect if the graphic is chosen wisely in the section which Parallax effect is used. To see a demo of this effect click here.

Parallax Zoom Out combines the Parallax and Zoom Out effect and makes a state of the art effect to the section you apply this to. To see a live demo click here.

Gradient effect hides the bottom of the affected section with a smooth gradient shadow effect. Scroll down on this page to see a demo of the effect.

11Page Title Section Padding.  

Use this option to apply a padding spacing at the top and bottom of the Page Title area. The default value for this option is 40 pixels.

Override Theme Settings Page Title

12Page Title Section Full Height.  

Use this option to Enable/Disable the Full Height functionality for Page Title area. If enabled the height of the page title area will dynamically change to cover the whole browser window height.

13Page Title Align.  

Use this option to set the alignment of the Page Title area title text. Available options are:

  1. Title on Left
  2. Title on Center
  3. Title on Right
14Page Title Text Size.  

Use this option to set the Page Title area Text Size. The default value for this option is 18 pixels.

15Page Title Letter Spacing.  

Use this option to set the spacing between each letter of the title in the Page Title area. The default value for this option is 0 pixels.

Override Theme Settings

16Page Title Font Weight.  

Use this option to set the font weight of the text in the Page Title area. Available options are:

  1. Semi Bold
  2. Bold
  3. Bolder
  4. Normal
  5. Light
17Page Title Color.  

Use this option to change the Text Color of the Page Title area.

18Breadcrumb Skin.  

Use this option to set the skin of the Breadcrumb section of the page. Dark skin is for light color backgrounds and light for dark backgrounds. Available options are:

  1. Dark
  2. Light
  3. Custom
19Breadcrumb Custom Color.  

This option will be available if you set the Breadcrumb Skin option to Custom. Use this option to set the breadcrumb section link and text color.

20Breadcrumb Custom Hover Color.  

This option will be available if you set the Breadcrumb Skin option to Custom. Use this option to set the breadcrumb section link color on mouseover.


Artbees Care

artbees care- Override Theme Settings

Custom CSS coding can sometimes get a bit tricky—that’s where we come in! Check out our Artbees Care offers here and let our team do the customization for you.

Did this answer your question?