Add company logo and change K2 login form descriptions

Add company logo and change K2 login form descriptions

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.

Default login form
Default login form

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!

    New Company Logo
    New Company Logo

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.

    New Description
    New Description

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!

 

 

 

 

 

Ji Kai

Leave a Reply