Please visit Legacy Brandguide tutorial: build and style in the Smartsheet Help Center. Starting December 29, 2023 the Brandfolder Knowledge Base will only live on Smartsheet Help.
Have you seen the new and improved Brandguide? Learn how to migrate your content and update to the new experience in Getting Started with Brandguide and Brandguide Building and Styling. 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.
Creating Sections within Brandguide
To create a new section, scroll to the bottom of the page and select Add Section
This will open up a modal allowing you to select the type of content the section will contain.
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.
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.
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.
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.
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.
Select Update CSS to 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.