Statusfy Documentation

Theme Customization

The look of Statusfy can be easily updated with a StyleSheet, also you easily can change the logo and icon if your System, among other things.

Styles

The look of Statusfy can be easily changed with a StyleSheet located at theme/default/style.{css, less, sass, scss, styl, stylus}.

CSS

Using a CSS file (theme/default/style.css) is the simplest way to customize the styles. You can change the predefined CSS variables or extend the existing styles with any CSS instruction without extra dependencies.

These are the available CSS variables:

Variable Default Value
--transparent
  transparent
--black
  #1b1f23
--grey-darkest
  #586069
--grey-darker
  #6a737d
--grey-dark
  #959da5
--grey
  #d1d5da
--grey-light
  #e1e4e8
--grey-lighter
  #f6f8fa
--grey-lightest
  #fafbfc
--white
  #ffffff
--blue
  #0366d6
--purple
  #6f42c1
--green
  #28a745
--orange
  #f66a0a
--red
  #d73a49
--yellow
  #ffd33d
--font-family-sans-serif system-ui, -apple-system, Segoe UI,
Roboto, Ubuntu, Cantarell, Noto Sans,
sans-serif, BlinkMacSystemFont,
-apple-system, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans,
Droid Sans, Helvetica Neue, sans-serif
--font-family-monospace Menlo, Monaco, Consolas,
Liberation Mono, Courier New, monospace

TIP

Statusfy includes support for postcss-preset-env, so you can use any modern CSS instructions from here: PostCSS Preset Env Features.

Sass, Less, and Stylus

If you want to use another CSS preprocessor, Statusfy supports styles from Sass, LESS and Stylus. But take into consideration that you must install extra Node.js dependencies:

CSS Preprocessor Extension(s) Dependencies
Less less less-loader and less
Sass/SCSS sass or scss sass-loader and node-sass
Stylus styl or stylus stylus-loader and stylus

For example, if you want to extend the Statusfy style using Stylus, install first the dependencies in your project:

npm install --save-dev stylus-loader stylus

# or 
yarn add -D stylus-loader stylus

and then define your custom style in theme/default/style.styl or theme/default/style.stylus.

Assets

You can replace the default logo placing an image at the location theme/default/img/logo.svg. The supported formats are: png, jpg, gif and svg.

Icon

The Icon of the application must be placed at theme/default/img/icon.png and it's used to generate favicons and the App Icons. It should be a square image in PNG format with a minimum size of 512px.

Public

You can define static files in the public/ directory that will be mapped to the / URL path. For example:

  • You can create a Robots.txt file in /public/robots.txt that will be mapped as /robots.txt.
  • Or paste a verification file in /public/google4ddabfacdb4f6795.html that will be available in your site at /google4ddabfacdb4f6795.html

The external links located at the footer of each page can be customize. There only three links you can define: home, contact, and support. More information in the Config Reference Guide.

← Progressive Web App (PWA) →