LID Look and Feel

From LID Wiki

The LID Look and Feel addresses the following questions:

1. How does a LID Relying Party (such as a web page) that accepts LID digital identities convey that fact to a casual user? For example: is there a login dialog on the page?
2. How does a client of a LID Relying Party (such as a user browsing the web) know whether or not the LID Relying Party can currently identify them, and if so, using which of their Personas (aka LID URLs)? For example: is there a status icon?
3. How does a client initiate identification and authentication once they have decided they want to identify themselves to a LID Relying Party? For example: how does the user know which button to press?
4. How does an identified, authenticated client “log out” from a LID Relying Party and become anonymous again?

NetMesh recommends the following best practices.

• Each LID Relying Party shows the green version of the small logo on each page that can do so.
• If the user is currently identified, it shows the LID of the user as the LID Relying Party knows them (e.g. http://lid.netmesh.org/liddemouser/ )
• If the user is currently anonymous, it says "anonymous" (e.g. Anonymous )
• When clicked, the LID Relying Party either shows a screen that allows the user to identify themselves, or makes the user anonymous again (depending on the previous state).

To make a common look and feel easier across implementations, we provide the following CSS style sheets.

• http://lid.netmesh.org/css/lid.css (for all browsers)
• http://lid.netmesh.org/css/lid-ie-fixes.css (for Internet Explorer 5.5 and higher. Uses this hack.)

Use in a manner similar to this in your HTML header.

  <link rel="stylesheet" format="text/css" href="http://lid.netmesh.org/css/lid.css">
<!--[if gte IE 5.5]>
  <link rel="stylesheet" format="text/css" href="http://lid.netmesh.org/css/lid-ie-fixes.css">
<![endif]-->

For the anonymous user looking at your LID-enabled page, the appropriate HTML should look like this:

<div id="identity">
 Anonymous&nbsp;user&nbsp;<a href="?lid=&lid-action=authenticate"
    title="Click here to identify yourself with your LID personal digital identity."><img
    src="http://lid.netmesh.org/images/lid-relying-party-anonymous.gif" 
    alt="[LID enabled]"></a>
</div>

For a known user (e.g. Mr. LID Demo User), it should be:

<div id="identity">
 Authenticated&nbsp;as:&nbsp;<a href="http://lid.netmesh.org/liddemouser" target="lid"
 title="Go to your own LID home page.">http://lid.netmesh.org/liddemouser</a>&nbsp;<a href="?lid="
 title="Click here to immediately log off from this web page and become anonymous again"><img
  src="http://lid.netmesh.org/images/lid-relying-party-authenticated.gif" alt="[LID authenticated]"></a>
</div>

You can insert this code anywhere in your HTML, as long as it is a direct child of the body tag.