Site & Logo

Choose a logo and customize the overall layout of the site.

The Logo is the brand identity of a website. By default, it is always displayed on the top left of each page. This can be changed by choosing a different header layout.

The following settings can be found in the Layout → Site panel of YOOtheme Pro.

The Logo Text will be used in case no Logo Image from your media library has been picked.

Upload your logo in the SVG file format for best quality on all screens. Alternatively, you can use PNG or JPG in a high resolution so that the logo looks sharp on all displays.

Logo Setting

Width and Height

Set the width and height of your logo. Mind that setting only one value preserves the original proportions.

Upload an Inverse Logo with inversed color, e.g. white, for better visibility on dark backgrounds. It will be displayed automatically if needed. Usually, the default logo is black on a transparent background, and the inverse logo is white on a transparent background. This way a high contrast version of the logo, both on dark and light backgrounds in the theme, can be displayed.

Inverse Logo Setting

Note An example of where the inverse logo is used is a transparent navbar overlapping the first section of a website that has a dark background.

By default, mobile devices will display the regular logo in a smaller size. Alternatively, upload a simplified Mobile Logo that leaves out unnecessary text and other details for best results on small screens.

Mobile Logo Setting

Site Layout

By default, the website stretches to the Full Width of the browser or device. This includes the background of all sections on your pages.

Alternatively, you can choose a Boxed Page layout which will wrap all of your page content into a boxed container. The background will show a solid color or gradient by default (depending on your chosen style). But you can also pick a Background Image.

Page Layout Setting


The toolbar is only displayed when the toolbar-left or toolbar-right positions have anything to display on the current page. For example, social links or the search might be configured to show in the toolbar. Enabling the Full width toolbar will make the content of the toolbar expand to the full width of the window. Otherwise, the content will be constrained to the default container width.

Toolbar Setting

Note You can publish additional modules in the toolbar positions.

Breadcrumbs are a navigational element for hierarchical page structures. By default, they are hidden. If Display the breadcrumb navigation is enabled, they will show up above the main content of a page, for example when looking at the Blog view. On static pages created with the YOOtheme Pro page builder breadcrumbs are always hidden.

Note Alternatively, you can publish a breadcrumbs module on any other Joomla positions instead of using this shortcut setting.

Breadcrumbs Setting

YOOtheme Pro