Smart Documentation / Theme Options / Design & Styles

Design & Styles

The Design & Styles section contains the options relative to setting up the main design & styles options for your website.

General↑ Back to Top

  • Content Skin: You can pick between a light or dark skin. The skin defaults to light, which means light background with dark typography.
  • Layout Type: You can pick between having a full-width layout (default) or a boxed layout.
  • Sidebar Position: Pick the default sidebar position. This can be overridden in a post/page basis later on.

Colors↑ Back to Top

The color section is pretty neat and it can save you a lot of time when updating your website design. Smart works with a color palette, this means that by default an array of different colors is defined. You can edit, remove, or even add new colors. That way you’ll be able to centralize the space in which you manage colors and later on you will pick them anywhere else when creating page layouts or different sections.

  • Colors by default: Accent, Secondary, Black, Dark 1, Dark 2, Dark 3, White, Light 1, Light 2, Light 3, Red, Orange, Yellow, Green, Blue, Indigo, Purple, Cyan, Magenta, Pink, Brown.

Editing Colors

In the “Color Palette” section of your Theme Options panel, you will need to click on the “pen” icon on the right part of the item you want to edit. A new panel will be toggled with a color picker so you can intuitively pick the color and also the opacity (transparency).

Adding a New Color

Go to the bottom of this section and click the “Add New” Button. You will find a panel like the one you find when editing any color. The fields will be the same. Just fill them in and you will have a new color to use in the rest of your site options.

Adding and removing colors.

Ordering Colors

Ordering colors

You can drag and drop the different colors in order to arrange their order.

 

 

Blog & Posts↑ Back to Top

You can set different options in order to change the blog behaviour by default.

  • Masonry Posts Load Method: When using the blog masonry template, you can choose if you would like to load the posts by clicking a button or by just scrolling. If set to scroll you can pick an icon.
  • Post Author Box:  Choose if you want to display the Author Box on each post.
  • Post Navigation Skin: Choose if you want this to be light or dark.
  • Post Navigation Background Color: Select a color from the palette.

Buttons↑ Back to Top

Pick how you would like your website buttons to look. This will apply for the comments form and other website built-in forms.

  • Button Shape: Pick the default button shape.
  • Button Color: Choose the default button color.

Images↑ Back to Top

You can insert your own placeholder in case an image is not found.

  • “Image Not Available” placeholder: Upload or select and image from the Medialibrary.

Page Loader↑ Back to Top

You can select if you would like to have a page loader/transitioner.

  • Page Loader: Select between:
    •  Top Bar: (which will load from left to right on top of the screen, if selected you can pick the bar color) or a full page overlay.
    • Full Page Overlay: If selected you can pick the background color, the loader icon and its color.

Custom Code & Scripts↑ Back to Top

You can insert custom CSS, Javascript or Analytics code.

  • Custom CSS: Insert your custom CSS.
  • Custom JavaScript: Insert your own scripts if needed.
  • Tracking Code: You can insert the Google Analytics Tracking Code here.

Google Maps↑ Back to Top

The Google Maps related codes must be defined here.

  • Google Maps API Key: For the Page Builder Maps element to work, you will need to insert a Google Maps API key, which you can get here. This option will only appear if the Page Builder is enabled and active.
  • Google Maps Embed Code: The Google Maps Embed code is a field in which you can insert the Maps Embed Code you would like to display when using the “Contact Template”. Learn how to use page templates here.
Theme Options

Related Articles