Site colors

The first menu you can access to in the  Miscellaneous menu is the the one where you can change the main colors of your sites:

  • Site background
  • Main color shade: this color is used as primary color for many elements of the Proteo theme to keep your site style always consistent, hassle-free.

Site colors

Site background image

In the Miscellaneous menu you will be able to choose the Site background image.

Site background image

Here you can add an image that will be displayed as background for your entire site.

In the Preset, you can choose how to display it:

  • Default
  • Fill screen
  • Fit to screen
  • Repeat
  • Custom

Based on the preset chosen, you will also be able to choose:

  • Image position
  • Image size:
    • Original
    • Fill screen
    • Fit to screen
  • Repeat background image
  • Scroll with page

Block editor colors

Replace the default color swatches of the Gutenberg block editor with your custom colors. In this way when you create a new page using Gutenberg you will find these colors and you can easily apply them to the page elements.

Block editor colors

Buttons

Buttons

In this menu you will be able to configure the Button radius as a general settings for all your theme buttons, and after that you can customize two different styles for the buttons available in Proteo theme. You will also see a preview of how the button will look like.

Button Style 1 – available options

  • Background color
  • Border color
  • Text color
  • Background :hover color
  • Border :hover color
  • Text :hover color

Button Style 2 – available options

  • Background color shade 1
  • Background color shade 2
  • Text color
  • Background :hover color
  • Text :hover color

All style-2 buttons have a gradient background color, that’s why you have to set two background color shades.

Proteo buttons

Forms

Forms

In this menu you can find specific settings for your forms that are managed through the theme style.

  • Input and textarea border radius (pixels): use this option to make your text input and text areas borders rounded.
  • Use custom style on select elements (for dropdown menus) instead of standard ones
  • Use custom style on checkbox and radio button elements instead of standard ones
Enhanced form elements
Enhanced style for dropdowns, radio buttons and checkboxes

Breadcrumbs

Here you can enable the breadcrumbs, i.e. the navigational links that will show on products, posts and pages.

Breadcrumbs

Layout

Layout

In this menu you will find two sections.

1. Global layout options

Configure here:

  • site content spacing in pixels and
  • choose whether to use a full width layout, no matter which resolution your screen has.

2. Page title options

  • Layout:
    • Inside page content
    • Outside page content
  • Alignment:
    • Left
    • Center
    • Right
  • Spacing (px)