Guide

Manage Privacy Settings screen (v1) CSS

Suggest Edits

📘

Looking for the Hosted Login v2 version of this screen? Then see Manage Privacy Setting v2.

This screen appears after a user clicks Privacy Settings on the **manageProfile **screen.


Login page HTML

To help you put the CSS classes in context, the following snippet shows the HTML markup used to define the screen. To view the latest HTML for a screen, right-click a blank spot on your Hosted Login login page, click View Page Source, then search for the screen name.

<div style="display:none;" id="manageProfile\_privacy" class="screen">  
 <div class="manage-screen content-wrapper">  
   <button type="button" class="aic-control logout" data-action="logout">{* textLogout *}</button>  
   <div class="profile-header">  
     <div class="profile-header-image user-photo-container" data-render-user-photo="large"></div>  
     <div class="profile-header-text">  
       <h1>{* dataDisplayName *}</h1>  
       <h3>{* dataEmailAddress *}</h3>  
     </div>  
   </div>  
   <h1 class="screen-heading">{* textAccountScreensHeading *}</h1>  
   <div class="profile-management-container profile-privacy">  
     <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>{* textPrivacySettings *}</h1>  
       </div>  
       <div class="card-body">  
         <h2>{* textPrivacySettings *}</h2>  
         <p>{* textPrivacySettingsSectionDescription *}</p>  
         {* #manageProfile\_privacyForm *}  
           {* marketingConsent *}  
           <div class="form-action-buttons">  
             <button type="submit">{* textSaveChanges *}</button>  
             <button type="button" class="secondary aic-control" data-render-screen="manageProfile">{* textBackToUserProfile *}</button>  
           </div>  
         {* /manageProfile\_privacyForm *}  
         <h2>{* textBackToUserProfile *}</h2>  
         <div class="flex-row">  
           <div class="action-card">  
             <h3>{* textRequestDataHeader *}</h3>  
             <p>{* textRequestDataMessage *}</p>  
             <button id="requestData" type="button" class="danger aic-control" data-action="requestData">{* textRequestDataButton *}</button>  
           </div>  
           <div class="action-card">  
             <h3>{* textDeleteAccountHeader *}</h3>  
             <p>{* textDeleteAccountMessage *}</p>  
             <button id="deleteAccount" type="button" class="danger aic-control" data-action="deleteAccount" data-button-confirm="{* textDeleteAccountConfirm *}">{* textDeleteAccountButton *}</button>  
           </div>  
         </div>  
       </div>  
     </div>  
   </div>  
 </div>  
 <div class="footer-container">  
   <div class="content-wrapper">  
       <span class="help-link">{* textNeedHelp *}{* linkHelp *}</span>  
       <div class="footer-text">  
       {* textFooter *}  
       </div>  
       <div class="footer-extra-text">  
       {* textFooterExtra *}  
       </div>  
   </div>  
</div>  
</div>

CSS classes used on this screen

The following table lists all the CSS classes used on this screen; the table also includes the default CSS specified for each class. Note that some classes, such as footer-text, aren't defined in the base.css file.

CSS ClassDefault CSS
action-card.action-card {
flex-grow: 1;
flex-basis: 0;
margin: 8px;
background-color: #f2f2f2;
padding:0 20px 20px 20px
}
aic-control logout.aic-control {
cursor:pointer
}

.logout {
position: absolute;
top: 25px;
right:50px
}
card-body.card-body {
padding:15px 25px
}
card-heading.card-heading {
border-bottom: 1px solid #f2f2f2;
position:relative
}
chevron left.chevron::before {
border-style: solid;
border-width: .12em .12em 0 0;
content: "";
display: inline-block;
height: .65em;
left: .15em;
position: relative;
top: .32em;
transform: rotate(-45deg);
vertical-align: top;
width: .65em;
border-color:#979797
}

.chevron.left:before, .lang-rtl .chevron.right:before {
left: .25em;
transform:rotate(-135deg)
}
content-wrapper#content-wrapper {
background-color: #fff;
box-shadow:1px 1px 5px 2px rgba(0, 0, 0, .1)
}
danger.aic-control {
cursor:pointer
}
flex-row.flex-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin:0 -8px
}
footer-container.footer-container {
padding: 25px;
border-top: 1px solid #f2f2f2;
text-align:center
}
footer-extra-text 
footer-text 
form-action-buttons.form-action-buttons {
margin:0 -10px
}
help-link]) 
manage-screen content-wrapper.manage-screen.content-wrapper {
position:relative
}
profile-header.profile-header {
display: flex;
flex-direction: row;
flex-wrap:wrap
}
profile-header-image user-photo-container.profile-header-image {
text-align:right
}

.profile-header-image .profile-image {
margin-right: 20px;
border-radius: 50%;
max-height: 100px;
max-width:100px
}
profile-header-text 
profile-management-card large.profile-management-card {
background-color: #fff;
box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, .1);
min-width: 270px;
max-width: 915px;
margin-top: 15px;
overflow:auto
}

.profile-management-card.large .card-body {
padding:25px
}
profile-management-container 
profile-privacy card-icon.card-heading .card-icon.profile-privacy {
background-image: url("/gizmo/static/privacy_settings_icon.png")
}
screen.screen {
min-width:460px
}
screen-heading.screen-heading {
margin-top:0
}
secondary aic-control.aic-control {
cursor:pointer
}

button.secondary:hover {
background-color:#ecf2ff
}

CSS classes mapped to UI elements

The following graphic maps CSS classes to the more-visible UI elements used in the screen:


See also

Updated over 3 years ago