Customizing SharePoint Log in For ExCM - Part 2 HTML Edits

In the first part of this series, we showed you how to make a copy of the default SignIn.aspx and copy it into a new folder for editing purposes. We also showed you how to change the text from "Sign in using Windows Authentication" to "ACME Employees Click Here To Sign In." We have many customers that would like to further customize the screen to more closely match their companies' branding. Using this guide, you too should be able to customize the sign-in screen with graphics, links and finishing touches to truly personalize your sign-in page.

One of the first ways to really make your log in page identifiable as yours is to add your company's logo to it. First, you need to obtain the image file you wish to use and place it in the /_layouts\ACME folder.

Or perhaps you named it with your organization's name via C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\ACME, as discussed in the previous blog post.

While in the folder, make a copy of the SignIn.aspx page. Now that you have a back-up copy of the file, open the SignIn.aspx page. Scroll down to the section of the SignIn.aspx page where you want the image to be displayed (see image below) and create an image HTML tag "<img src="url" alt="some_text">". For the source "src," you will need to place the path to the image and some text will be added in case the image does not show correctly. My tag will look like "<img src="C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\ACME\ppslogo.png" alt="PremierPoint Solutions">"

Now you should be able to browse out to your log in page and see your image:

But I do not like the image where it is currently. So, I am going to move the image below the "Sign Up" button. To do so, I simply move the Image HTML tag further down in the SignIn.aspx page. If we move the same tag down two lines as seen here:

You will get:

Now I would like to move the image down the page more and not have it quite so close to the "Sign Up" button. To do so I am going to add some padding using the following code:

This will move my image further down the page and give me the look I was going for:

Now that it looks pretty let's make it do something. Maybe we should turn the image into a link back to our website. To accomplish this, we simply need to add the following HTML in front of the image tag:

<a href="http://www.PremierPointSolutions.com" target="_blank">

It should look like this:

Now, when someone browses to our ExCM login site, if he or she clicks on the company logo, it will take that person to our website.

With a little bit of HTML, we have been able to transform the Extranet log in page from an advanced, but plain, one to a log in page that can be quickly identified as our company's

 The company log in page is equipped with your wording (as learned from part 1 of this series) and your logo with a link back to your company's site - positioned where you want it on the screen.

Continue reading part three of this series (coming soon) to learn more about advance customization of the log in page to include adding videos as well as editing the master page to add colored borders.