You can easily add an Activity Stream on the Basic Configuration page on all Email, Letter to the Editor, and Fax actions. This will appear below the Submit button and showcase the support your campaign has already received.
Customizing an Activity Stream:
card height, card background and border colour, 'Show More' button colour
Adding an Activity Stream
1. On the Basic Configuration page of the Edit tab, scroll down to the 'Optional Settings' section and check the box beside 'Add an activity stream'.
2. Adjust the settings for your action's Activity Stream:
- Title for activity stream: the title you'd like to be displayed above the stream
- How many actions to show: the number of approved submissions to show at one time
- What submission data to show: the supporter data you'd like to appear in each card (supporter's first name, last initial, district, country, comment, and the time since they completed the action).
Note that this list depends on the fields on your action, and that supporter district isn't available if your action uses custom targets. - Refresh rate: how often you'd like the cards to be refreshed, set to 15 seconds by default.
3. Click the 'Save & Next' button to complete the process.
Customizing an Activity Stream
You can use CSS to change the height of the cards in your activity stream, the colour of the 'Show more' button, or any other aspect of your action's Activity Stream. Below are a few examples of changes you can make.
Changing the height of each card
By default, each card in the Activity Stream is 250 pixels tall to fit all of the supporter data you may want to show, including the letters they send their representatives. If you choose to show less information, you may want to adjust the height of each card to remove blank space.
1. On the Edit tab of your action, open the Look and Feel page.
2. Scroll down to the Tool CSS field and paste the following CSS code there:
.action-ticker-item {
min-height: 100px !important;
}
3. Click on the 'Save' button to complete the change.
Setting 100 pixels as the height for each card works well in most cases, but you're welcome to tinker and find the height that fits just right for your action.
Changing the colour of the background or border of each card
You can set a background colour for every card and change the colour of the border around them.
1. On the Edit tab of your action, open the Look and Feel page.
2. Scroll down to the Tool CSS field and paste the following CSS code there:
.action-ticker-item {
background: #000HHH;
border: 1px #000HHH solid !important;
}
3. Replace the first '000HHH' with the hex code for the colour you want to use for the border, and the second '000HHH' with the hex code for the colour of the background.
4. Click on the 'Save' button to complete the change.
If you only want to add a background colour but not a border, remove the border: 1px... line from the code, and the other way around if you just want to change the border but leave the background as is. You can also change the thickness of the border by increasing the number of pixels.
Changing the colour of the 'Show More' button
You also get to choose the colour of the background and the border of the 'Show More' button that appears below the cards.
1. On the Edit tab of your action, open the Look and Feel page.
2. Scroll down to the Tool CSS field and paste the following CSS code there:
.ticker-button-wrapper > a {
background: #000HHH;
border: #000HHH;
}
3. Replace the first '000HHH' with the hex code for the colour you want to see in the background of the button, and the second '000HHH' with the hex code for the colour of the border.
4. Click on the 'Save' button to complete the change.
Last updated: June 18, 2021