Legacy Brandguide tutorial: build and style

Have you seen the new and improved Brandguide?

Learn how to migrate your content and update to the new experience inGet Started with BrandguideandBrandguide Build and Style.

Editing capabilities on your existing Brandguide will be going away on September 1, 2023. On December 1, 2023, the legacy Brandguide editor will no longer be available.

Create sections within Brandguide

1. To create a new section, scroll to the bottom of the page and selectAdd Section

2. This will open up a modal allowing you to select the type of content the section will contain.

3. The first three section types have a default structure that allows you to type in your chosen text and upload media from Brandfolder, your device, or an external link.

4. The code block section allows you to build the section structure from scratch using HTML. This can be customized using CSS in the Advanced Styles or adding inline CSS directly into the code block.

基本样式

The Basic Styles is where you can change the font settings, such as the font family, font size, and colors. Brandguide comes with a selection of default fonts, and colors can be selected by inputting a hex code or using the color picker tool.

The favicon setting allows you to upload a favicon image from brandfolder or your device.

Advanced styles

The Advanced Styles is where you will import third-party fonts and apply custom CSS to the elements on the page. This setting can be found at the bottom of the Styles tab below the favicon setting.

You can import third-party fonts using an external stylesheet, script tag, or Typekit Id. Our recommended method for importing fonts is adding the @font-face property in the Custom CSS section.

In the Custom Styles section, you will input your CSS to customize the brandguide further. You may utilize this CSS section to import third-party fonts, customize your code box HTML, or change the existing styling on any element on the page.

Below the Custom CSS is the option to show or hide the section navigation. You can also set fixed navigation to keep it locked as you scroll down the page.

Importing third-party fonts

@font-face is a CSS rule that allows you to import and utilize third-party fonts on your Brandguide. In this example, we will import the "Satisfy" font from Google Fonts, a library of free open-source fonts for use on the web.

Syntax

You may copy the syntax below and add it to the Custom CSS section of your brandguide. This is the only CSS you will need to import the font. To import a different font, change the font family, source URL, and format to your chosen font. Note that you will include !important within the syntax to override the default font.

@font-face {

font-family: 'Satisfy';

src: url(https://fonts.gstatic.com/s/satisfy/v11/rP2Hp2yn6lkG50LoCZOIHTWEBlw.woff2) format('woff2');

}

Finding the font URL and format:

1. Navigate to your font library of choice and select the font you want to add to your Brandguide. In our case, we will select "Satisfy" from Google Fonts.

2. Once selected, you must copy and paste the @import url into a new browser tab.

3. This will take you to a page containing the URL and format needed to import the font to your brandguide.

4. Copy and paste the src URL into the @fontface code and font family.

5. SelectUpdate CSSto save your changes.

The newly imported font will populate in the font dropdown in the Basic Styles section. You have the option to change your content's font through this interface or by using CSS in the advanced styles.