Logos, Fonts, Colours: Theming Agilicus AnyX

Agilicus AnyX supports personalising the sign-in and usage environment to match your corporate brand. This is more than just asthethic: a consistent look and feel helps train users to reduce the likelihood of a successful spear-phishing attack.

Setting up your theme on Agilicus AnyX is quite simple. The basic steps are:

1. Download template
2. Modify template
3. Test locally in browser
4. Upload template
5. Test live

So lets get started. Before you start, you will want 3 files that can often be found on your company website:

1. favicon.png. This should be a square-aspect ratio, usually 256×256 or 512×512, of your company logo. It will show in a browser tab.
2. logo.png. This should be rectangular in size, approximately 1600×300 resolution. This will show in Profile in place of the Agilicus logo. We recommend a transparent background, and a foreground that will look proper with a blue background (#0057b8).
3. my-login.svg. This should be a square-aspect ratio svg, it will show in Profile in place of the Agilicus logo. The foreground should work with a blue background (#0057b8)

Once you have downloaded and unpacked this file, you will see the below contents. Do not change files other than in the theme directory (your changes will be ignored by the system). Overwrite the favicon.png and logo.png files in the theme directory. You may now proceed to testing.

├── agilicus_error.html
├── approval.html
├── challengedeclined.html
├── endsession_prompt.html
├── error.html
├── footer.html
├── header.html
├── index.html
├── login.html
├── mfa.html
├── oob.html
├── password.html
├── README.md
├── scripts
│   ├── end_session.js
│   ├── login.js
│   ├── mfachallenge.js
│   ├── password.js
│   └── wasthisyou.js

├── static
│   ├── font
|   |    . . .
│   ├── img
│   │   ├── apple-icon.svg
│   │   ├── bitbucket-icon.svg
│   │   ├── coreos-icon.svg
│   │   ├── email-icon.svg
│   │   ├── github-icon.svg
│   │   ├── gitlab-icon.svg
│   │   ├── google-icon.svg
│   │   ├── ldap-icon.svg
│   │   ├── linkedin-icon.svg
│   │   ├── microsoft-icon.svg
│   │   ├── oidc-icon.svg
│   │   ├── saml-icon.svg
│   │   └── yahoo-icon.svg
│   ├── index.html
│   └── main.css

├── theme
│   ├── favicon.png
│   ├── logo.png
│   ├── my-login.svg
│   └── styles.css
└── wasthisyou.html

Testing Your Changes

On your desktop, in the directory you have unpacked the files, there is a file ‘index.html’. Double-click this, it should open in your browser. You can now see a list of links to the various pages, try each one to assess your changes. You may edit the styles.css and reload in the browser to iterate.

Once you are satisfied with your changes, proceed to the re-pack and re-upload.

Upload Template

Custom fonts

You may add your own fonts. To do so, we will do these steps:

1. Create a font-face entry in theme/styles.css
2. Add font-files to theme/my-font/
3. Adjust h1/body entries in theme/styles.css to reference your font

@font-face {
    font-family: 'My Font';
    src: url('/static/theme/my-font/my-font.woff2') format('woff2'),
        url('/theme/my-font/my-font.ttf') format('truetype'),
    font-weight: 900;
    font-style: normal;
}

Once you have added your font, in theme/styles.css, you might change these two lines:

h1,h2,h3,h4,h5,h6{font-family: 'My-Font';}
body{font-family: 'My-Font';}

Next Steps, Other Ideas

You might consider modifying the styles.css to set a background image, to change hover behaviour, etc.

To change the background image and colours, consider e.g. put an image called ‘background.jpg’ in the theme dir, then add a background-color/image/repeat to body or navbar as appropriate:

.theme-body {
  background-color: beige;
  background-image: url("background.jpg");
  background-repeat: no-repeat;
}
...
.theme-navbar {
  background-color: beige;
}

Update Footer

The default footer is an empty ‘div’ with class theme-footer, you may modify this in your styles.css if you wish.

.theme-footer::after {
  content: "I AM A FOOTER";
  color: white;
}