1. On your WordPress Dashboard, go to Smart → Theme Options.
2. Browse the different sections and sub-sections, and change all the values you want.
3. When you’re done with the changes, click the Save Options button at the top. Do not forget to click the Save Options button, because if not, the changes you made won’t take effect.

In case you ever want to revert all options to their default values, you can click the Reset Options link, also at the top of the options panel. But be careful, because the process can’t be undone.

You will find the different sections listed below:

• Design & Styles
• Header
• Title Bar
• Footer
• Home Template
• Portfolio – (if plugin is enabled)
• WooCommerce – (if plugin is enabled)
• Typography
• Social Media
• Performance

The post Theme Options Panel appeared first on NiceThemes.

General

• 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

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

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

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

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

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

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

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.

The post Design & Styles appeared first on NiceThemes.

Layout

The layout section is pretty straightforward. Most options are image pickers, so you can actually have an idea of what you are currently setting based on the options you are picking.

• Navigation Style: You can choose from these different options:
  • Top: The most common type of layout, the logo and navigation menu will be placed at the top of the screen. When selected you will be able to pick the following:
    • Navigation Alignment: Left, Centered, Right, Centered Logo, Centered Inline Logo.
    • Full-Width Header: You can choose if you want your header contents to be full-width.
  • Side: The side navigation will define your site layout with your logo & navigation on the side of your website, and your content besides.
  • Overlay: This type of navigation will use a hamburger icon that when being clicked will display a full page overlay with the navigation menu.
• 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.

Design

On this section, you can basically choose the style for your Header & Navigation.

• Header Skin: You can pick from two options: Light or Dark. This will apply for both logo and navigation.
• Header Background Color: Choose the header background color from your color palette.
• Header Background Image: Upload or select an image from the Media library if you want your header background to use an image. If you upload/select an image you will be able to set some properties like Image Repeat & Position.
• Transparent Header: You can define if you want your header to have a transparent background.
• Overlay Skin: The overlay is shown when the Overlay navigation is selected, or when the search button is triggered (among other situations). You can choose two predefined skins (light/dark) or define your own.
• Header Border: Check this option if you want to add a semi-transparent border at the bottom of the header.
• Header Shadow: Add shadow to the header.

Logo

Picking your own logo is one of the main parts of giving your website a unique look. We have covered all the differen possibilities for you to have more than one logo and different options.

• Text-Based Logo: If you don’t want to use an image and you prefer to use just the name of your site/company as the logo, you can check this option. If checked, you will be able to pick the font and style.
• Custom Logo: Upload/Select an image from the media library to be used as your website logo.
• Custom Logo (Retina): Upload/Select an image from the media library to be used as your website logo in high-resolution devices.
• Custom Logo (Dark Skin): Upload/Select an image from the media library to be used as your website logo when having a dark skin header.
• Custom Logo (Dark Skin, Retina): Upload/Select an image from the media library to be used as your website logo when having a dark skin header in high-resolution devices.
• Hide Logo: This option will hide the logo when the page is loaded, if the header animation is set to “fixed”, then it can appear when the site is scrolled.
• Hide Logo On Mobile Viewports: By clicking this option you will hide the logo on mobile viewports.
• Logo Height: Set the height of your logo, in pixels.
• Custom Logo (Mobile Only): Upload/select a custom logo for mobile viewports, if wanted.
• Custom Logo (Mobile Only, Retina): Upload/select a custom logo for mobile viewports when using a dark skin header, if wanted.
• Custom Logo (Dark Skin, Mobile Only, Retina): Upload/select a custom logo for mobile viewports in high-resolution devices when using a dark skin header, if wanted.
• Logo Height (Mobile Only): Set the mobile logo height, in pixels.
• Logo Padding (Mobile Only): Set the logo padding for mobile viewing.

Animation

This section will let you can create stunning animations and effects for your header/navigation.

• Fixed Position Header: By clicking this option your header will stay fixed to the top of your page when scrolling down.
  • Hide Logo: By clicking this option you can hide your logo when the header is fixed.
  • Shrinking Header: When selected, it will create a shrinking effect when scrolling.
  • Hide Header Until Scroll: By clicking this option the header will be hidden until the page is scrolled.
  • Auto-hide header: By clicking this option the header will hide when the user scrolls down and it will appear once he scrolls up trying to look for the header/navigation menu.

NOTE: Most of the options in this section will only be available for the horizontal and overlay header/navigation layouts.

Navigation Menu

This section will let you set different styles for the navigation menus & submenus.

• Navigation Sub-Menu Content Skin: Pick the navigation submenu content skin. You can pick between dark (default) and light.
• Uppercase Menu Items: By clicking this option you navigation menu items will be uppercased.
• Uppercase Submenu Items: By clicking this option you navigation submenu items will be uppercased.
• Hide Arrows Indication Submenus: By ticking this option the arrows indicating submenus will remain hidden.
• Remove border from Submenus: By ticking this option you will remove the colored border from submenus.
• Hide Mega Menu Separators: By clicking this option you will hide the Mega Menu dividers.

Top Bar

The top bar is a section that can be enabled and will be at the top of the screen. This section is often used to have links for users to sign in, sign up or contact.

• Display Top Bar: This option will enable the Top Bar. If enabled you will have the following options:
  • Top Bar Padding: Select the top bar padding in pixels.
  • Fixed Position Top Bar: By clicking this option you can fix the top bar at the top of the page when scrolling.
  • Top Bar Background Color: Select the background color from the color palette.
  • Top Bar Skin: Pick the Top Bar Skin, available options are light or dark.
  • Top Bar Left Content: Insert content to be displayed in the left part of the top bar. (*)
  • Top Bar Right Content: Insert content to be displayed in the left part of the top bar. (*)

(*): When using WooCommerce you can use the following shortcodes to display links: [login], [logout], [signup] and [my_account].

[login] & [signup] will only display when the user is not logged in. The same logic applies to [logout], it will only display if the user is logged in (as well as [my_account])

There’s also the possibility to add a navigation menu to the top bar. You can create a navigation menu and assign it to the “Top Bar” location.

The top bar, at the top of the screen with a dark background.

The post Header Options appeared first on NiceThemes.

In the Theme Options panel, there’s a special section to set global options for the title bar. These can be later overridden on a page/post basis.

The title bar in a normal page.

The Title Bar Options are the following.

Layout

• Height: You can set a height number and the unit (pixels, percentage, em or pt)
• Minimum Height: The minimum height in pixels.
• Title Horizontal Alignment: You can select to align the contents of the title bar to the left, center or right.
• Title Vertical Alignment: You can choose to vertically align the contents of the title bar at the top, middle or bottom.

Design

• Heading Background Color: Select the background color from the color palette.
• Heading Skin: Select the heading skin. The options are light or dark.
• Title Text Transform: Choose what type of text transformation you would like to apply to the title. Options are: Uppercase, lowercase & capitalize.
• Title Font Weight: Define the font weight for the title in the title bar.
• Heading Font Size: Select the size of the page title.
• Heading Background Image: Upload/select a background image from the media library.

The post Title Bar appeared first on NiceThemes.

Footer Layout

On this section, you can change your website footer layout.

• Full-width Footer: You can choose if you want to have a full-width footer. The footer contents will take the full available width.
• Footer skin: Select the skin you would like to have for your footer. Options are light or dark.
• Transparent Footer: Select if you want to have a transparent background footer.

Footer Widgets

It is quite normal to use widgets on website footers. That way, you can customize it as you want. On this section, you will be able to select the number of columns you would like to have for your footer widgets section.

• Footer Columns: Set the number of columns you would like to have for your footer widgets section.

Footer Extended

This section refers to the bar below the footer widgets section. This website section is often used to display the copyright.

• Custom Copyright: Select this option if you would like to insert your own copyright text.
  • Custom Copyright Text: Insert the text you would like to have as the copyright text.
• Display Social Icons: When enabling this option, you will make your social icons visible on the footer extended section (they will appear on the right part of the section).

Back To Top

The back to top button is the button you often see in the right bottom part of many websites, working as a link to the top of the page when the page is already scrolled. On this section, you can enable the button and customize its design.

• “Back To Top” Button: On/Off, you can enable or disable it.
• “Back To Top” Button Style: You can use the default style (one arrow only), outlined (transparent with a solid border and arrow), or solid background. If you select outlined or solid you will have more options:
  • “Back To Top” Button Shape: Round, Circle, Squared.
  • “Back To Top” Button Background: Select the color from the color palette.

NOTE: Many of these options can be overridden on a page/post/portfolio basis.

The post Footer Options appeared first on NiceThemes.

Custom Typographies

By enabling this option you will get access to a new array of options that will help you customize your website fonts, and set their properties.

• General Typography: You can pick the font, style, size and unit.
• Navigation Menu: You can pick the font, style, size and unit.
• Navigation Submenus: You can pick the font, style, size and unit.
• Top Bar: You can pick the font, style, size and unit.
• Headings: You can pick the font, style, letter-spacing and unit.
• Buttons: You can pick the font, style, letter-spacing and unit.
• Secondary Typography: You can pick up the font and style. The secondary typography is used across the theme in places like page navigation and special links.

The post Typography appeared first on NiceThemes.

Open in New Tab: By enabling this option, the social links will be opened in a new tab/window.

Social Links

The social links manager works in a very intuitive way.

How to edit a social link

You will need to click on the “pen” icon on the right part of the item. A new panel will be toggled with the following fields:

• URL: The link of the social link (for example: http://facebook.com/nicethemes)
• Icon Class: The CSS class of the icon. By default, our theme uses the popular icon library called FontAwesome. You can find a reference of the different icons included, on this page. For example, for the Facebook Icon, the class will be: fa fa-facebook
• Show in Header: When you have your options configured to display your social icons in the header, with this option you can set this particular icon to display or not in the header.
• Show in Footer: When you have your options configured to display your social icons in the footer extended, with this option you can set this particular icon to display or not in the footer extended.

Adding a New Social Link

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 social link. The fields will be the same. Just fill them in and you will have a new social link.

Ordering Social Links

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

The post Social Media appeared first on NiceThemes.

The Performance section contains options to make your website load even faster. These performance tweaks work independently from cache plugins. However, if you’re using some CSS or JavaScript optimization plugin like Autoptimize (which we recommend), you should reset the plugin’s cache after changing any of these settings.

The post Performance appeared first on NiceThemes.

The Home Page template for this theme is meant to work with our plugins:

• Nice Portfolio
• Nice Infoboxes
• Nice Team
• Nice Testimonials

The Options for the home page template are the following:

• Home Page Sections: You can reorder the content sections by modifying the order of the following: [content] [infoboxes] [portfolio] [team] [testimonials]. They will work as long as they are installed and only if you have created any content for them.
• Display Content Section: By enabling this option, the content inserted when creating the page will be displayed.

Infoboxes

If Nice InfoBoxes is enabled you will see a subset of options for the Home Template named “Infoboxes”. With these options you will be able to configure if you want to display the infoboxes and how you would like them to display:

• Enable Infoboxes Section: By enabling this option, the infoboxes section will be displayed when using the “Home Page” template.
• Infoboxes Section Title: You can insert a title for the section.
• Infoboxes Section Description: You can insert a description for this section.
• Columns: The number of columns you would like your infoboxes to be displayed in.
• Limit: The total amount of elements you would like to display.
• Infoboxes Background Image: Upload/select a background image from the media library.
• Infoboxes Background Color: Pick a color from the color palette.
• Infoboxes Section Skin: Select a skin (light or dark)

Portfolio

If Nice Portfolio is enabled you will see a subset of options for the Home Template named “Portfolio”. With these options you will be able to configure if you want to display the infoboxes and how you would like them to display:

• Enable Portfolio Section: By enabling this option, the portfolio section will be displayed when using the “Home Page” template.
• Portfolio Section Title: You can insert a title for the section.
• Portfolio Section Description: You can insert a description for this section.
• Columns: The number of columns you would like your projects to be displayed in.
• Limit: The total amount of elements you would like to display.
• Prevent Grid Gap: Tick this if you don’t want to have a gap in the grid of portfolio projects.
• Grid Style: Masonry/Metro
• Full Width: Enable this if you want this section to be full width
• Portfolio Background Image: Upload/select a background image from the media library.
• Portfolio Background Color: Pick a color from the color palette.
• Portfolio Section Skin: Select a skin (light or dark)

Team Members

If Nice Team is enabled you will see a subset of options for the Home Template named “Team Members”. With these options you will be able to configure if you want to display the team members and how you would like them to display:

• Enable Team Section: By enabling this option, the team section will be displayed when using the “Home Page” template.
• Team Section Title: You can insert a title for the section.
• Team Section Description: You can insert a description for this section.
• Columns: The number of columns you would like your team members to be displayed in.
• Limit: The total amount of elements you would like to display.
• Team Background Image: Upload/select a background image from the media library.
• Team Background Color: Pick a color from the color palette.
• Team Section Skin: Select a skin (light or dark)

Testimonials

If Nice Testimonials is enabled you will see a subset of options for the Home Template named “Testimonials”. With these options you will be able to configure if you want to display the testimonials and how you would like them to display:

• Enable Testimonials Section: By enabling this option, the testimonials section will be displayed when using the “Home Page” template.
• Testimonials Section Title: You can insert a title for the section.
• Testimonials Section Description: You can insert a description for this section.
• Columns: The number of columns you would like your testimonials to be displayed in.
• Limit: The total amount of elements you would like to display.
• Testimonials Background Image: Upload/select a background image from the media library.
• Testimonials Background Color: Pick a color from the color palette.
• Testimonials Section Skin: Select a skin (light or dark)

The post Home Template appeared first on NiceThemes.

When WooCommerce is installed and active, you will see a special section within your theme options panel named “WooCommerce”. This section will have the following sub-sections.

General

The general options for the WooCommerce built-in templates.

• Columns: You can determine the number of columns you would like to have in the default WooCommerce shop page. This will also define the number of columns for the related items, upsells, etc. (If you want to create special layouts we recommend you using the Posts element from the Page Builder.)
• Products Per Page: Define the number of products per page you would like to display in the default WooCommerce shop page.
• “On Sale” Text: Change the “On Sale” text for the products that are on sale.
• “On Sale” Text Position: Set the “On Sale” text position. By default, it is aligned to the top right of the product image.
• “My Account” Navigation Position: Since WooCommerce 2.6 an “Account” page can be defined. With this option, you can choose where you would like to have the navigation position.

Shop & Archives

The Shop & Archives options give you the possibility to globally configure different settings.

• Display Sidebar on Shop Archive Pages: By enabling this option you will display the sidebar on shop archive pages.
• Display Breadcrumbs on Shop Pages: By enabling this option you will display the shop breadcrumbs on shop pages.
• Use Text Based “Add to Cart/Show More”: By enabling this option you will have a text link for the “Add to cart” functionality instead of a button.
• Display Rating Stars on Shop Pages: By enabling this option you will display (if the product was rated before) the ratings for the product on the shop pages.
• Image Flip: By enabling this option, the product image will flip with the secondary image when the user put his mouse pointer on top.
• Display “Quick View” in Shop Archive Pages: By enabling this option, the “Quick View” button will be displayed in the shop archive pages and the visitors will have the chance to have a quick view of the product without visiting the product page.
  • Quick View Link Position: Pick the position of the Quick View button.
  • Quick View Gallery Position: Choose the position in which you want to have the image(s) on the quick view popup.
  • Quick View Overlay Color: Pick the overlay color for the Quick View modal box.
  • Quick View Overlay Opacity: Set the transparency for the Quick View Overlay Color.

Single Product

Single product means “Product Page”. The options for this section will define the way things look on a product page basis.

• Display Sidebar on Product Pages: By enabling this option, you will see a sidebar on the product page.
• Display Breadcrumbs on Product Pages: By enabling this option, you will have the store breadcrumbs on the product page.

The post WooCommerce Options appeared first on NiceThemes.