Customize the Profile Center

The Profile Center is the page where subscribers will edit their subscription information.  Subscribers can access this page by clicking the "Profile Center" link in your email footers.  You can customize this page by showing custom fields and/or lists, adding your company's logo, changing the background color, or updating the verbiage of the text. 

Show Custom Fields

Allow subscribers to type in more information about themselves like their first name, birthday, etc. To make some custom fields editable on the Profile Center, please follow these steps:

1. Open the Subscribers & Lists folder
2. Click Custom Fields, then click the Edit Custom Field button
3. Check the box next to "Editable on Profile Center"
4. Update the custom field information and then click Save

Add List Options

To show list(s) on the Profile Center and allow subscribers to change their subscription preferences:

1. Open the Subscribers & Lists folder
2. Open the Lists folder
3. Double click on a Static list to edit 
   1. Note: Dynamic lists are not publicly editable on the profile center because they are dynamically updated based on a set of rules
4. Check the box next to "Show on Subscription Center"
5. The Position is used to order lists shown on the profile center page

Customize the Wording of the Text

1. Click the Account Folder
2. Click Account Preferences
3. Find the Other Information section at the bottom of the page
4. Click Edit Company Settings
   
   
   
5. Change the category to Profile Center
   
   
   
6. Edit text in the right hand column for the values of the text in the Profile Center
   
   
   
7. When you are done, click Save and Cancel

Change the Profile Center Logo and Background Color

1. Click the Account Folder
2. Click Account Preferences
3. Find the Profile Center Information section (about halfway down the page)
4. Click Browse Server and select your company's logo to appear at the top of the Profile Center page
   1. Note: the Profile Center Logo will also appear at the top of the Forward to a Friend page
   2. It's recommended to use a logo with a transparent background or to change the background color of the page to match the background color of the image
5. Enter a Profile Center Background Color
   1. Use the format: E7E7E7

Customize the Style of the Page with CSS

1. Click the Account Folder
2. Click Account Preferences
3. Find the Other Information section at the bottom of the page
4. Click Edit Company CSS
   
5. In the CSS Editor window, type the CSS you would like to apply to the profile center page. Only add styles that you want to change from the default style. 

6. Here are the default values:
   
   

   Example Default Values

   /*Padding and background color of page*/
   #ci_procenter_background{
       background-color: #E7E7E7; /* Gray */
       padding: 20px 42px;
   }
   /*Styling of boxes where data is entered (ie: First name, Last Name, etc.)*/
   .ci_procenter_text_box{
       background-color: #FFFFFF;
       border: 1px solid #CCCCCC;
       font-size: 1.2em;
       margin: 0px 0px 12px 0px;
       padding: 6px;
       width: 406px; /*256px;*/
       border-radius:4px; 
       height: 18px; /*IE compatibility mode fix*/
   }
   /*When typing in box, the border is darker.  Does not work in IE*/
   .ci_procenter_text_box:focus{
       border: 1px solid #999999 !important;
   }
   /*Styling of labels for the boxes where data is entered (ie: First name, Last Name, etc.)*/
   .ci_procenter_form_label{
       font-family: Arial, Helvetica, sans-serif;
       font-weight:bold; 
       font-size: 12px;
   }
   /*Header text styles*/
   .ci_procenter_header{
       font-family: Arial, Helvetica, sans-serif;
       color: #3685c3;
       font-size: 16px;
       padding: 12px 0px 9px 0px;
   }
   
   /*Button styling*/
   .ci_procenter_update_btn {
       margin-top:12px;
       padding:0px 12px;
       border:1px transparent;
       border-radius:4px;
       height:28px; 
       line-height:24px;
       font-size:12px;
       display:inline-block;
       text-decoration:none;
       color:#FFF;
       /*Gradiant */
       background-color: #666666; 
       background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#999999), to(#666666));
       background-image: -webkit-linear-gradient(top, #999999, #666666); 
       background-image:    -moz-linear-gradient(top, #999999, #666666);
       background-image:     -ms-linear-gradient(top, #999999, #666666);
       background-image:      -o-linear-gradient(top, #999999, #666666);
   }
   .ci_procenter_update_btn:hover{
       /*Flip gradiant*/
       background-color: #666666; 
       background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666666), to(#999999));
       background-image: -webkit-linear-gradient(top, #666666, #999999); 
       background-image:    -moz-linear-gradient(top, #666666, #999999);
       background-image:     -ms-linear-gradient(top, #666666, #999999);
       background-image:      -o-linear-gradient(top, #666666, #999999);
   }
   .ci_procenter_update_btn:active{
       background-color: #777777;
       background-image: none;    
   }
   
   /*Divider Line Styling*/
   .ci_procenter_end_line {
       border-bottom: #B7B7B7 1px solid; 
       margin: 9px 0px 12px 0px;
   }
   
   /*Available Publications Checkboxes*/
   .ci_procenter_checkbox{
       padding-bottom:6px;
   }
   .ci_procenter_checkbox_text{
       margin-left:26px; 
       padding-top:3px;
   }