Skip to main content

Search

We are excited to announce the launch of updated product names, logos, and headers within our user interfaces as part of the CivicPlus® Solution Rebranding initiative. These changes mark the first step toward creating a cohesive and seamless user experience across all solutions in our portfolio. As part of this transition, users may notice minor design updates. While the functionality you rely on remains unchanged, we are in the process of updating screenshots and other resources on our Help Centers to reflect the new branding. We appreciate your patience and understanding as we work to complete these updates.

Alert Center Properties

  • Updated:

This article will show you how to configure the Properties within the Alert Center module.

 

Important Note

  • Properties fields for Alert Bar styling support any valid hexadecimal values, but WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. To ensure compliance, check the font against background color values.
  • A maximum of two alerts will show in the Alert Bar at once.

 

Who can use this feature?
System Administrator | Owner

 

 

Instructions

  1. Sign in to your site
  2. Click Modules
    The drop down labeled Modules.
  3. Click Content
    The left hand navigation tab labeled Content.
  4. Click Alert Center
    The URL labeled Alert Center.
  5. Select the Properties tab
    The tab labeled Properties, to the left of the tab labeled Main.
  6. Edit the fields as needed
    The properties text entry fields.
    Note: Make sure you check color contrast before saving changes to the background or font colors.
    • Alert Bar Main Background: The background color of the main Alert Bar area in hex color code. The default is dark grey #222222.
    • Alert Bar Text Color: The text color of the Alert titles in the Alert Bar in hex color code. The default is white #FFFFFF.
    • Alert Bar Font Size: The text size in pixels of Alert item titles in the Alert Bar. This property scales all other Alert item text based on the ratio of increase or decrease. The default is 12.
    • Alert Bar Read More Color: Color of "Read More" link text on Alert Bar in hex color code. The default is red #030303.
    • Alert Bar Icon: The relative link to the Alert Bar icon. The default flashing alert icon is /Common/Images/AlertCenter/alertBarBlink.svg.
    • Left Alert Bar Item Border: The color of the left border lines of the Alert Item area. The default is grey #635e65.
    • Right Alert Bar Item Border: The color of the right border lines of the Alert Item area. The default is black #000000.
    • Social Media Open Graph Image: Control the image shared on Facebook from the Alert Center module level. Use any full or relative image links. Images should meet the minimum size constraint of 600px by 600px. Pre-cache your images by running the URL through the URL Sharing Debugger tool to pre-fetch metadata for the website. You should also do this if you update the image for a piece of content. The debug tool also refreshes any scraped content for your websites, so it can be useful if you need to update them more often than the standard 24-hour update period.
  7. Select Save Changes
    Save changes button.
Was this article helpful?
0 out of 0 found this helpful
Return to top

Feedback About the Article

Let us know what was helpful or not helpful about the article below.

0 comments

Please sign in to leave a comment.