Customize CSS

Input fields example

Customize CSS is functionality in the self-service to change the background and text colors on the non-authorized pages at SPiD. Together with the client teaser functionality we provide this can be a powerful combination to make the authorization have the look-and-feel as you please.

Just follow these few steps and you will be able to change the colors in an instant:

  1. Login to the self-service by visiting self-service at Swedish/International production or Norwegian production (Note: if you are using stage/pre, use Stage/Pre environment).
  2. Select the client you wish to change the colors of.
  3. Press the "Customize CSS" and enter either a hex-based value (e.g. #ffffff) or a plain text value (e.g. pink). The fields are explained and shown below.
  4. Press save. Now your users will be presented with the colors of your choosing!

What's affected when changing the two color choices?

Input fields example

The background color

The background color is the field that simply controls the background color outside the main area. If you take a look at the first screenshot in this article you will see the background color to be in light blue.

The font color

The font color controls all the links, headers and other text outside the main area. If you take a look at the first screenshot in this article yet again you will see it presented on the blue area above in white (this includes the client header that is presented if you have no logo) and also the white links below the main area.

What is not included

Any text inside the main area is not customizeable in this feature. The only thing inside that you as a client may customize to increase user experience is the client teaser which is covered in a seperated article.

Happy styling!

Help us improve

Did you spot an error? Or maybe you just have a suggestion for how we can improve? Leave a comment, or better yet, send us a pull request on GitHub to fix it (in-browser editing, only takes a moment).

History of this page

Comments/feedback

Do you have questions, or just want to contribute some newly gained insight? Want to share an example? Please leave a comment. SPiD reads and responds to every question. Additionally, your experience can help others using SPiD, and it can help us continuously improve our documentation.