Skip to content
Rsl1122 edited this page Sep 25, 2017 · 14 revisions

Plan Header

Themes

Theme system is a new addition in version 4.0.0. It brings a lot more flexibility for colors, backgrounds and font used on the web pages.

Themes

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

If you set Theme.Base as a theme that is not defined the page will look like this

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.

Looking for the color codes?

Base

Theme.Base is the main config setting that affects all other settings.
If a color-setting is set as "Base" it will use the color of the Base theme.

Example:

  • Base is set as 'bluegray'
  • Colors.Main is set as 'base'
  • Theme system translates the setting to 'bluegray' (Without changing the config setting)

If a faulty color setting is used the Base color will be used instead.

Borrow colors from other Themes

Let's say you like the default graph colors, but want to use another theme like Indigo.
Indigo will try to set the graph colors as a shade of blue.

Instead of figuring the color codes for the default theme's graphs, they can be used directly:

Theme:
  Base: Indigo
...
Graphs:
    PunchCard: Default
    PlayersOnline: Default
    TPS:
      High-Threshold: 18
      Medium-Threshold: 10
      High: Default
      Medium: Default
      Low: Default
    CPU: Default
    RAM: Default
    Chunks: Default
    Entities: Default

And voilá

This applies to all settings that accept 'Base' as an option.

Custom colors

All the settings except Theme.Base accept a Html color code. This means that any setting can be set as any color.

Example: Colors.Secondary: '#ff75f3'

img

Background images

Some color settings accept image URLs as input.
Please note that when using Background images, elements such as the Plan Icon use the Theme.Base color
Colors.Main: https://www.filterforge.com/filters/11635-v7.jpg with Theme.Base: Blaze

img

Changing the Font

The font can also be changed.
By default Quicksand is in use. (https://fonts.googleapis.com/css?family=Quicksand:300,400 and '''Quicksand'', sans-serif')

If you want to use the Verdana font (Used in 3.6.4), set FontFamily: 'Verdana, sans-serif' and FontStyleSheet: ''
If you want to use another web font, set FontFamily: '''WebFontName'', sans-serif' and FontStyleSheet: 'linkToFontStyleSheet'

Pie Chart colors

Pie charts require many different colors so defining each one of them per theme would have taken a lot of time.
Instead all of the color codes can be defined directly.

Format: '"#000000", "#111"'

Clone this wiki locally