Style Sheet Customization for Profile Center, Unsubscribe, and Forward to a Friend

Owned by Beth Bayless
Last updated: May 21, 2015 by Former user (Deleted)
5 min read

Profile Center CSS Customization

To change the logo at the top of the Profile Center page:

  1. Open Account Preferences and find the section titled "Profile Center Information."
  2. Click Browse Server to select a new logo.
  3. Click Save

To change the background color of the Profile Center page:

  1. Open Account Preferences and click Edit Company Settings, located at the bottom of the page. 
  2. Select Profile Center from the drop down menu and enter the color hex code (6 characters) in the background color column. 
    1. Example: Change the default "E7E7E7" to "FFFFFF" to make the background white
  3. Click Save to apply the changes.

To edit styling of the page

  1. Open Account Preferences and click Edit Company CSS, located at the bottom of the page. 
  2. 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. 
  3. Here are the default values:
Default Profile Center CSS
/*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;
}

 

Note: To customize the profile center page text, please read the Customize the Profile Center wiki article.

Unsubscribe CSS Customization

To add a logo to the top of the unsubscribe page:

  1. Open Account Preferences and click Edit Company CSS, located at the bottom of the page. 

  2. In the CSS Editor window, add a style like the following.  Specify the background-image url.  If necessary, change the size of the unsubscribe box, making sure to keep the margin-left as half of the width.

    Add Unsubscribe Logo
    /*Add a logo to the top of the box*/
.ci_unsub_mainarea {
    background-image: url("/user/25208/image/logos/logo_dev_small.png");
    background-repeat: no-repeat;
    padding-top: 40px; /*The top padding is equal to the height of your logo image*/
}

To edit styling of the page:

  1. Open Account Preferences and click Edit Company CSS, located at the bottom of the page. 
  2. 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. 
  3. Here are the default values:
Default Unsubscribe CSS
/*Center the unsubscribe box, add a header logo image, and change the background/border colors*/
.ci_unsub_mainarea{
 	padding:90px 0px 0px 0px;
	position:absolute;
 	left: 50%;
	margin-left: -328px !important;
 	width:656px;
 	background: #f0f0f0;
 	border:solid 1px #c6cfe1; 
 	background-image: url(http://www.URL.com/logo_image_name.jpg);
 	background-repeat:no-repeat;
}
.ci_unsub_box {
 	color:#333333;
 	background: #f0f0f0;
 	border:none;
}
.ci_unsub_mainarea{
	margin:0px;
}
/*Change the styling of the email address line*/
.ci_unsub_emailaddress{
 	font-weight:bold;
 	font-size:18px;
}
/*Button Styling*/
.ci_unsub_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_unsub_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);
}

 

Note: To customize the unsubscribe page text, please read the Customize the Unsubscribe Page wiki article.

Forward to a Friend CSS Customization

To customize the background color:

  1. Open Account Preferences and click Edit Company Settings, located at the bottom of the page. 
  2. Select Forward to a Friend from the drop down menuand edit the value of the Forward to a Friend Background Color.
    1. Example: Change the default "E7E7E7" to "FFFFFF" to make the background white
  3. Click Save to apply the changes.

To customize the logo:

  1. Since the logos are the same for the Forward to a Friend and Profile Center pages, open Account Preferences and find the section titled "Profile Center Information."
  2. Click Browse Server to select a new logo.
  3. Click Save

Note: To customize the forward to a friend text, please read the Customize the Forward to a Friend Page wiki article.

Forward to a Friend Newsletter Article CSS Customization

To edit Forward to a Friend text and background color for Newsletter Articles, follow the steps above but select Forward to a Friend Newsletter Article from the drop down menu.  For consistency, the logo and background color will be identical to the Forward to a Friend pages.