CSS Practice Templates


We're Moving ... Again

Yes, the Identity Cloud documentation is once more on the move. And this time we're headed to two different locations:

As for the Education Center, well, the Center itself will disappear on July 23rd. We apologize for any inconvenience, but we look forward to becoming a full-fledged member of the Akamai family.
 

One of the (many) advantages of using Hosted Login is your ability to customize your login, registration, and user profile screens. For example, by default the Account Security screen looks something like this:

That's a very nice screen ... provided you work for Akamai. But, as we just noted, its easy to changed the default branding and theming: all you need to do is create your own CSS file and then point your API client towards that file. Child's play.

Well, OK, except for one thing: how do you test your custom CSS file? After all, Hosted Login screens don’t reside on your local computer (or your local website); instead, Akamai maintains those screens for you. Furthermore, your Hosted Login screens are generated dynamically: you can’t get a copy of the Password Reset page simply because there isn’t Password Reset page. Instead, the Password Reset screen is dynamically generated whenever someone clicks the Forgot Password? link.

In other words, short of connecting Hosted Login to your new CSS file and keeping your fingers crossed, how can you know, in advance, what your newly-redesigned screens are going to look like? It's easy to make changes to a CSS file. Visualizing exactly what those changes will look like is a little harder.

Fortunately, we have a workaround for you. (It's not the ideal solution, but iy will help you get started at least.) What we’ve done is create page templates for the following Hosted Login screens:

  • Login Screen
  • Registration Screen
  • Reset Password Screen
  • Manage User Profile Screen
  • Personal Data Screen
  • Account Security Screen
  • Privacy Settings Screen
  • Logout Successful Screen

These templates use the same CSS styles and classes as Hosted Login uses. And, for the most part, they mimic the look of the actual Hosted Login screens reasonably well. For example, here’s the “real” Account Security screen (on the left) and the “fake” Account Security page (on the right):

As you can see, the identity provider buttons aren’t quite the same but, other than that, it’s not too bad.

Note. Couldn’t we have made the identity providers look a little bit more alike? Yes, we could have. However, that would have required us to include some additional CSS (and probably some additional HTML) that Hosted Login doesn’t employ. Because the point here is to test CSS effects, we decided to leave the existing styles and classes as they are and not add anything new.

Best of all, the templates actually work as advertised. For example, here’s the fake Account Security screen after we’ve made a few changes to the default CSS file:

Note. You’re entitled to your opinion. But we like the way it turned out.

The important thing is this: you can make any changes you want to the default CSS file, then you can view the effect of those changes within seconds. And without having to work with your live version of Hosted Login. 

Here’s how the process works:

  1. Go to the Templates section of this documentation and copy the template you want to play with. 
     
  2. Open a text editor, paste in the copied HTML markup, and then save your new HTML file. Note that this doesn’t have to be published to the Internet; saving the HTML file to your local computer is perfectly fine.
     
  3. Do the same thing with Style.css, the default Hosted Login stylesheet: copy the stylesheet, paste it into a text editor, and then save the file (as Style.css) to the same location as you saved your HTML pages.

    OK, technically, you don’t have to save the file as Style.css, and it doesn’t have to be in the same location as your HTML pages. However, each HTML page is hard-coded to look for Style.css in the same folder. If you want to do something different, you’ll have to edit the stylesheet link in the page’s HTML markup. For example:
<link rel="stylesheet" href="my_renamed_style.css">

That’s all you have to do. From there you can begin modifying styles and classes all you want. After you’ve made a few CSS changes, simply save those changes and then open the HTML file in a web browser. If you end up doing something too crazy and now have a gigantic mess that you can’t seem to recover from, well relax: just download a new copy of Style.css and start over.

A few words of caution before you begin:

  • Although you can change the HTML in the templates, there’s really no point in doing that: after all, there’s currently no way for you to change the real HTML in Hosted Login. The one exception to this is any part of a Hosted Login screen that’s driven by the flow rather than by CSS. For example, the fields displayed on the registration screen are determined by the flow:



    Those fields can be customized by modifying the flow; for example, you could ask the user for their cell phone number as part of registration. To mimic this effect, add an additional input field to the registration HTML. For example
<p>Cell Phone</p>
<p> <input type="text" size="40"">
</p>

When you look at your registration screen now, it should look like this:

But that's about as far as you can go, at least with HTML.

  • Somewhat-cursory testing suggests that the templates work pretty well. However, we don’t guarantee that these templates can do everything a real Hosted Login screen can do: it’s possible you could make a change in the CSS file only to discover that the element you just changed doesn’t actually show up in any of the templates. We apologize for that but, then again, you get what you pay for, right?
     
  • You don't need to have Hosted Login to use these templates. For example, suppose you’d like to put together a presentation aimed at convincing management to switch to Hosted Login. As part of that demo, you’d like to show Hosted Login screens that use your colors and your logo and your branding. Well, here you go.
     
  • This is not intended to be our long-term testing and development solution. But you might find it useful for the time being.


HTML Templates

Following are the HTML templates that mimic the look of the Hosted Login screens.

Login Screen
 


<!doctype html>
<html class="no-js" lang="">
<head>
  
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#fafafa">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700|Roboto" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="/gizmo/static/favicon.ico" type="image/x-icon">
</head>
<body>
  <div id="main-container">
    <div id="floating-container">     
    <div id="header-container">
        <img id="logo" src="https://www.akamai.com/us/en/multimedia/images/logo/akamai-logo.png" alt="logo" />     
    </div>
      <div id="content-container">       
<div id="janrainCaptureWidget">
  <div id="initialLoadScreen">
    <!-- This exists just to keep the widget happy -->
  </div>
<div id="signIn">
  <div class="auth-screen">
    <h1 class="screen-heading">Welcome to Gizmo!</h1>
    <div class="social-signin">
      <p>Sign in to reap all the benefits of this fantastic website.</p>
      <div class="social-login-buttons">
      <button class=".social-login-buttons button.facebook">Facebook</button>
      <button class=".social-login-buttons button.google">Google</button>
      <button class=".social-login-buttons button.linkedin">LinkedIn</button>
      <button class=".social-login-buttons button.twitter">Twitter</button>
      <button class=".social-login-buttons button.myopenid">myOpenID</button>
      </div>
    </div>
    <hr>
    <div class="traditional-signin">
      <h2>Or Sign In with Email</h2>
    <p>Email Address</p>
     <p> <input type="text" size="40"">
      </p>
   <p>Password</p>
     <p> <input type="text" size="40"">
      </p>
        <div class="form-action-buttons">
          <button type="submit">Sign In</button>
          <a href="#" class="forgot-password-link aic-control" data-render-screen="resetPasswordRequest">Forgot Password?</a>
        </div>
    </div>
  </div>
  <div class="footer-container">
    <p><a href="#" class="aic-control" data-action="cancel">Cancel Request</a></p>
    <span>Not a member?<a href="#" class="aic-control" data-render-screen="traditionalRegistration"><u>Sign up for an accout.</u></a></span>
  </div>
</div>
</div>
      </div>
    </div>
  </div>
</body>
</html>

Registration Screen
 


<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#fafafa">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700|Roboto" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="/gizmo/static/favicon.ico" type="image/x-icon">
</head>
<body>
  <div id="main-container">
    <div id="floating-container">     
    <div id="header-container">
        <img id="logo" src="https://www.akamai.com/us/en/multimedia/images/logo/akamai-logo.png" alt="logo" />     
    </div>
      <div id="content-container">       
<div id="janrainCaptureWidget">
  <div id="initialLoadScreen">
    <!-- This exists just to keep the widget happy -->
  </div>
  <div id="socialRegistration">
  <div class="auth-screen">
    <h1 class="screen-heading">Create a New Account</h1>
    <p>Display Name</p>
     <p> <input type="text" size="40"">
      </p>
    <p>Email Address</p>
     <p> <input type="text" size="40"">
      </p>
         <p>Cell Phone</p>
     <p> <input type="text" size="40"">
      </p>
    <p>Desired Password</p>
     <p> <input type="text" size="40"">
      </p>
    <p>Confirm Password</p>
     <p> <input type="text" size="40"">
      </p>
<p>By clicking "Create Account", you agree to accept our <u>terms of service</u> and agree to our <u>privacy policy</u>.</>     <div class="form-action-buttons">
        <button type="submit">Create Account</button>
      </div>
    <div class="footer-container">
      <p><a href="#" class="aic-control" data-action="cancel">Cancel Request</a></p>
    <span>Need help? <u>Visit our help center.</u></span>
    </div>
  </div>
</div>
</div>
      </div>
    </div>
  </div>
</body>
</html>

Password Reset Screen
 


<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#fafafa">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700|Roboto" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="/gizmo/static/favicon.ico" type="image/x-icon">
</head>
<body>
  <div id="main-container">
    <div id="floating-container">     
    <div id="header-container">
        <img id="logo" src="https://www.akamai.com/us/en/multimedia/images/logo/akamai-logo.png" alt="logo" />     
    </div>
      <div id="content-container">       
<div id="janrainCaptureWidget">
  <div id="initialLoadScreen">
    <!-- This exists just to keep the widget happy -->
  </div>
  <div id="resetPasswordRequest">
  <div class="auth-screen">
    <h1 class="screen-heading">Password Reset</h1>
    <h2>Send password reset instructions to:</h2>
    <p>Email Address</p>
     <p> <input type="text" size="40"">
Hey       </p>
      <div class="form-action-buttons">
        <button type="submit">Send</button>
      </div>
  </div>
 <div class="footer-container">
    <span>Need help? <u>Visit our help center.</u></span>
  </div>
</div>
</div>
      </div>
    </div>
  </div>
</body>
</html>

Manage User Profile Screen
 


<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#fafafa">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700|Roboto" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="/gizmo/static/favicon.ico" type="image/x-icon">
</head>
<body>
  <div id="main-container">
    <div id="floating-container">     
    <div id="header-container">
        <img id="logo" src="https://www.akamai.com/us/en/multimedia/images/logo/akamai-logo.png" alt="logo" />     
    </div>
      <div id="content-container">       
<div id="janrainCaptureWidget">
  <div id="initialLoadScreen">
    <!-- This exists just to keep the widget happy -->
  </div>
  <div id="manageProfile">
  <div class="manage-screen">
    <div class="profile-header">
      <div class="profile-header-image user-photo-container" data-render-user-photo="large">
      </div>
      <div class="profile-header-text">
       <h1>Greg</h1>
       <h3>gmstemp@hotmail.com</h3>
      </div>
      <button id="logout" type="button" class="aic-control" data-action="logout">Logout</button>
    </div>
    <h1 class="screen-heading">Manage your account settings, content preferences, privacy and security.</h1>
    <div id="profile-management-container">
      <div class="profile-management-row">
        <div class="profile-management-card aic-control" data-render-screen="manageProfile_data">
          <div class="card-heading">
           <h1><span class="profile-data card-icon"></span>Personal Data<span class="chevron right"></span></h1>
          </div>
          <div class="card-body">
           <p>Manage your display name, username, and other personal settings.</p>
          </div>
        </div>
      </div>
      <div class="profile-management-row">
        <div class="profile-management-card aic-control" data-render-screen="manageProfile_security">
          <div class="card-heading">
           <h1><span class="profile-security card-icon"></span>Account Security<span class="chevron right"></span></h1></h1>
          </div>
          <div class="card-body">
           <p>Update your password and manage secure devices for your account.</p>
          </div>
        </div>
        <div class="profile-management-card aic-control" data-render-screen="manageProfile_privacy">
          <div class="card-heading">
           <h1><span class="profile-privacy card-icon"></span>Privacy Settings<span class="chevron right"></span></h1></h1>          </div>
          <div class="card-body">
           <p>Manage your privacy settings and exercise your rights under the General Data Protection Regulation.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer-container">
    <span>Need help? <u>Visit our help center.</u></span>
  </div>
</div> 
</div>
      </div>
    </div>
  </div>
</body>
</html>

Personal Data Screen
 


<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#fafafa">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700|Roboto" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="/gizmo/static/favicon.ico" type="image/x-icon">
</head>
<body>
  <div id="main-container">
    <div id="floating-container">     
    <div id="header-container">
        <img id="logo" src="https://www.akamai.com/us/en/multimedia/images/logo/akamai-logo.png" alt="logo" />     
    </div>
      <div id="content-container">       
<div id="janrainCaptureWidget">
  <div id="initialLoadScreen">
    <!-- This exists just to keep the widget happy -->
  </div>
  
  <div id="manageProfile_data">
  <div class="manage-screen">
    <div class="profile-header">
      <div class="profile-header-image user-photo-container" data-render-user-photo="large"></div>
      <div class="profile-header-text">
       <h1>Greg</h1>
       <h3>gmstemp@hotmail.com</h3>
      </div>
    </div>
    <h1 class="screen-heading">Manage your account settings, content preferences, privacy and security.</h1>
    <div class="profile-management-row">
      <div class="profile-management-card large">
        <div class="card-heading aic-control" data-render-screen="manageProfile">
         <h1><span class="chevron left"></span><span class="profile-data card-icon"></span>Personal Data</h1>
        </div>
        <div class="card-body">
    <p>Display Name</p>
     <p> <input type="text" size="90"">
      </p>
    <p>First Name</p>
     <p> <input type="text" size="90"">
      </p>
    <p>Middle Name</p>
     <p> <input type="text" size="90"">
      </p>
    <p>Last Name</p>
     <p> <input type="text" size="90"">
      </p>
    <p>Email Address</p>
     <p> <input type="text" size="90"">
      </p>
            <div class="form-action-buttons flex">
             <button type="submit">Save Changes</button>
             <button type="button" class="secondary aic-control" data-render-screen="manageProfile">Back to User Profile</button>
            </div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer-container">
    <span>Need help? <u>Visit our help center.</u></span>
  </div>
</div>
</div>
      </div>
    </div>
  </div>
</body>
</html>

Account Security Screen
 


<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#fafafa">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700|Roboto" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="/gizmo/static/favicon.ico" type="image/x-icon">
</head>
<body>
  <div id="main-container">
    <div id="floating-container">     
    <div id="header-container">
        <img id="logo" src="https://www.akamai.com/us/en/multimedia/images/logo/akamai-logo.png" alt="logo" />     
    </div>
      <div id="content-container">       
<div id="janrainCaptureWidget">
  <div id="initialLoadScreen">
    <!-- This exists just to keep the widget happy -->
  </div>
  
<div id="manageProfile_security">
  <div class="manage-screen">
    <div class="profile-header">
      <div class="profile-header-image user-photo-container" data-render-user-photo="large"></div>
      <div class="profile-header-text">
       <h1>Greg</h1>
       <h3>gmstemp@hotmail.com</h3>
      </div>
    </div>
    <h1 class="screen-heading">Manage your account settings, content preferences, privacy and security.</h1>
    <div class="profile-management-row">
      <div class="profile-management-card large">
        <div class="card-heading aic-control" data-render-screen="manageProfile">
         <h1><span class="chevron left"></span><span class="profile-preferences card-icon"></span>Account Security</h1>
        </div>
        <div class="card-body">
          <div class="flex-container">
            <div class="flex-row">
              <div class="flex-quad">
               <h2>Password Settings</h2>
   <p>Password</p>
     <p> <input type="text" size="46">
      </p>
    <p>Desired Password</p>
     <p> <input type="text" size="46">
      </p>
    <p>Confirm Password</p>
     <p> <input type="text" size="46">
      </p>
                 <div class="form-action-buttons flex">
                   <button type="submit">Save Changes</button>
                 </div>
             </div>
              <div class="flex-quad">
               <div class="flex-quad-header">
                 <h2>Integrations</h2>
                  <p>Connect your account with existing third party accounts to help streamline your login process.</p>
               </div>
               <div class="flex-quad-body">
                 <div class="social-login-buttons link-account" data-button-prefix="{* textConnectWith *}">
                  
                       <button class=".social-login-buttons button.facebook">Facebook</button>
      <button class=".social-login-buttons button.google">Google</button>
      <button class=".social-login-buttons button.linkedin">LinkedIn</button>
      <button class=".social-login-buttons button.twitter">Twitter</button>
      <button class=".social-login-buttons button.myopenid">myOpenID</button>
                 </div>
               </div>
             </div>
           </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer-container">
    <span>Need help? <u>Visit our help center.</u></span>
  </div>
</div>
</div>
      </div>
    </div>
  </div>
</body>
</html>

Privacy Settings Screen
 


<!doctype html>
<html class="no-js" lang="">
<head>
  
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#fafafa">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700|Roboto" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="/gizmo/static/favicon.ico" type="image/x-icon">
</head>
<body>
  <div id="main-container">
    <div id="floating-container">     
    <div id="header-container">
        <img id="logo" src="https://www.akamai.com/us/en/multimedia/images/logo/akamai-logo.png" alt="logo" />     
    </div>
      <div id="content-container">       
<div id="janrainCaptureWidget">
  <div id="initialLoadScreen">
    <!-- This exists just to keep the widget happy -->
  </div>
<div id="manageProfile_privacy">
  <div class="manage-screen">
    <div class="profile-header">
      <div class="profile-header-image user-photo-container" data-render-user-photo="large"></div>
      <div class="profile-header-text">
       <h1>Greg</h1>
       <h3>gmstemp@hotmail.com</h3>
      </div>
    </div>
    <h1 class="screen-heading">Manage your account settings, content preferences, privacy and security.</h1>
    <div class="profile-management-row">
      <div class="profile-management-card large">
        <div class="card-heading aic-control" data-render-screen="manageProfile">
         <h1><span class="chevron left"></span><span class="profile-privacy card-icon"></span>Privacy Settings</h1>
        </div>
        <div class="card-body">
          <h2>Privacy Settings</h2>
         <p>Your privacy is important ot us. Use the controls below to manage your privacy settings with {ProductName} and exercise your rights under the General Data Protection Regulation. We will not use your data for any purpose that you do not consent to.</p>
            <div class="form-action-buttons">
           <p>&nbsp;</p>
           <p>&nbsp;</p>
             <button type="submit">Save Changes</button>
             <button type="button" class="secondary aic-control" data-render-screen="manageProfile">Back to User Profile</button>
           </div>
         <h2>Account Actions</h2>
          <div class="profile-management-row">
            <div class="action-card">
             <h3>Request Your Data</h3>
              <p>Requests for your data will be processed in a timely fashion and a copy of all your data will be sent to the email address listed in your account.</p>
             <button id="requestData" type="button" class="danger aic-control" data-action="requestData">Request My Data</button>
           </div>
            <div class="action-card">
             <h3>Delete Your Account</h3>
             <p>Clicking the button below removes your account and deletes all the data associated with that account (except for any data that might need to be retained for legal purposes).</p>
             <button id="deleteAccount" type="button" class="danger aic-control" data-action="deleteAccount" data-button-confirm="{* textDeleteAccountConfirm *}">Delete My Acccount</button>
           </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer-container">
    <span>Need help? <u>Visit our help center.</u></span>
  </div>
</div>
</div>
     </div>
    </div>
  </div>
</body>
</html>

Logout Successful Screen
 


<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#fafafa">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700|Roboto" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="/gizmo/static/favicon.ico" type="image/x-icon">
</head>
<body>
  <div id="main-container">
    <div id="floating-container">     
    <div id="header-container">
        <img id="logo" src="https://www.akamai.com/us/en/multimedia/images/logo/akamai-logo.png" alt="logo" />     
    </div>
      <div id="content-container">       
<div id="janrainCaptureWidget">
  <div id="initialLoadScreen">
    <!-- This exists just to keep the widget happy -->
  </div>
<div id="logoutSuccess">
    <div class="auth-success-screen">
      <span class="success-check"></span>
      <h2>Logout Successful!</h2>
    </div>
 </div>
</div>
      </div>
    </div>
  </div>
</body>
</html>