Just released: Developer preview of Microsoft Teams bot integration for Now Assistant. Try with your Teams ×

Login page

The login page of Now Assistant can be customized to suit the individual look and feel of your organization. In this guide we're going to demonstrate how you can use a custom theme to add a custom background image, company logo and a favicon.

To start, navigate to Configuration → Themes section in the Workplace Manager. Here you should enable the 'Custom' theme and set it as current:

Enable the custom theme

Then, navigate to the installation folder of Now Assistant and locate the Web → Themes → Custom folder, which holds the styles and layouts for the Custom theme you've just enabled:

Navigate to custom theme folder

We'll start with a login page that looks like this:

Default login page

Changing the background image

In order to change the background image of Now Assistant's login page, first navigate to Custom → Styles folder and locate a CSS file named custom:

Styles file

This file is empty by default and it overrides the default CSS styles in our page. If we put the following code in there:

#layout-content {
    background: url('Now_Assistant_Login_Bg.jpg') no-repeat fixed center;
    background-size: cover;
}

It will set an image file named 'Now_Assistant_Login_Bg.jpg' as the background of our login page.

You can find the markup of the page we're editing in Custom → Views → 'Layout' file.

Now if we put the image in the Styles folder together with our stylesheet and refresh the browser, you should see that the background has changed:

Login screen with the changed background

A hard refresh may be required. To do a hard refresh press Ctrl+Shift+R on Windows or Cmd+Shift+R on a Mac.

To add a company logo we're going to edit the layout file in Custom → Views folder:

Editing layout file

In the layout file, we're going to insert our image:

<div id="layout-main">
        <div id="main" role="main">
        <div id="company-logo"><img src="/Themes/Custom/Styles/Logo_Toaster_group.png"></div>
        ...

Now if we move the 'Logo_Toaster_group.png' file to our Styles folder and do a hard refresh on the page:

Company logo is almost styled

Almost there, but we still need to add some CSS to position our logo in the center. We'll edit the custom.css file again:

#company-logo {
    text-align: center;
}

And voila!

Company logo on the login page

Changing the Favicon

We're going to change our default favicon, which at the moment looks like this:

Current favicon

To change it we shall navigate to Custom → Views folder and edit the layout file. Specifically, in this line:

RegisterLink(new LinkEntry { Type = "image/x-icon", Rel = "shortcut icon", Href = Url.Content("~/Themes/adenin.Theme.MPSAdmin/Styles/favicon.ico") });

We're going to replace the Url.Content from this:

Href = Url.Content("~/Themes/adenin.Theme.MPSAdmin/Styles/favicon.ico")

To this:

Href = Url.Content("~/Themes/Custom/Styles/favicon.ico")

If we move our Favicon to the specified directory (Themes → Custom → Styles) and refresh, we should see our updated Favicon:

Updated Favicon