Support: 1-469-617-5446
Reset Search
 

 

Article

Theme Options

« Go Back

Information

 
Content

Location: Websites – (Web site name) – Edit – Appearance – Theme Options

Required Setup: In order to view this page, you must be assigned the role of General Manager, Marketing Manager, or a custom role that includes the Solution permission.

Scope: This feature is available for Kigo Plan 2 and above.

About the Theme Options Page

The Theme options page lets you change the style and color of your theme template, as well as add your own cascading style sheet (CSS). You can make changes to the template and CSS code such as:

  • Theme color: Change web site elements such as buttons, footer, and so on.
  • Font type: Change the type of font.
  • Font size: Change the size of the font.
  • Font color: Change the color of the font.
  • Font style: Change the style of the font.
  • Logo size and positioning: Change the size of the logo and its position on the web page.
  • Layout: Adjust the position of text. For example, make changes to content overlapping due to long text.

For example, you change the theme color to change web site elements such as buttons or the footer. You might also adjust the position of text if the web site's content overlaps due to long text. For changes or requests for the theme/template that are not listed above, contact the Kigo Professional Services team.

The Themes option page is divided into three three tabs, the General tab, the Styling tab, and the Custom CSS tab.

Note: The Theme options page is unavailable if you are using the Kigo discovery theme. Use the Customizer and KD options instead.

Styling Tab

The Styling tab lets you choose between different styles for the same theme.

Styling Tab on Theme Options Page

General Tab

The General tab lets you change the colors for the background, text, and links. You may also change the font size, the logo size, and add a favicon to your web site browser.

Theme Options Page - General Tab

Custom CSS Tab

The Custom CSS tab lets you add any CSS customization that you want to apply to your web site. For example, you can remove items from the Kigo header widget using CSS, and if you want to change the text for the front end you must add JQuery customized.

CSS changes have the potential to affect the whole web site in a way that may be harmful to the site. Kigo is not responsible for any CSS modification implemented.

Custom CSS Tab on Theme Options Page

Field Definitions

Styling Tab

  • Currently active: This is the style that the web site is currently using.
  • Select style: This is a currently inactive style. Selecting this option changes it the the currently active style.
  • Preview: This opens an example of your web site with the indicated style applied.

General Tab

  • Title font style: This is the font style of your web site's headings. You may choose the default, or select a Standard font or a Google font. An example of a Standard font is Sans Serif and an example of a Google font is Acme.
  • Paragraph font style: This is the font style of your web site's text. You may choose the default, or select a Standard font or a Google font. An example of a Standard font is Sans Serif and an example of a Google font is Acme.
  • Menu style: This is the style of the menu background, text, and hover color. You may choose from default, white, gray, or custom.
    • Menu background color: This is the custom color for the web site's menu background. Click the Select color button to change the color.
    • Menu text color: This is the custom color for the web site's menu text. Click the Select color button to change the color.
    • Menu hover color: This is the custom color for a menu when a cursor hovers over it. Click the Select color button to change the color.
    • Menu hover text color: This is the custom color for the text in menus when a cursor hovers over the menu. Click the Select color button to change the color.
  • Footer style: This is the style of the footer background, text, link, and hover color. You may choose from default, white, gray, or custom.
    • Footer background color: This is the custom color for the web site's footer background. Click the Select color button to change the color.
    • Footer text color: This is the custom color for the web site's footer text. Click the Select color button to change the color.
    • Footer link text color: This is the custom color for a footer link. Click the Select color button to change the color.
    • Footer link hover text color: This is the custom color for the footer links when a cursor hovers over the footer. Click the Select color button to change the color.
  • Featured properties style: This is the style for the text and background color of the web site's featured properties. You may choose from default or custom.
    • Background color: This is the background color for a web site's featured properties. Click the Select color button to change the color.
    • Text color: This is the text color for a web site's featured properties. Click the Select color button to change the color.
  • Titles main: This is the color for Heading 1 (H1), widget, and main page titles in your web site. You may choose from default or custom.
    • Color: This is the custom color of the main titles in your web site. Click the Select color button to change the color.
  • Titles secondary: This is the color for Heading 2 titles (H2) in your web site. You may choose from default or custom.
    • Color: This is the custom color of the secondary titles in your web site. Click the Select color button to change the color.
  • Paragraphs color: This is the color of the paragraphs in your web site. You may choose from default or custom.
    • Color: This is the custom color of the paragraphs in your web site. Click the Select color button to change the color.
  • Logo size: This is the size of the web site's logo. You may choose from small, medium, large, or custom. Custom lets you enter the logo's size in pixels. The maximum size for the logo is 200 x 200 pixels.
  • Favicon: This is the icon that appears next to the web site's URL. Favicons must be 16 x 16 pixels.

Custom CSS

  • Custom CSS: This lets you turn the custom cascading style sheet (CSS) on or off.
  • Enter your custom CSS styles: This lets you customize the CSS. You may enter your own code here. The changes in the section only apply if Custom CSS is turned on.
  • CSS tips: This opens a list of tips that you may refer to when entering custom CSS styles.

Selecting Theme Styles

  1. Click the Styling tab.
  2. Click the Select style option for the style you want.
  3. Click the Save options button.

Selecting Heading Font Styles

  1. Click the General tab.
  2. Click the drop-down arrow in the Title font style field and select a font for your web site's headings.
  3. Click the Save options button.

Selecting Text Font Styles

  1. Click the General tab.
  2. Click the drop-down arrow in the Paragraph font style field and select a font for your web site's text.
  3. Click the Save options button.

Selecting Menu Colors

  1. Click the General tab.
  2. Select an option from the Menu style field.
  3. If you select custom, a list of custom options appears. Click the Select color field, then select a color or enter the HTML color number into the Current color field.
  4. Click the Save options button.

Selecting Footer Styles

  1. Click the General tab.
  2. Select an option from the Footer style field.
  3. If you select custom, a list of custom options appears. Click the Select color field, then select a color or enter the HTML color number into the Current color field.
  4. Click the Save options button.

Selecting Featured Properties Styles

  1. Click the General tab.
  2. Select an option from the Featured properties style field.
  3. If you select custom, a list of custom options appears. Click the Select color field, then select a color or enter the HTML color number into the Current color field.
  4. Click the Save options button.

Selecting Heading Color

  1. Click the General tab.
  2. Select an option from the Titles main field.
  3. If you select custom, a list of custom options appears. Click the Select color field, then select a color or enter the HTML color number into the Current color field.
  4. Select an option from the Titles secondary field.
  5. If you select custom, a list of custom options appears. Click the Select color field, then select a color or enter the HTML color number into the Current color field.
  6. Click the Save options button.

Selecting Text Color

  1. Click the General tab.
  2. Select an option from the Paragraphs color field.
  3. If you select custom, a list of custom options appears. Click the Select color field, then select a color or enter the HTML color number into the Current color field.
  4. Click the Save options button.

Selecting the Logo Size

  1. Click the General tab.
  2. Select an option from the Logo size field.
  3. Click the Save options button.

Selecting the Favorites Icon (Favicon)

  1. Click the General tab.
  2. Click the Select favicon button.The Insert media page appears.
  3. Click an image. The image must be a 16 x 16 square.
  4. Click the Insert into post button. You return to the Theme options page.
  5. Click the Save options button.

Customizing CSS

  1. Click the Custom CSS tab.
  2. Select the On option in the Custom CSS field.
  3. Enter your CSS in the Enter your custom CSS styles field.
  4. Click the Save options button.

Additional Information/Related Topics

WordPress Tools
Themes

Customize Theme
Customizer
Widgets
Menus
Theme Options
Options

 

Attachment 

Feedback

 

Was this article helpful?


   

Feedback

Please tell us how we can make this article more useful.

Characters Remaining: 255