This article was created in response to a support issue logged with K2. The content may include typographical errors and may be revised at any time without notice This article is not considered official documentation for K2 software and is provided “as is” with no warranties.

Objective

This is a quick document on which files will be affected, and where to make the changes to create a custom login page.

This document will outline how to change the “Lock” image, add a custom Company Logo and to change the Text on the Sign In section.

Before You Begin

Keep a backup of the following files just in case you require rolling back:

\K2 blackpearl\WebServices\Identity\Sts\Forms\Views\Account\LogIn.cshtml

\K2 blackpearl\WebServices\Identity\Sts\Forms\Styles\Platinum\CSS\login.css

\K2 blackpearl\WebServices\Identity\Sts\Forms\App_GlobalResources\Introduction.resx

\K2 blackpearl\K2 smartforms Runtime\_trust\login.aspx

\K2 blackpearl\K2 smartforms Runtime\Styles\Platinum\CSS\login.css

\K2 blackpearl\K2 smartforms Runtime\App_Globalresources\Introduction.resx

How-to Steps

STEP 1

All custom images can be saved into the following folders:

\K2 blackpearl\WebServices\Identity\Sts\Forms\Styles\Platinum\Images\Icons

\K2 blackpearl\K2 smartforms Runtime\Styles\Platinum\Images\Icons

Here you can see 2 images that I will be using in the example:

Image

An image size of 96 x 96 works great in this example

STEP 2

To make changes to the “Lock” on the Login pages navigate to the following files:

\K2 blackpearl\WebServices\Identity\Sts\Forms\Styles\Platinum\CSS\login.css

\K2 blackpearl\K2 smartforms Runtime\Styles\Platinum\CSS\login.css

Search for the following:

“.SignInContent .SignInLockImage”

Locate the image URL and change it to the file name of your Lock Image:

Image

STEP 3

To add a Custom Company Logo add a section in the following files:

\K2 blackpearl\WebServices\Identity\Sts\Forms\Styles\Platinum\CSS\login.css

\K2 blackpearl\K2 smartforms Runtime\Styles\Platinum\CSS\login.css

.SignInCompContent .SignInCompanyImage,

.SessionContent .SignInCompanyImage

{

                width: 100px;

                height: 99px;

                background: url(../Images/Icons/k2LoginLogo.png) no-repeat transparent;

}

Change the “k2LoginLogo.png” to the Company Logo image in the Icons folder

In the following files make the following changes:

\K2 blackpearl\WebServices\Identity\Sts\Forms\Views\Account\LogIn.cshtml

\K2 blackpearl\K2 smartforms Runtime\_trust\login.aspx

Search for the following:

<div class="SignInForm">

Add the following text below it:

<div class="SignInCompContent">

     <div class="SignInCompanyImage"></div>

</div>

STEP 4

To change the text next to the Lock on the Select Login Method page, open the following file:

\K2 blackpearl\WebServices\Identity\Sts\Forms\App_GlobalResources\Introduction.resx

Search for the following:

“Sign in with your user name and password to access this site. If you do not have access, contact your administrator.”

Change this text to the desired text

To change the text next to the Lock on the Forms STS Login Page , open the following file:

\K2 blackpearl\WebServices\Identity\Sts\Forms\App_GlobalResources\Introduction.resx

Search for the following:

“Sign in with your user name and password to access this site. If you do not have access, contact your administrator.”

Change this text to the desired text.

STEP 5

Save all the files that was changed and refresh the Browser.

Image