How can we help you today?

How to Change Text Color for Image Carousel Design Element

By default, you can change the text color of an Image Carousel Design Element in the Settings tab using the Text Color feature:


 

By using ShortPoint Text Color feature, both Title and Description will be updated with the same color. In this article, we will show you how to customize only Title or Description text color using the custom CSS feature. Here is how it may look like:


Before
After


If you would like to apply the custom CSS solution, please follow the steps in this support article.


TABLE OF CONTENTS


Before we begin

  • ShortPoint CSS customizations are available starting from ShortPoint version 5.2.2.28 or higher. We recommend you to always have the latest version installed. Visit our Download ShortPoint page and get the latest version of ShortPoint. 
  • You have ShortPoint installed on your SharePoint site.
  • Make sure you are a ShortPoint user with an active license.

Step 1. Open the settings of the Image Carousel Design Element


Edit your page.


Click the cog wheel icon to open the Settings tab of the Image Carousel Design Element:



Step 2. Copy the custom CSS Code


Here is the custom CSS code you will need to use for customizing the text color in your Image Carousel Design Element.


Option 1. Changing the Title Text Color

.shortpoint-image-carousel-title {
color: blue;
}

Option 2. Changing the Description Text Color

.shortpoint-image-carousel-description {
color: blue;
}


Note: You may update the color value according to your preferences. If you also prefer to use a Hex color code, you may update the code above like in this example:

color: #2C82C9;


Please copy the code to the clipboard.


Step 3. Update the Image Carousel Design Element with the code


Switch to the Custom CSS tab: 



Paste the copied code from Step 2 to the Custom CSS field: 



You may check how it will look on your page by clicking the Preview button:



Then click Update and save the page:



Note: If you want to know more about inserting custom CSS into your ShortPoint Design Element, please check our custom CSS tutorials: How to insert Custom CSS into a Page Builder (Basic Tutorial) and Add Custom CSS to a ShortPoint Design Element (Advanced Tutorial).

Result


That's it! This is how it may look like on your page:



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 44 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