How to include the Header into your service

Add a script element in the head of your HTML document:

<script type="text/javascript" src="$RPS_HEADER_JS_URL"></script>

Add a header element for the header in the body of your HTML document:

<header id="rps-header" class="rps-header"></header>

(recommended) Add a hint in form of a data-user-logged-in attribute for the header with the current login (true or false) status according to your application:

<header id="rps-header" class="rps-header" data-user-logged-in="true"></header>

(optional) Add a footer element for the footer in the body of your HTML document:

<footer id="rps-footer" class="rps-footer"></footer>

(optional) Adjust the header’s look for your service. The header reads a small set of CSS custom properties; set them per service and they inherit through the Shadow DOM into the header. Unset tokens keep the standard RPS defaults. The easiest way is data-rps-* attributes on the header element (the loader mirrors each data-rps-<name> onto the matching --rps-<name> variable):

<header id="rps-header" class="rps-header"
        data-rps-header-bg="#004b87"
        data-rps-header-fg="#ffffff"
        data-rps-header-height="3rem"></header>

You can also set the --rps-header-* variables directly on the #rps-header element (or any ancestor) via your own CSS if you prefer.

The logo on the left is a link to the RPS homepage. It is the same for every service and needs no configuration on your side.

Notify the Administrators of the RPS that they should add your service to rps_header_allowed_origin in the Ansible site config repo so the login status on your site will be displayed properly.

look up the source of this page to see an example