Skinning the Live ID login screen

I’ve been wanting to do this for a while and finally got round to it yesterday… I can now confirm it definitely works 😀

As per the last post get started with your app ID and then head over to Services Manager

https://msm.live.com/app/

Set up you app ID, Click Customise sign in, agree to the terms and then download the template file to get started…

I found this file didn’t format nicely in any of my usual editors (Notepad, Notepad:2 or Expression Web) but then found the incredibly useful XML Notepad which makes life a lot easier…

http://www.microsoft.com/downloads/details.aspx?familyid=72d6aa49-787d-4118-ba5f-4f30fe913628&displaylang=en

Open the XML file up and you’ll find 3 folders under Application. For the most part you want to edit the StringTable area, when editing the template file it’s the 2nd folder under there as the first is in Spanish!

WhiteLabelProperties are where you set up the colour scheme, nice and easy hex values to edit there. Only thing to mention here is that if you want to customise the top background header it doesn’t work as a string ID so you need to create a new Element called HeaderBkgndImageSSL to match up with HeaderBkgndImage and put the image location there. See this link for the discussion and more info…

http://social.msdn.microsoft.com/Forums/en-US/wliddev/thread/8ac45523-2a10-4e3e-aa68-85dbbbe619ea

The string IDs are fairly self explanatory but for reference the ones you want are…

STRID_LOGO – does the top logo along with the title text (I used this)

STRID_LOGOSSL – same as above for SSL connections

STRID_WL_DEFAULT_TITLE – sits on the left hand side as the title for the intro text underneath

STRID_WL_DEFAULT_HEADER – the title text next to STRID_LOGO

STRID_WL_DEFAULT_SUBTITLE – I call this the intro text, goes on the left hand side of the login fields and serves as a good way to state the benefits of logging in. If you look in the XML guide you can use bullet icons here that help the design, see the example below for 4 bullets and text

##li14##Access your course materials and resources online##li22##View your email and communicate with fellow students##li23##Store documents online with SkyDrive##li16##Use Microsoft Office online to create and edit documents

The titles, display name etc are pretty obvious so don’t need much explanation there.

When done save the XML file and re-upload using MSM… sometimes the page comes up with an upload success and error at the same time, usually the success is the one you want to believe so don’t worry there! Refresh your login screen and you’re done! Just remember to serve any custom images over https or your users will get security warnings on the login page…

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: