Sidebars

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.

Topbar

YITH Proteo theme supports topbar. The topbar is a section of your website above the header. This area will contain a sidebar, named Topbar sidebar, that you can use for widgets.

You can configure widgets from Appearance > Widgets.

Header

Sticky header

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

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).

Footer

Footer background color

Use the friendly color picker to select your footer background color

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

Google Fonts

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

Typography

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).

Buttons

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.

Forms

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

Color shades

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

For example the default colors of buttons will be changed accordingly to the value chosen for these options.

Main color shade is used not only to influence the default values of the buttons but also for the <a> (links) tags.

General link: hover color is used to set the :hover state of links.