Add a theme

General

Name of the theme

Here you fill in a name for your theme.

CSS class name

Every theme needs a class name. Once you have filled in Name, this field is automatically filled in.

Description field

Here you can fill in a description of your theme (if needed).

Basic

Here you set basic things like font, background color and border. You can also set the background color and the background color of a section. You can also set the border radius and color for this.

Font

Here you can choose between Arial, Helvetica, Verdana, Times New Roman, Georgia and Courier New fonts or other fonts you have added under Site Settings .

Base font size

Here you set the base size of the font. It is the basis and affects the other sizes. For example, small, medium, large, x-large. See examples at https://github.com/sitevision/envision/blob/master/packages/envision/src/scss/variable.scss External link, opens in new window.

When you fill in the settings and click OK, a service is called and compiles these settings into a finished css.

Font color

Here you choose the color of the text. Colors are specified as HEX value(#123456) or in RGB(A) format(rgba(123, 123, 123, 1)). You can also select the color by clicking on the color picker. Below the color picker, color palettes drawn from your site colors are displayed as suggestions for colors.

Background color

You can also make settings for the background color.

Section background

You can also set the background color for a section. It is used, for example, as a background on modals and other large surfaces. It is good if this setting matches the background color (only slightly weaker).

Link color

Here you choose the link color.

Link hover color

Here you choose what the link color should be when you hover over the link.

Link text decoration

Here you choose whether the link should be underlined.

Link text decoration on hover

Here you choose how the link should behave when hovered.

Link icon size

Here you can set the size of the link icon in either em or px.

Vertical offset for icon

Here you can adjust the vertical position of the icon in either em or px.

Link metadata text size

Here you can set the size of the link metadata text in either em or px.

Border color

Here you set the color for your border radius.

Border radius

Here you set the border radius. Set 0 px if you do not want rounded corners on your border.

Shadow color

Here you choose the color for shadow. Colors are entered as HEX value or selected by clicking on the color picker. Below the color picker, color palettes taken from your site colors are displayed as suggestions for colors.

Preview

On the right you can see a preview of your settings.

Brand color

Brand color

Here you set your profile color.

Brand text color

Here you set your text color. There is a green OK box above it to show that the contrast is good enough. You can read more about this on the Preview page.

Mute brand palette color saturation

A selected color always has a certain color saturation. You can choose to make the palette more grey, so based on the color selected as profile color, you can pull down the saturation 0-100%. 0 gives the same saturation and 100% gives maximum attenuation of the saturation, that is, completely in gray scale.

Calculation of text color in palette

The following can be selected:

• Palette colors (Default)
• Text color + high contrast
• High contrast (black/white)

Mute palette text color saturation

You can reduce the saturation of the profile color text color in the same way as you can reduce the saturation of the profile colors. 0 gives the same saturation and 100% gives the maximum attenuation of the saturation, i.e. completely in grayscale.

Preview

On the right you can see a preview of your settings.

Text

Selected text style

In the "selected text style" list, select the heading/text for which you want to make all the settings.

The list contains:

• Headings
  • Heading 1-6
  • Alternative headings 1-3
• Paragraphs
  • Body text 1-4
  • Preamble
  • Quotes 1-2
  • Caption
• Table of contents
  • Table description
  • Table heading
  • Table data

Where you can say that the number in, for example, Body text 1-4 means that Body text 1 is the largest text by default and then it gets smaller and smaller. But you can set the sizes you want for the four different variants of body text.

For each heading/text you can enter the following.

Text

Font family

Here you can choose between Arial, Helvetica, Verdana, Times New Roman, Georgia and Courier New fonts or the web fonts you added under Site Settings.

Font size

Here you set the text size for your font.

Color

Here you specify the color of your font.

Font weight

Here you specify the weight with which the font should be displayed. Here you can specify from Thin to Extra Black.

Line height

Here you set the line spacing. The following are available in the list:

• Normal
• 1.5

Letter spacing

Here you set the spacing between letters.

Text transform

Here you can choose from the following:

• Initial capital letter
• Upper case letters
• Mixed case

Style

Here you choose normal or italic.

Margins

Margin top

Here you set the margin above text paragraphs or headings.

Margin bottom

This is where you set the margin below paragraphs or headings.

Links

Link color

Select the color you want for the link color.

Link hover color

Select the color you want as the link color for hover. I.e. you can have one link color on the regular font and another link color in a colored block such as a puff.

Link text decoration

Here you choose whether the link should be underlined or not.

Link text decoration on hover

Here you choose whether the link should be underlined for hover or not.

Preview of the link

On the right you can see a preview of your settings.

UI text

Selected text style

Here you make settings for Header, Heading, Section heading, Subheading and Dialog text.

For each heading/text you can specify the following.

Font family

Here you can choose between Arial, Helvetica, Verdana, Times New Roman, Georgia and Courier New fonts or web fonts that you have added under Site Settings .

Color

Here you specify the color of your font.

Font size

Here you specify the text size for your font.

Font weight

Here you specify the weight with which the font should be displayed. Here you can specify from Thin to Extra Black.

Text transform

Here you can choose from the following:

• Initial capital letter
• Upper case
• Batch characters

Letter spacing

Here you set the spacing between letters.

Preview of your settings

On the right you can see a preview of your settings.

Block colors

Here you can add block colors. Block is a larger area that you use as a decoration, for example. For example, you can control the background color behind a comment in the activity feed.

For Standard/Primary and Secondary you can make the following settings:

Background color

Select the color that will be your background color.

Text color

Choose your text color. Make sure there is enough contrast with the background color.

Link color

Select the color you want as your link color.

Link hover color

Choose the color you want as the link color for hover. I.e. you can have one link color on the regular font and another link color in a colored block such as a puff.

Link text decoration

Here you choose whether the link should be underlined or not.

Link text decoration on hover

Here you choose whether the link should be underlined for hover or not.

Border color

Select the color you want for the border.

Preview

On the right you can see a preview of your settings.

Element colors - buttons, badges etc.

Here you can add element colors. Elements are small components such as buttons, badges, labels, etc.

For Standard/Primary/Secondary/Success/Warning/Danger and Info, you can specify:

Background color

Here you select the background color for the element.

Text color

Here you select the text color for the element.

Status colors

The status colors are the colors that show whether you are logged in or logged out, for example.

If you do not choose the color yourself, they will be the colors shown in the preview.

Components

Background Color & Text color

Here you can set the color for both background color and text color

• Neutral
• Active
• Attention
• Error

Texts

Here you can set the text color for :

• Active
• Attention
• Error

Form fields and focus

Here you add colors for forms and focus markings.

Form fields

Font family

Here you set the font family.

Text color

Here you set whether you want a different text color in the form.

Background color

Here you set whether you want a background color in the field.

Border color

Here you set whether you want a border color in the field.

Input labels

Font family

Here you can set the font for field labels.

Font weight

Here you can set the weight for field labels.

Focus highlight

Focus outline

Size

Here you set whether you want to increase the size of the focus mark

Offset

Here you set whether you want more distance between the form box and the focus mark.

Color

Here you set if you want a different color for the focus mark than black.

Color inside outline

Here you set whether you want a color for the area between the form box and the focus marker. It is only visible if you set the distance.

Preview

On the right you can see a preview of your settings.

Badges

This component is used to make appearance settings for labels. Color settings are made under Elements.

Font

Here you set the font you want on your tiles.

Font size

Here you set if you want a different size of the tiles.

Font weight

Here you specify the weight with which the font should be displayed. Here you can specify from Thin to Extra Black.

Text transform

Here you can choose from the following:

• Initial capital letter
• Upper case
• Batch characters

Letter spacing

Here you set the spacing between the letters.

Border radius

Here you set the edge radius. Set 0 px if you don't want rounded corners on your tiles.

Preview

On the right you can see a preview of your settings.

Buttons

This component is used to make appearance settings for buttons. Color settings are made under Elements.

Fonts

Here you set the font for the buttons.

Border radius

Here you set the border radius. Set 0 px if you don't want rounded corners on your buttons.

Preview

On the right you can see a preview of your settings.

Alerts

This component is used to make appearance settings for message boxes. Color settings are made under Elements.

Font

Here you set the font you want for your message boxes.

Border radius

Here you set the border radius. Set 0 px if you don't want rounded corners on your border around the message box.

Preview

On the right you can see a preview of your settings.

Pagination

Font

Here you choose the font for the border.

Border width

Here you set the width of the border.

Border style

Here you set the style of your border. The following options are available:

• Solid
• Dots
• Binding line
• none

Preview

On the right you can see a preview of your settings.

Collapsible field

This component is used to make appearance settings for collapsible fields.

General

Icon color

Here you set the color of the icon

Border style

Here you set the style of your border. The following options are available:

• Solid
• Dotted
• Dashed
• none

Icon length

Here you can set the icon length if you want a slightly larger/smaller icon.

Border width

Here you set the width of the border.

Icon thickness

Here you can set the thickness of the icon if you want a slightly larger/smaller icon.

Animation time in miliseconds

Here you can set the animation time before the content of a collapsible field is displayed.

Collapsed

Background color

Here you set whether you want a background color in the field.

Border color

Here you set whether you want a border color in the field.

Expanded

Background color

Here you set whether you want a background color in the field.

Border color

Here you set whether you want a border color in the field.

Preview

On the right you can see a preview of your settings.

Blockquote

Top and bottom border

Border width

Here you can set the width of the border.

Border color

Here you can set the color of your border.

Left border

Border width

Here you can set the width of the border.

Border color

Here you can set the color of your border.

Right border

Border width

Here you can set the width of the border.

Border color

Here you can set the color of your border.

Padding

Here you can specify the distance at the top, bottom, left and right.

Margins

Here you can specify the margin at the top and bottom.

Text highlight

Text color

Here you set whether you want a different text color in the highlight.

Background color

Here you set whether you want a background color in the highlight.

Profile image

Here you can set the border radius of the profile image.

Border radius

Here you set whether you want an edge radius on the profile image. By default, the profile image is round. To get a square profile image, enter 0px.

Tooltip

Here you set how tooltips should look. A tooltip is a small box with explanatory text that appears when the user hovers over an object, such as a hyperlink.

Font

Here you can choose between Arial, Helvetica, Verdana, Times New Roman, Georgia and Courier New fonts or other fonts you have added under Site Settings.

Font size

Here you set the font size.

Background color

Here you set whether you want a background color in the box.

Text color

Here you set whether you want a different text color in the box.

Font weight

Here you specify the weight with which the font should be displayed. Here you can set anything from Thin to Extra Black.

Border radius

Here you set the border radius. Set 0 px if you don't want rounded corners on your box.

Preview

On the right you can see a preview of your settings.