Scroll to top

Theme Settings

Brief overview #

The Theme Settings dashboard contains 15 menu sections.

In almost each of these (except for the Get Help tab) you can customize a certain part of your website.

In this article we’ll briefly explain what you can do in each of these tabs.

Branding #

This tab contains such tabs as Website Logo and Other Settings.

The Website Logo tab allows you to upload a logo image that will be used site-wide or use a text logo.

The logo can be uploaded in two variants and you can choose the default one. This is very helpful in case you have pages with different backgrounds and are using a transparent header. It makes you available to choose the logo which looks the best for each of your pages individually.

The Other Settings tab contains a link to where you can set a favicon for your site.

Theme styling #

This tab contains tabs such as Theme Colors, Preloader and Other Settings.

The Theme Colors tab allows you to set the default colors for links, borders and the brand color.

These are basically handy shortcuts for all of your site’s elements that will set the color you choose here unless you set the color explicitly when editing your page/element.

The Preloader tab allows you to disable/enable and set the style of your preloader (the animation you see when visiting a site using Ohio when it has not been loaded yet) including the color and type.

The Other Settings tab allows you to enable/disable and set the color for the custom cursor.

Typography #

This tab contains tabs such as General Settings, Fonts and Responsive Settings.

The General Settings tab allow you to choose between Google Fonts (default) and Adobe TypeKit fonts. We added this option as we were requested for TypeKit support many times with our previous themes.

The Fonts tab allows you to set the font and most of typography-related values for your site.

The Responsive Settings tab allows you to do the same as the Fonts tab but for mobile/tablet devices specifically as well.

Page settings #

This tab contains tabs such as General Settings, Sidebar, Breadcrumbs and Other.

The General Settings tab allows you to set the background of your site’s content area and add a wrapper (it makes the content more centered as it adds side paddings).

The Sidebar tab allows you to enable/disable the sidebar and set its typography values.

The Breadcrumbs are what is usually displayed at the top of the content showing you the hierarchy of pages that “contain” the current page (like Blog / Current Post). Here you can enable/disable breadcrumbs for your site and set some styling options.

The Other Settings tab allows you to enable/disable scroll to top anchor link and adjust its styles.

Portfolio settings #

The Project custom post type is a thing that has been with us since the beginning and is available in all of our themes. Over time we’ve perfected it listening to our users’ feedback and now it allows you to display your works in this beautiful format. This tab allows you to set up the styling of this type of posts and elements that display these posts.

This tab contains the following tabs: Portfolio Layout, Portfolio Page, Project Page, Header Title, Other Settings.

The Portfolio Layout tab allows you to set the style of pages that contain your projects and some styling options for those pages’ elements.

The Portfolio Page tab allows you to either use the options from the Page Settings or set custom values from the mentioned tab for portfolio pages individually. Also here you can set the main portfolio page using the “Portfolio page” option and your projects’ main breadcrumb will always lead to it.

The Project Page tab allows you to set the layout of your single project pages and use some options from the Page Settings or set custom values from the mentioned tab for project pages individually.

The Lightbox tab allows you to enable/disable project quick view and adjust its appearance;

Blog settings #

This tab contains tabs such as Blog Layout and Blog Page.

In the Blog Layout tab you can set the style of your blog’s grid that contains your posts.

The Blog Page tab allows you to set up your blog’s pagination, breadcrumbs, custom content position and display filters.

Shop settings #

This tab contains tabs such as Shop Layout, Shop Page, Other Settings.

The Shop Layout tab allows you to set the style of pages that contain your products and these are very customizable. Each separate element of a shop page can have its own settings, be that the grid style, the hover effect or the styling of cards in that grid.

The Shop Page tab allows you to either use the options from the Page Settings or set custom values from the mentioned tab for shop pages individually.

The Other Settings tab allows you to enable/disable the cart icon on your website without disabling a WooCommerce functionality.

Subscribe pop-up window #

What is a modern WordPress theme without a built-in site-wide subscription pop-up option?

This tab contains two tabs: General Settings and Display Settings.

The General Settings tab allows you to enable/disable the pop-up, set its typography and appearance, content and choose the subscribe form (previously created with ContactForm7 plugin) that will be used in it.

The Display Settings tab allows you to choose the condition of display of the pop-up, and its values.

Custom CSS #

This section allows you to inject your custom CSS code into the theme. If you do not know CSS then please don't write anything there. If you do know CSS and want to change something, please check if you can change it with the settings of the theme first or feel free to reach out to us with this question. If you add some custom CSS code to change something and it accidentally breaks something else, then it'll give us a harder time investigating your issue when you come to us with it.

This tab contains the following tabs: General Styles and Responsive Styles.

The General Styles tab allows you to inject your custom CSS code into our theme. Any code you put in it will be displayed in the page’s source without any changes, the same way you wrote it.

The Responsive Styles tab is a handy shortcut for multiple rules that you want to apply to a certain type of devices only (mobile, tablet, desktop). Basically it wraps any code put into it in a media query. For instance YOUR_CODE for mobile devices will end up looking like this:

@media screen and (max-width: 768px) {
    YOUR_CODE
}

Other settings #

This tab contains the following five tabs: Plugins Settings, Snippets & Tracking Code, Social Networks, Notification and Options Cache.

In the Plugins Settings tab you must type in your Google Maps API key to be able to use Google Maps. Without it the Google Maps element will not work, you will see only a grey square on the front-end and get an error in your console.

In the Snippets & Tracking Code tab you can inject JS into your site. For instance you can put your Google Analytics code there.

The Social Networks tab allows you to create a list of your sharing links and adjust their typography.

In the Notification tab you can set up a small button/notification that will be fixed on your site’s pages and will be displayed once in a period you set.

In the Options Cache tab, you can enable/disable using Theme Settings options cache for better performance.

We use cookies to give you the best experience.
✉️Subscribe

Sign up for our newsletter and be the first to get all the latest Colabrio news and updates.