Global Styles

Updated 9 months ago

Preloader Screen #

A loading screen that site visitors see while the page content is not fully loaded. It's commonly used to prevent interactions with the page content until it's ready.

At Theme Options > General, choose one of the pre-designed Proloader Screen templates or use a custom image.

Note that using a preloader screen lowers the site's SEO performance and score.

Rounded Corners #

It defines the baseline approach to the design of shapes and figures used in elements site-wide. Apply Rounded Corners to theme elements at Theme Options > General.

When deactivated, shapes inside the elements will use sharp corners instead.

Underlining Links #

A global setting to emphasize the text links site-wide by adding an underline effect on hover. Activate it with the Underlining Links switch at Theme Options > General. 

Keyboard Accessibility #

A special mode that highlights the currently focused element of page content or navigation. It simplifies site browsing via the keyboard only.

Activate the Keyboard Accessibility at Theme Options > General.

Button Styles #

At Theme Options > Button Styles you can add/edit styles for buttons on your site. These styles will be applied to the relevant content elements that include a button in their layout. 

The Button Style selection is available for:

• Theme Options > General > "Back to top" Button — assigned at Theme Options > General.
• Theme Options > General > Cookie Notice — a cookie consent button, assigned at Theme Options > General.
• Theme Options > Shop > Primary Buttons Style and Secondary Buttons Style — styles applied to your WooCommerce shop, including add to cart button, cart, and checkout navigation buttons, discount code submit button, order confirmation button, and others. 
• Button element.
• Carousel element (prev/next navigation arrows style).
• Cart Page - Totals element.
• Contact Form element.
• Checkout Page - Payment element.
• Coupon form element.
• Action Box element.
• FlipBox element.
• Grid/Carousel element ("show more" button).
• Popup element (with the button trigger).
• Post taxonomy element (when its style is set to "display as > button").
• Pricing Table element.

Click on a button preview to expand its settings:

Every button has a default CSS class on the right. You can use it or add your custom Extra Class to apply some extra styling via CSS.

Default Button Style #

The first style is always used as the "default" style, which is applied to:

1. Custom or third-party buttons when they don't have their styling.
   For example: if you add a custom HTML button with <button>My button</button>, it will use the default button style.
2. Buttons of the elements after removing the previously selected button style. 
   For example: if you delete all Button Styles except one, all buttons on your website will use that remaining style.

If you move another button style to the first position in the list, it will become a new default style. You can reorder the list of button styles with drag and drop:

Fields Style #

At Theme Options > Fields Style, you can set up the global appearance settings for the input fields on your site.

These field style settings will apply to all input fields on your site, including the third-party plugins for contact forms, for example, Contact Form 7 or Gravity Forms.