Theme options

Header background color

Choose your desired background color in order to make your site unique.

Header layout

Choose the arrangement of header elements of your site from a list of possibilities.

Available options:

• Logo on the left and navigation below
• Logo on the left and navigation inline
• Centered logo and navigation below

Full width header

This option is very usefull if you want to achieve a particular wide layout for your website (in example when using full width editor blocks to display page contents).

Sticky header

Enable this option to add a fancy modern look to your website when users scroll down.

Show header sidebar

Enable this option to show the Header widget area. You can configure widgets from Appearance > Widgets.

Header menu color

Select the color of menus

Topbar can be enabled or disabled to achieve your design goal.

Background, typography and elements alignment may be configured.

When enabled, the topbar is a widget area.

You can configure widgets from Appearance > Widgets.

From this panel you can manage your site logo max-width, the site name typography and color and the site tagline typography and color.

YITH Proteo theme supports sidebars. Different sidebar layouts may be used on each page/post/product of your website.

From YITH Theme Options > Sidebars you can choose the default layout of whole site and the layout and sidebar to use in the blog page. The blog page is where all your posts are listed.

Each page or post may have a different sidebar and layout. Read more about this in Page/Post options menu of this documentation.

Do you have an e-commerce website? Check Shop Options documentation menu to read more about sidebars in shop and product pages.

Footer background color

Use the friendly color picker to select your footer background color

Typography options

You can customize font size, color and elements alignments.

Footer sidebar 1

Proteo theme have 2 widget areas in the footer. For each of them you can choose how many widgets to show in a row.

In example: If you choose “Four” as value for this option and you add 5 widgets in this widget are… the fifth widget will go into a new line. Please look at this screen as a clarification:

Footer sidebar 2

Same as Footer sidebar 1

Footer credits are is generally used to display textual information about site copyright, but you can add also shortcodes in this panel.

Background color, typography and alignment options are available too.

The Body font size option is used to set a general font size for the whole website.

This font size is also used for <p> tags and similar.

Different color and font size can be configured for heading tags (H1, H2.... H6).

Proteo comes with the support to Google Fonts.

Please follow these steps:

a) go to https://fonts.google.com/

b) select the font you want to use (i.e. Roboto)

c) customize the font as you wish by choosing the font weight and style you want to use

d) copy the href link from Google Font. It should be something like

https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700&display=swap

e) visit your site and navigate to Appearance -> Customize -> YITH Theme Options -> Google Font

e) paste the link inside the panel

f) now navigate to Appearance -> Customize -> Additional CSS and add the following rule

body {
font-family: 'Roboto', sans-serif;
}

Here another rule example based on the Montserrat font (the Proteo default font)

body {
font-family: 'Montserrat', sans-serif;
}

Please note that this rule depends on the font you choose. Google Font helps you identify the right rule to use inside the Specify in CSS panel

On Proteo you can find 2 button styles. There is also a global option for buttons border radius (use “0”  for square buttons).

Button Style 1 available options:

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

If you don’t like borders, you can choose same color of the background (hey! it’s magic!).

Button Style 2 available options:

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

Buttons style 2 have a gradient background color. For this reason you have to set two background color shades.

Use this option to set border radius of form elements (like input and textarea).

Color shades are used to influence the default colors of many elements of the Proteo theme.