The Styles sections of our Theme Editor is further broken down into subsections, which can be accessed by clicking around your theme preview, or by using the navigation menu:
Global Styles:
Global styles are applied to the main content areas on all community and KB landing pages. Here you can control your basic colour, button and text styles. This includes:
- Configuring a light vs dark theme
- Selecting your background, text & link colours
- Applying a preset or custom font
- Configuring options for primary and secondary button styles
Title Bar
The title bar contains the navigation for your community. It is an integral part of Vanilla. Without the title bar, users would not able to access all the functionality of the site. The title bar has three main elements:
- Logo: You can upload your logo to the title bar.
- Menu: The menu is the main navigation of your site. You can customize the menu items, or use the default menu items.
- Me Box: The me box displays the current user's avatar and gives quick access to features such as search, inbox, notifications, and bookmarks. The me box displays sign in and register buttons when there is no logged in user.
In the Title Bar section of your theme editor you can:
- Configure your background-colour, you also have the option of enabling a sleek full-bleed effect.
- Set your title bar's text colour, height and style
- Upload your logo for both desktop and mobile and configure its alignment
- Control the alignment of your nav item
Examples
Basic Title Bar
Here is an example of the most basic title bar.
Full Bleed Title Bar
This example shows the full bleed effect of the title bar. It works really well with a patterned splash image.
Full Bleed Title Bar With Background Transparency
This example has the same full bleed effect, but starting at black 0.15 opacity to show the title bar over the image. Black is often a good color to choose because it is a nice predictable overlay color. In this case the title bar would transition to our blue brand color once the splash image scrolls away.
Often, a title bar with the default height of 48px may look a little off in full bleed mode, even though it looks appropriate across the rest of the site. Adding a bit of a background transparency can help to alleviate this.
Banner:
This is the first thing users see on your site. The banner shows up below the title bar on home pages. It provides a great way to welcome users first visiting your site and also showcases your brand. Here you can:
- Configure your Banner Title, its text colour and alignment
- Upload a background image, and enable a cornsive breakpoints
- Set the styles for your search box
Content
The content banner is an option to be considered in a content page like an article page or a discussion page, for example. The content banner appears below the title bar and helps with the brand of your product/service.
The size of the content banner is smaller than the regular one. It starts with 120px height and goes until 168px.
In the Content area of your theme editor you can:
- Upload a banner image
- Enable a colour overlay and responsive breakpoints for your banner
- Configure the banner height
- Upload a content banner logo
Article's page with a content banner
Content Banner
Content Banner with logo
If you prefer you can upload your logo separately, this way you have a better control in your responsive image.
