Your Global design settings are the design options that ensure that your entire career page package stays on brand. This is where you set page-wide settings, such as logotypes, colors, and typography. All settings here are inherited throughout your Teamtailor pages.
First things first, you will be able to access your Global design settings in two places: from your content overview as well as when visiting a specific page editor. Keep an eye out for the brush.
Logotypes
In your Global design, you can edit your different career site logotypes.
💡 You’ll see a helpful preview of what your logos will look like on a white/grey the right-hand side of the page when viewing your global design. The logotype displayed on white is your default, and grey your optional.
Default logotype
Your default logo is the one used everywhere on your account, including emails sent to your candidates. So, make sure this one works great on a white background.
Optional logotype
The optional logo will be used on your career site. If the default logotype above doesn’t look good on the career site, you upload a different version for the career site here. This is a good idea if you for example want to use a white logo on top of the cover image on your career site. 📖 Read more about the logos here
Favicon
Your favicon is the icon that’s displayed in the browser's address bar, and this is usually your logotype. 📖 Read more about your favicon here
Colors
Being consistent with your color selection is a great way to stay within your brand's theme, and this is made very easy in Teamtailor. The color settings under your global design are used on every single page of your career site.
💡 Unsure of what your color settings will look like? Take a look at the preview on the right-hand side of the page when viewing your global design, here you’ll see what your primary and secondary background and content will look like.
Master color
The color set as Master is by default used for all links and graphical details and you probably want to use your brand's key/primary color here. This is also overriding any settings for the color options for the link, secondary background, and button background, so updating this will override your extra color options.
Typography
In your typography settings, you’ll be able to edit your font and font settings.
Font
When designing your career site, you can use any one of the fonts provided or you can use a custom font. The custom fonts can be uploaded using Google fonts, Typekit, or via a .woff file sent to the Teamtailor team. 📖 Read more about using custom fonts here
Font weight
The font weight defines the thinness/thickness of the font used.
Please note! When adding a custom font, we recommend that you include as many font weights as possible, as you will only be able to set the weight included in the font pack.
Buttons
You have the option of deciding what style you want on your buttons. The options include Outlined or Filled, as well as setting a Border radius (decides the corners of the button, where 0px is sharp corners).
💡 In the screenshot above, you’ll see four different examples of buttons. On the first row, you see outlined buttons with border-radius 0px (left) and then 40px (right). On the second row, you see filled buttons with border-radius 0px (left) and then 40px (right).
Miscellaneous
Confetti
Enable a confetti animation on the page your candidate lands at after submitting their application.
Custom styles
You will have the option of enabling custom stylization of your site, which allows you to add custom CSS and Javascript. When enabling this feature for customization, you will be asked why in a one-question survey to help us improve the editor.
☝️ Javascript will only work if you're using your own domain.
❕ Please note that we don’t offer any support for custom coding/edits. You are in charge of the code, and ensuring it looks good with any future updates of our platform.