Apply styles and formatting to the email archive widget on your website

Use CSS to style the way the list of emails looks on your website and to change the number of emails that display

Important: This article requires you to use HTML code. If you work with a webmaster, they can help you install the code into your website. If you're using a website builder, please contact their support for help with updating the code.

Your branding is important! The code for the email archive widget can be modified to match the fonts, colors, line spacing, and list styles that you already use on your website. You can also quickly change the maximum number of emails that you want to display in the widget without having to re-copy and paste the widget code.

• Style the widget with CSS
• Change the number of emails that display in the widget
• View examples of the widget

Style the widget with CSS

By default, the email archive widget is a simple bulleted list. With a little bit of code, you can change the font type, font size, font and bullet colors, bullet styles, line spacing, and background color.

• Style the archive - Use the selector #archiveList

  <style>
         #archiveList {
                       border: 1px solid #000000;
                       line-height: 2;
         }
  </style>
  

• Style the list - Use the selector #archiveList ul

  <style>
         #archiveList > ul {
                            list-style-type: circle;
                            list-style-position: inside;
         }
  </style>
  

• Style the list items - Use the selector #archiveList li

  <style>
         #archiveList li { 
                          color: blue; 
         }
  </style>
  

There are lots of resources online, like W3Schools or MDN, that you can use as a reference when styling your archive.

Change the number of emails that display in the widget

You can share up to 100 emails in the email archive widget. If you want to change the number of emails that display on your website, you can edit the code (in red below) with a number between 1 and 100 after you've added the widget code to your website:

<div id="archiveList" data-archive-count="5" data-m="a07e1jef1ar0"></div>

Once the number is updated, you can add and remove emails from your website through your Constant Contact account without having to continuously update your website's code.

View examples of the widget

Emails display within the widget in the order that you archive them, with the most recently archived emails at the top of the list. All archived emails display their subject line, not their campaign name. If you need to change the email subject line that displays in the widget, you can do so by copying the original.

• Standard email archive widget - In this example, the standard email archive widget is a simple, left-aligned, bulleted list that has been placed between a styled heading and a button on a website. The links underline when you place your mouse over them.
  
  
  
  
• Styled email archive widget - In this example, the email archive widget has been styled, and the font has been changed to match the website, the bullets have been centered and turned the same color as the background to make them disappear, and a custom border-image property has been applied. It has been placed between a heading and a button on a website.
  
  
  
  

Any links we provide from non-Constant Contact sites or information about non-Constant Contact products or services are provided as a courtesy and should not be construed as an endorsement by Constant Contact.

Questions?