Export (0) Print
Expand All

Sign-in Page Example

Dd548476.note(en-us,MSDN.10).gifNote:
This topic describes functionality that will be obsolete. This functionality is provided only to support legacy applications. Live Connect incorporates features that provide equivalent functionality.

You use three XML elements to customize the sign-in page:

  • WhiteLabelProperties—Specifies header, color, and logo customization elements that define the look and feel of the sign-in page.
  • SiteLoginUIProperties—Specifies the text content on the sign-in page.
  • StringTable—Defines all strings that are used on the sign-in page. This element is completely generic and its sole purpose is to match an ID that you have defined to the corresponding localized text.

The WhiteLabelProperties, SiteLoginUIProperties, and StringTable elements are all child elements of an Application element. The following is an example of these three elements.

<Application>

<!-- White label properties define the look and feel for the sign-in 
     page, including header customization, colors on the page, and logo. -->
   <whitelabelproperties>

<!-- This property defines the URL of your application's logo. You do 
     not have to define the actual URL here. It must be defined in the string table. -->
      <Logo>STRID_LOGO</Logo>

<!-- This property defines the URL (SSL) of your application's logo. -->
      <LogoSSL>STRID_LOGOSSL</LogoSSL>

<!-- This property defines the alternative text for your application's logo. -->
      <LogoAltText>STRID_LOGOALTTEXT</LogoAltText>

<!-- This property defines the URL of the header background. -->
      <HeaderBkgndImage>STRID_HEADER_BKGND_IMAGE</HeaderBkgndImage>

<!-- This property defines the color of header. Image is used first; if no image, the color is used. -->
      <HeaderBkgndColor>#FFFFFF</HeaderBkgndColor>

<!-- This property defines the background color of the sign-in page. -->
      <BkgndColor>#FFFFFF</BkgndColor>

<!-- This property defines the color of fonts used in the footer section of the sign-in page. -->
      <FontColorLight>#b5781e</FontColorLight>

<!-- This property defines the color of hyperlinks. -->
      <FontColorLink>#b5781e</FontColorLink>

<!-- This property defines the color of the Sign in and Sign up buttons -->
      <ButtonColor>#9EB39B</ButtonColor>

<!-- This property defines the border color of the buttons. -->
      <ButtonBorder>#336633</ButtonBorder>

<!-- This property defines the color of fonts on the page. -->
      <FontColor>black</FontColor>

<!-- This property defines the color of the user tiles. -->
      <UserTileColor>#C6D6B9</UserTileColor>

<!-- This property defines the font color of the Windows Live value-proposition statement. -->     
      <WLIDValuePropFontColor>Color</WLIDValuePropFontColor>
   </whitelabelproperties>

<!-- Site-login UI properties define the content (text) on the sign-in 
     page. You can configure four UI properties: contextual header 
     statement, title (of the product/service), subtitle (description 
     of your product/service), and an optional image that appears in 
     the product-description section. Each of these four properties has 
     an ID associated with it. You can define multiple versions of 
     title, subtitle, header and image, and call the appropriate 
     version by passing a parameter called wlcxt in the query string. 
     Actual strings are defined in the string table (see below). These 
     properties are optional and you can choose not to define them. -->
   <siteloginuiproperties>
      <Header id="default">STRID_WL_DEF_HEADER</Header>
      <Title id="default">STRID_WL_DEF_TITLE</Title>
      <Subtitle id="default">STRID_WL_DEF_SUBTITLE</Subtitle>
      <ImageURL id="default">STRID_WL_DEF_IMAGEURL</ImageURL>
      <SSLImageURL id="default">STRID_WL_DEF_SSLIMAGEURL</SSLImageURL>
            
      <Header id="var1">STRID_WL_VAR1_HEADER</Header>
<Title id="var1">STRID_WL_VAR1_TITLE</Title>
      <Subtitle id="var1">STRID_WL_VAR1_SUBTITLE</Subtitle>
<ImageURL id="var1">STRID_WL_VAR1_IMAGEURL</ImageURL>
<SSLImageURL id="var1">STRID_WL_VAR1_SSLIMAGEURL</SSLImageURL>
   </siteloginuiproperties>

<!-- The string table defines all the strings that you plan to use in the site-login UI properties in different locales. -->
   <stringtable>
      <Language langID="en">
<!-- Display name is the name of your application. -->
<String id="STRID_DISPLAYNAME">Windows Live ID</String>
      <String id="STRID_WL_DEF_HEADER">
         Sign in with your Windows Live ID
      </String>
<String id="STRID_WL_DEF_TITLE">
         Windows Live ID
      </String>
<String id="STRID_WL_DEF_SUBTITLE">
         With Windows Live ID, you can access more services.
      </String>
<String id="STRID_WL_DEF_IMAGEURL">
         www.fabrikam.com/myimage.jpg
      </String>
<String id="STRID_WL_DEF_SSLIMAGEURL">
         www.fabrikam.com/myimage_ssl.jpg
      </String>

      <String id="STRID_WL_VAR1_HEADER">
         Sign in to access your account details
      </String>
<String id="STRID_WL_VAR1_TITLE">Windows Live</String>
<String id="STRID_WL_VAR1_SUBTITLE">
         We're ready to get started--just supply your Windows Live ID.
      </String>
<String id="STRID_WL_VAR1_IMAGEURL">
         www.fabrikam.com/myimage_var.jpg
      </String>
<String id="STRID_WL_VAR1_SSLIMAGEURL">
         www.fabrikam.com/myimage_ssl_var.jpg
      </String>

      <String id="STRID_LOGO">
         http://shared.live.com/WindowsLive.png
      </String>
<String id="STRID_LOGOSSL">
         https://shared.live.com/WindowsLive.png
      </String>
<String id="STRID_LOGOALTTEXT">Windows Live</String>
      <String id="STRID_HEADER_BKGND_IMAGE"></String>
      </Language>
   </stringtable>
</Application>

Other Resources

Live Connect

Show:
© 2014 Microsoft