Customizing the SharePoint Sign-in Page For ExCM in SharePoint 2013 - Part 1

There are products you buy and they are perfect just the way they come. Then, a SharePoint Admin gets their hands on it and makes it more perfect (yes, I said more perfect) by adding their personal touches to it. For an example of this, let me introduce you to the default SharePoint Sign In page:

For the minimalist/functionalist out there, how could there be anything better than this provided sign in? It does the job that is needed without all the frills, thrills and extras. It reminds me of growing up when we never had an ice maker in the refrigerator. My father always claimed it was, "Just one more thing to break!" But he was not the one that had to refill the ice trays and try to avoid spilling them everywhere. My point is, sometimes we want a bit more functionality and personalization. That is why Extranet Collaboration Manager (ExCM) ships with an optional sign in page located here:

After changing this setting you should see this new log in page if you browse to your extranet site:

Please note that the above image reflects the anonymous feature activated. (See the article on allowing anonymous users access to your extranet for further information.)

In my opinion, this is a nicer page than the one that ships with SharePoint, but you may still have some improvements in mind that need to be made. If you have plans to add this to your company's website, you may wish to make it have the same color scheme. Perhaps you want to add your companies logo or embed a video in the log in screen; well, we want you to be able to do this as well. By following these steps, and those listed in the follow-up blog posts, you should be able to customize your sign in page to create a look and feel that is unique and closely reflects your organizations brand.

The first thing you need to do is make a copy of the existing page and palce it in a new folder. We typically call this the "Organization Layout Directory" because it's simply creating a new folder under the "15\TEMPLATE\LAYOUTS" directory that we can use for customized pages. You will need to navigate to the following:


C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS

Once there, click on "New Folder" and name it, perhaps using your company's name or acronym. For this example, I will be working with ACME Co.

Next, you will need to make a copy of the existing page and place it in your new folder. To do so, navigate to:

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\SPSolutions\ExCM

Now, find the "SignIn.aspx" page and copy it:

After copying the page, paste it in the new Organization Layouts Directory (ACME in our example):

Now you can edit your page using Notepad, or another editor. The first thing we are going to change is the wording for Windows Authentication sign in:

If we wanted this to read, "ACME Employees Click Her To Sign In" we will need to add this text to two sections of the SignIn.aspx  file:

Visible="False"

The first command simply hides your existing "Sign In Using Windows Authentication" link, and the second adds your custom text. The "padding" tag moves the text down and away from the "Sign In" button for aesthetic reasons.

Once the file is saved, change the location of the custom sign-in page within Central Administration. To do this, click on "Manage Web Applications," choose your Web Application and then select "Authentication Providers" from the top ribbon area. Now, click on your zone (I only have the single "Default" one):

Now scroll down to the area where you will define the path for your sign-in page. For this example, we created our Organizational Layouts directory under the Layouts folder, so we will only need to add "ACME" between "\_layouts" and "\signin.aspx", replacing the "\spsolutions\ExCM" currently in there:

Now, save your settings and bring up the sign-in page:

Changing the wording is just the first step in customizing your sign-in page. Continue to  part two - HTML Edits of this blog to learn more about the different sections of the SignIn.aspx and how small changes here can have a big impact on the overall look of your sign-in page.