cancel
Showing results for 
Search instead for 
Did you mean: 
Memorial Day: In recognition of the Memorial Day holiday, our Support office will be will be closed on Monday, May 29th.

Embedded Archive: Customizing its Appearance

CTCT Employee

Hi. I am a part of the team that created the Embeddable Archive feature and we are really excited about the product and the opportunity it gives our customers to customize their Archive list to appear directly on their own web pages. Since launching this product, we have had some feedback that our customers would like to customize the appearance of that list, so we are providing a few examples to show how to make a few different appearance customizations.

In all of these examples, please be sure to replace my archive code snippet with your own snippet! Otherwise your site will just be displaying my own archived emails, which you definitely don’t want. (Reminder: I’m referring to the HTML snippet you get when you go to your “My Campaigns” page and click the gear next to “Archived Campaigns”, take a look here if you need some help finding it.)

Basically what these examples are doing are styling the appearance of the Archive list by preceding the html code snippet with a <style></style> section. Please note that these styles might not cooperate with the existing styles on your website, so please closely examine your page to make sure it still looks exactly the way you want after trying out these changes.

 

1. To make your list bulleted, with hollow circles for bullets:

<style>
       #archiveList > ul {
          list-style-type: circle;
          list-style-position: inside;
        }
</style>
<!--Begin CTCT Archive-->
<script id="archiveScript" src="//static.ctctcdn.com/js/archive-static/current/archive-static.min.js"></script> <div id="archiveList" data-archive-count="10" data-m="a07ea78e8ui0"></div>
<!--End CTCT Archive-->

Tip: There are many different bullet types you can use by changing the value of "circle". Choices include "square", "disc" (filled in circle), "decimal" (numbered list).

 

2. To increase line height to create more space between the list items:

<style>
        #archiveList {
          line-height: 2;
        }
</style>
<!--Begin CTCT Archive-->
<script id="archiveScript" src="//static.ctctcdn.com/js/archive-static/current/archive-static.min.js"></script> <div id="archiveList" data-archive-count="10" data-m="a07ea78e8ui0"></div>
<!--End CTCT Archive-->

Tip: Change the value of "line-height" to any number besides 2.

 

3. To change the color of the links to black:

 

<style>
        #archiveList a {
          color: #000000;
        }
      </style>
<!--Begin CTCT Archive-->
<script id="archiveScript" src="//static.ctctcdn.com/js/archive-static/current/archive-static.min.js"></script> <div id="archiveList" data-archive-count="10" data-m="a07ea78e8ui0"></div>
<!--End CTCT Archive-->

Tip: Want a color other than black? Replace the Hex value (#000000) with any color of your choice! More: HTML Color Picker - W3 Schools

 

4. To combine all of the previous three style change (this is just to demonstrate that you can combine multiple stylings as desired):

<style>
        #archiveList {
          line-height: 2;
        }
        #archiveList > ul {
          list-style-type: circle;
          list-style-position: inside;
        }
        #archiveList a {
          color: #000000;
        }
</style>

If you have any questions, feel free to reply in the comments below. You can also post any support questions in our forums here, or send us your feedback about the new archive feature.

Neil_C

Hi, I’m Neil and I’ve been a part of the Constant Contact Product Team since 2014, involved with teams on several products including Autoresponder, MyLibrary, some of our Social offerings, and Embeddable Archive.

34 Comments
All Star
All Star

I know this article is regarding styling, but I'm wondering about changing some functionality. Is there a way to change the sort order by date sent? The email list is automatically oldest first. I'd like it latest first.

 

CTCT Employee

Hello @819,

 

Great question. As of right now, we do not have the functionality of changing the order the emails appear on the archive widget; however it is a feature request to get that capability back.

 

I will pass along the feedback to our development team; we always look at what our customers say about the product to make improvements.

Member

Do you have any screen shots of examples. I'm not completely sure I understand the concept. Thanks!

Authorized Local Expert

Here you go, Dani - here's my archive which I created using the new tool.

 

http://albertideation.com/my-newsletter-archive

Regular Visitor

I appreciate this information. I'd like to recommend that you have options for including the date sent and a brief description of the email like the previous archive utility did. Subject lines don't necessarily tell the story of the email and the date would help readers put the emails in a time context.