How can we help you today?

How to Change the Background Color of the Countdown Design Element

This article will demonstrate how to customize the color of the Countdown Design Element.


TABLE OF CONTENTS


Pre-requisites

  • You must have an existing Countdown Design Element on your page.
  • You must have the latest version of ShortPoint SPFx installed on your environment.
  • You must be a ShortPoint Designer with an active license.

Interactive Tutorial


Check out the interactive tutorial below to learn how to customize the countdown colors:



NOTE: To learn more about the options you can edit in the Countdown Design Element, go to How to Customize the Countdown Design Element in Live Mode.

Step-by-step Tutorial

Follow the steps below for a detailed tutorial on how to customize the Countdown background colors:


Step 1: Edit the ShortPoint web part

  • Go to a SharePoint page that has an existing Countdown Design Element and click Edit.
  • Click the ShortPoint tag.
  • Select the pencil icon.

Step 2: Edit the Countdown Design Element

  • Look for the Countdown Design Element and click it.
  • Select the cogwheel icon.


cogwheel icon


Step 3: Customize the Background Color

  • Go to the Design tab.
  • There are three ways to change the Background color:


dropdown

One is to use the drop-down and select the color you prefer.

color picker

Another is to use the color picker and find the color you prefer.

paste

Finally, you can directly paste the HEX code of the color you want to use.



Step 4: Insert and Save


  • Once you are satisfied with your edits, click the green checkmark.
  • Then, select the eye icon to see how your page will look in real-time.


eye icon


  • Click Save to apply all changes.


Save


Congratulations! You have successfully changed the background color of the Countdown Design Element. Check out How to Customize the Countdown Design Element in Live Mode to learn more about the features you can customize.


NOTE: If you want to change the background color of each component (icon, days, hours, minutes, seconds) of the Countdown Design Element, check out Custom CSS Tutorial.

Custom CSS Tutorial


If you want to change the color of each individual component of the Countdown Design Element, follow the steps below:


Step 1: Edit the ShortPoint web part

  • Go to a SharePoint page that has an existing Countdown Design Element and click Edit.
  • Click the ShortPoint tag.
  • Select the pencil icon.

Step 2: Edit the Countdown Design Element

  • Look for the Countdown Design Element and click it.
  • Select the cogwheel icon.


cogwheel icon


Step 3: Copy the code


  • Copy the code below:
/* icon */
.shortpoint-countdown-icon .shortpoint-countdown-amount {
  background-color: rgba(add rgba color here) !important;
}

/* days */
.shortpoint-countdown .shortpoint-countdown-section:first-child .shortpoint-countdown-amount {
  background-color: rgba(add rgba color here);
}

/* hours */
.shortpoint-countdown .shortpoint-countdown-section:nth-child(2) .shortpoint-countdown-amount {
  background-color: rgba(add rgba color here);
}

/* minutes */
.shortpoint-countdown .shortpoint-countdown-section:nth-child(3) .shortpoint-countdown-amount {
  background-color: rgba(add rgba color here);
}

/* seconds */
.shortpoint-countdown .shortpoint-countdown-section:nth-child(4) .shortpoint-countdown-amount {
  background-color: rgba(add rgba color here);
}

Step 4: Paste and edit the code


  • Go to Custom CSS tab and paste the code:


paste code


  • Then, replace "add rgba color here" with the RGBA format of the colors you want to use. For example, we will be using different shades of green for each component of the countdown. We will use pine green (9,121,105) for icon, emerald green (95,158,160) for days, battle green(0, 106, 78) for hours, fern green (79,121,66) for minutes, and crayola green (0,163,108) for seconds.


replace rgba


  • Once you add the rgba for each component, your countdown will now look like this:



Step 5: Insert and Save

  • Once you are satisfied with your edits, click the green checkmark.
  • Then, select the eye icon to see how your page will look in real-time.


eye icon


  • Click Save to apply all changes.


Save


Related articles:





Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 54 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more