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
- Step 1. Open the settings of the Image Carousel Design Element
- Step 2. Copy the custom CSS Code
- Step 3. Update the Image Carousel Design Element with the code
- Result
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: