pixolino Settings: Configurable styles

You may want to offer users the choice to customize your template, for example by choosing different fonts or colors. To do this, you need to create a "style". A style can be either a font or a color. For both types of styles, you will have to configure a default value that is used if it is not overridden by a website.

For fonts, you can choose the font itself, the font style and the font weight. For the font itself, you can choose one of our preconfigured fonts. If you wish to use a font that we do not support yet, please get in touch with us.

For colors, you can only choose the default color. Any color definition supported by CSS (#xxxxxx, #xxx, rgb() and rgba()) is supported.

​Example

As an example, consider the following case:

  • You need two colors, the main color and the accent color, to be configurable by the user.
  • You want to use different fonts for the menu and the content itself.
In this scenario, you would configure two colors (for example, "mainColor" and "accentColor") and two fonts ("mainFont" and "menuFont"). For each of these settings, choose defaults that will look good for most users.

In your CSS code, you would refer to the colors using the %COLORNAME% placeholder, where COLORNAME is the name of the color you configured earlier.

For each font, you have three placeholders available: %FONTNAME.font%, %FONTNAME.style%, and %FONTNAME.weight%.

When a website using your template is rendered, the placeholders wil be replaced by the values configured by the website's designers, or by your default values if the designers did not override them.

Here is what the CSS could look like for the example above:

header {
    background-color: %mainColor%;
    border-bottom: 2px solid %accentColor%;
}

nav {
    font-family: "%menuFont.font%";
    font-weight: %menuFont.weight%;
    font-style: %menuFont.style%;
}

body p {
    font-family: "%mainFont.font%";
    font-weight: %mainFont.weight%;
    font-style: %mainFont.style%;
}

Please keep in mind that you have to wrap the %FONTNAME.font% placeholder in quotes, otherwise it won't work if the font name contains spaces.

As you can see, configuring styles is easy and allows users to create unique websites with almost no additional effort during template development.