Themes

Themes

Click to view documentation for 5.6 build 3116 onwards..

Page version: 5.6 build 3116

Themes can be swapped from the Theme Select marked by the Color Palette icon.

Theme color options decide the theme color. Since theme editor can reference theme color, this increases customization possibilities, e.g. monochromatic theme uses theme color for every icon.

Theme storage

Themes are stored in /plugins/Plan/web_themes folder and change colors of different elements on the website.

In HTTP mode or on an Exported site, themes can be edited and they will be stored in browser local storage. They can also be downloaded, so that you can place them to web_themes -folder manually.

In HTTPS mode access.theme.editor web permission is required to go to theme editor, and manage.themes web permission is required to Save/Delete themes in web_themes -folder. Without manage.themes user can still store themes in their local storage as if in HTTP mode.

Being able to download themes allows collaboration and sharing themes between those using Plan.

Adding themes

Clicking 'Add theme' brings you to the Add theme -view.

Here you can select a theme to base yours on, the name for your theme, or alternatively - if you've downloaded a theme in the past, upload it directly to start editing right away.

Deleting themes

If you wish to delete a theme, you can go to 'Delete themes' inside the Theme editor

If in HTTP mode or in HTTPS mode without manage.themes permission, the user can only delete themes that are stored in their local storage.

Editing themes

After opening Theme editor you can edit the theme name and its colors.

Colors section

In the colors section you can define new colors.

Night mode colors

In night mode all the 'Colors' are desaturated by 30% to better suit the dark color space. If you wish to add a fully saturated color to night mode, the night mode colors section exists for this purpose.

Editing colors

Clicking a color or 'Add color' -button opens the color editor

The supported formats for colors are:

• Hex3 & Hex6 #123 or #212121 https://www.w3schools.com/css/css_colors_hex.asp
• rgb & rgba in rgb(0, 0, 0) or rgba(0, 0, 0, 0.1) formats
• hsl & hsla in hsl(0, 50%, 40%) or hsla(0, 50%, 40%, 0.1) formats
• hsv in hsv(360, 100%, 100%) format
• linear-gradient & radial gradient (Limited to background elements)
• color-mix (Can be used with css variables generated by the theme) https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
  • This can be used to input colors not otherwise supported by the validation system

Use cases section

The use case section decides the actual colors that elements are on the website.

Clicking on a use case will bring up a dropdown to select a color

Example section

Hovering over a use case will bring up an Example that uses that color. On mobile the example is shown when the use case is tapped.

When you hover over the night mode use case the example shows in night mode

This allows you to see in real time what you are editing.

If the Example section gets in the way it can be collapsed/shown by tapping top of the section where the 'Example' text is.

Undo, Redo & Discard changes

The edit history bar will appear when you make changes

If you discard changes, all of the change history will be placed in a single 'Redo' action.

Any changes undone by the Undo button will disappear if you do another action

Saving the theme

Once satisified with the changes you can press Save

You will not be redirected, but the theme can then be taken into use.

Older versions

version: 5.2 build 1068

Colors used on the page are changed in theme.yml.

• Default theme.yml

Default sidebar color or night mode

• Change DefaultColor in theme.yml to the name of the color you want to use for the sidebar (The color names are listed in theme.yml).
• Change Display_options.Theme in config.yml to "night" if you want the panel to appear in night-mode by default
• Reload Plan
• Clear browser cache if you have accessed the page to see default.

Themes

Here is a list of Themes currently available (Click the link to view an image.)

Default:

• Soft
• Mute
• Pastel
• Grey
• Sepia

All colors can be changed, so if you do not like a single color you can set it with the other settings.
If you want a certain themed theme to be created just ask - They're one of the easiest things to implement.

Borrow colors from other Themes

In order to copy colors from another theme:

• Change Display_options.Theme in config.yml to name of a theme you want colors from
• Remove the settings you want to copy inside the theme.yml
• Reload Plan

For example:

red: "#Value"
pink: "#Value"

Remove pink:

red: "#Value"

Reload:

red: "#Value"
pink: "#NewValue"

Custom colors

All the settings inside theme.yml accept a Html color code. This means that any setting can be set as any color.

Example: pink: '#ff75f3'

Changing the Font

The font can also be changed.
By default Nunito is in use. (https://fonts.googleapis.com/css?family=Nunito:400,700,800,900&display=swap&subset=latin-ext)

If you want to use another web font, set FontFamily: '''WebFontName'', sans-serif' and FontStyleSheet: 'linkToFontStyleSheet'

Pie Chart colors

Piecharts require multiple colors so they're all defined in a single row. The colors are placed on worlds in alphabetical order.

Format: '"#0099C6", "#66AA00", "#316395", "#994499", "#22AA99", "#AAAA11", "#6633CC", "#E67300", "#329262", "#5574A6"'