Customize Available Publications on Profile Center

The "Available Publications" region of the Profile Center is where subscribers can edit their subscription preferences. They have the opportunity to sign up for lists or take themselves off specific lists.  You can fully customize the HTML of this region.

Customize the Available Publications Page

  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. Open the tab called "Profile Center List Override HTML"



  6. Type or paste in HTML code to customize the HTML of the Available Publications page

    1. To allow subscribers the ability to edit which list they are on, you will need to first find the List ID for the available list:

      1. Go to Subscribers & Lists

      2. Open the Lists folder

      3. Double click to edit the list

      4. Under Additional Information, copy the API id

    2. Here is the HTML code you will need to use for the available publications list check boxes.  The List ID in this example is "1000JCK00000001H14A" which needs to be the value for the checkbox field:

      List Checkbox
      <input name="list" id="list" value="1000JCK00000001H14A" style="float:left; width: 22px;" type="checkbox">
        Monthly Newsletter<br>
        Receive exclusive news delivered to your inbox monthly<br>



    3. Here is a full example of the Available Publications customization:

      Example Customization
      <style type="text/css">
      .list_section_container{
          width:600px;
      }
      .list_section{
          width: 250px;
          float:left;
          margin-right:20px;
          margin-bottom:20px;
      }
      .list_section_title{
          font-weight:bold;
      }
      .list_section_image{
          float:left;
          padding-right:12px;
      }
      .list_section_description{
          /*margin-left:22px;*/
      }
      .list_section_checkbox{
          width:24px;
          height:76px;
          float:left;
      }
      </style>
      
      <div id="ci_procenter_manage_subscriptions" class="ci_procenter_header">
         Available Publications</div><br>
      
      <div class="list_section_container">
      <div class="list_section">
          <div class="list_section_image">
              <img alt="" src="http://portal.criticalimpact.com/user/25208/image/blue/survey.png">
          </div>
          <div class="list_section_checkbox">
              <input name="list" id="list" value="1000JCK00000001H14A" style="float:left; width: 22px;" type="checkbox">
          </div>
              <div class="list_section_text">
                  <span class="list_section_title">Monthly Newsletter</span><br>
                  <span class="list_section_description">Receive exclusive news delivered to your inbox monthly</span>
              </div>
      </div>
      
      <div class="list_section">
          <div class="list_section_image">
              <img alt="" src="http://portal.criticalimpact.com/user/25208/image/blue/money_roll.png">
          </div>
          <div class="list_section_checkbox">
              <input name="list" id="list" value="1000JCK00000001H14B" style="float:left; width: 22px;" type="checkbox">
          </div>
              <div class="list_section_text">
                  <span class="list_section_title">Investment News</span><br>
                  <span class="list_section_description">Get updates on investment opportunities</span>
              </div>
      </div>
      <div class="list_section">
          <div class="list_section_image">
              <img alt="" src="http://portal.criticalimpact.com/user/25208/image/blue/shopping_bag.png">
          </div>
          <div class="list_section_checkbox">
              <input name="list" id="list" value="1000JCK00000001H14C" style="float:left; width: 22px;" type="checkbox">
          </div>
              <div class="list_section_text">
                  <span class="list_section_title">Daily Deals</span><br>
                  <span class="list_section_description">Receive the daily alerts so you don't miss the daily deals</span>
              </div>
      </div>
      </div>
      <div style="clear:both;"></div>
    4. This customization makes the Available Publications region look like this: