Styling

This section contains settings for changing color/background… of elements/sections

Overall

  • General Accent Color – Main Accent color for your site, with predefined color palette with hand-picked colors.
  • Custom Accent Color – Overwrite General Accent Color by Custom Accent color
  • Duotone Gradient Effect – Create Duotone Gradient Effect for elements instead of using solid color/background, second color will be generated automatically base on your accent color.
  • Gradient Intensity – The intensity of gradient effect.

Example for duotone effect:


  • Generate accent color css for categories – Allow the theme to generate color, background color css rules for categories, make sure WP Term Colors is installed and activated
  • Generate Background for category header – Allow the theme to generate background image for category header.

By default, WordPress doesn’t have any field to upload image or adding color to category, so we will rely on plugin WP Term Images and WP Term Colors. After installed & activated, you can add image or pick accent color for category in category editing page.

Accent colors used for Category tags

When you allowed the theme to generate background for category header, and enable Category Header in Template Settings -> Category Pages -> Category Header, image attached to category will be used as category header background.


  • Site background image – Only visible for Boxed Site Layout, or on Wide layout with no-bg Header Style.
  • Site background color
  • Duotone Gradient bg? – Generate Duotone Gradient Effect for Background, second color will be generated automatically base on your site background color.
  • Site background repeat – How a background image will be repeated.
  • Site background Position – Position of the bakground image.
  • Site background Attachment – Set a background image scrolls with the rest of the page, or is fixed.
  • Site background Size – Size of the background image.
  • With overlay – a transparent Black tinted layer overlays on background image.
  • Allow overriding – Allow the theme overidding site background image for specific cases. For example: Post thumbnail will be site background image when you are on single post. Default background image is required.
  • With blur effect – Add blur effect to background image. This option only applies to single post and requires “Allow overriding” (right above) checked.

Boxed site layout with color gradient background:

Boxed site layout with custom background image:

Default Background image has been overwritten by post thumbnail when you checked Allow overriding, with blur effect.

Header

Change background/color for elements on the Header of the site.

  • Menu indicator color

Banner

Style settings for Banner, applying to specific header layouts those have banner like v4, v5, v6, v7, v8, v9, v12, v14, v15, v21, v25, special, newspaper, shawty.

  • Background image
  • Background color
  • Background repeat – How a background image will be repeated.
  • Background position – Position of the bakground image.
  • Background attachment – Set a background image scrolls with the rest of the page, or is fixed.
  • Background size – Size of the background image.
  • Background Blend mode – Blending mode for background image and color. Reference.

Here’s an example of using banner background, header layout shawty

Hero

  • Hero Background – Change Background for Hero Banner.
  • Duotone Gradient Effect – Add Gradient color effect for Hero Banner or Bricks.

Footer

Change Background color/image for footer, the following options will apply to the whole footer area including Footer Widgets and Footer Copyright.

Footer Color

  • Footer Link Color
  • Footer Link Hover Color
  • Footer Menu Link Color
  • Footer Menu Link Hover Color

Footer Background

  • Background image
  • Background color
  • Background repeat – How a background image will be repeated.
  • Background position – Position of the bakground image.
  • Background attachment – Set a background image scrolls with the rest of the page, or is fixed.
  • Background size – Size of the background image.
  • Background Blend mode – Blending mode for background image and color. Reference.

Misc.

  • Off Canvas Nav Style – Change the background for off canvas nav.
    • White color
    • Primary color
    • Secondary color
    • Light Gray
    • Gray
Off canvas nav style
  • Thumbnail Border Radius – Add rounded corners to thumbnails.
  • Brick Border Radius – Add rounded corners to post bricks.
  • Form Fields and Buttons – Changing shape for form fields and buttons.
  • Post Block Columns Divider – Add columns border for Post Blocks
  • Flexslider Nav style – Change Navigation style for Flexslider, This will be applying to all sliders on the site which powered by flexslider, including plugins WP Flexslider, WP Post Blocks (slider and carousel slider), Theme Gallery popup slider…

Additional CSS

Extra custom css code to customize appearance of the site.