In this article, I’m going to show you how to add company logo and change K2 login form descriptions when you are using the default K2 Claims Authentication. If you are wondering how to turn on Forms Authentication in K2, see this article.

What is the K2 login form?

When you turn on Forms Authentication on your K2 claims setup, you will get the following login form when you access K2 Designer or Runtime sites.

So what most companies would like to change here will be the logo on the top left of the form and the description below the “Sign In” header.

Where is this form located?

The Identity Service login form is located at C:\Program Files (x86)\K2 blackpearl\WebServices\Identity\Sts\Forms\Views\Account\LogIn.cshtml.

Add company logo and change K2 login form descriptions

Let’s go on into how to update the company logo and the descriptions on the login form.

Add company logo

1. Add your logo file to C:\Program Files (x86)\K2 blackpearl\WebServices\Identity\Sts\Forms\Styles\. In this example, I’m going to use a random ninjalogo.png image file.
2. Edit LogIn.cshtml indicated above and add the following line of codes to the header section.

   <header>
   ....
   
   <style>
   .header-logo {
   	background: url('../Styles/ninjalogo.png') no-repeat !Important;
   	background-size: 30px !important; <!-- change the size to fit your image -->
   }
   </style>
   ...
   </header>

3. Save the file and check out the logo on your runtime site!

   

Note:

• The default K2 logo is 122 x 25 pixels in size.
• If you want to change the favicon, you just need to update the link tag in the header section.

  <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="@Url.Content("~/Styles/Platinum/Images/Icons/K2Logo16.ico")" />

Change Sign In description/information

1. Edit LogIn.cshtml indicated above.
2. Search for the following div tag:

   <div class="SignInContent">

3. You will find the following section:

   <div class="SignInContent">
   	<div class="SignInLockImage"></div>
   	<div class="IntroText">
   		<p class='PageHeader'>@Resources.CommonActions.SignInText</p>
   		<p>@Resources.Introduction.LoginIntroductionText</p>
   		<p class='PageHelpLink'>@Html.Raw(Resources.Introduction.LoginHelpLink)</p>
   	</div>
   </div>

4. When you look at the above div section, it’s pretty obvious that if you want to change the “lock” image, change the “SignInLockImage” div. The “Sign In” text is the “PageHeader” paragraph tag and the rest accordingly.
5. In my example, I will be changing the “Sign In” header text and the body content. My section will look like this now.

   

Troubleshooting

• Make sure you place your image file in the correct folder. If not, amend the background url file path to it.
• When you are editing the description details, do not comment the resource variables (e.g. @Resource…) as it will still be evaluated and will cause an error.

Have fun!

• Author
• Recent Posts

Ji Kai

Director / Principal Consultant at Alrighty Labs Pte. Ltd.

Ji Kai is the Director and Principal Consultant of Alrighty Labs Pte. Ltd. He has over 10 years of experience in solution designing, consulting and management of software development projects in both private and public sectors. His primary responsibility is to take lead in customer engagements and use his expertise in K2 technologies to assist customers to design successful business process applications. In addition, he has proven past records of leading the successful delivery of complex business process applications on K2 and Microsoft technologies.

Linkedin

Latest posts by Ji Kai (see all)

• Multiple records inserted with RuntimeListViewRowCount option - 30 May 2017
• Friendly Error Message on K2 smartforms - 04 May 2017
• Add company logo and change K2 login form descriptions - 02 Aug 2016