Styling HPI for Clients - tsgrp/HPI GitHub Wiki

Using Stylus, it is easy to override and extend default HPI styles to create a theme for your client. You are able to override the default colors and logos, as well as add your own styles for custom client modules and actions.

To do any of the following, first create the folders assets/css/styles in your client project folder. Example: {HPI_ROOT}/project/my-client-project/assets/css/styles

Overriding Colors (and Other Variables and Mixins)

To override default variables or mixins, copy {HPI_ROOT}/assets/css/styles/core.styl to your project. Change any variables for your client.

Overriding the HPI Logos

HPI Logos Screenshot

To override the HPI logo on the login page and in the top left corner of the app first:

  1. Create the folder structure assets/css/styles/img in your project folder.

  2. Create two logos for your client, each with the same height (in px) as {HPI_ROOT}/assets/css/styles/img/logo-small.png and {HPI_ROOT}/assets/css/styles/img/logo-small-light.png.

Then you have two options:

  1. Option 1: Save the logos with the same names as the core logos (logo-small.png and logo-small-light.png) and save them in the client img folder you just created.

  2. Option 2: If you want to rename the logos with your client name, save them in your img folder and in your {clientname}.styl, add the following:

    div.navbar div.logo-and-loading .nav-logo {
	background-image: url('styles/img/{clientlogonamesmall}.png');
}
body.login div.login-form div.login-form-logo {
	background-image: url('styles/img/{clientlogonamelight}.png');
}

Overriding the Favicon

HPI Favicon Screenshot

To override the 'H' favicon, create the assets/img folders in your client project folder. Then create a favicon.ico file that is the same size as the default favicon and place it in the img folder.

Creating Styles for Your Client's Modules and Actions

If you have client-specific modules, actions, or general CSS overrides, do not add your styles in core stylus files. Instead, create the file {yourclientname}.styl in the styles folder you created above. Copy {HPI_ROOT}/assets/css/client.css to your project css folder and add the following import:

@import "styles/{yourclientname}.styl";