cancel
Showing results for 
Search instead for 
Did you mean: 

How to change the carousal color in a BloX widget?

Astroraf
10 - ETL
10 - ETL

Screen Shot 2024-09-23 at 16.55.46.png

In my BloX widget seen above the carousel is equated to True, but the buttons are black and extremely hard to see. Is there a way to change the color of the buttons? Can I also set a standard to a BloX size i.e. width and height? 

 

@DRay @Liliia_DevX 

5 REPLIES 5

DRay
Community Team Member
Community Team Member

Hi @Astroraf,

Good question. Can you take a look at this tutorial and let me know if it helps?

https://community.sisense.com/t5/knowledge/blox-a-technical-introduction/ta-p/7483

David Raynor (DRay)

It is a great article I will be sharing but it doesn't answer how to change the carousel color unfortunately @DRay.  

harikm007
13 - Data Warehouse
13 - Data Warehouse

Hi @Astroraf ,

Try adding 'style' to the blox as below

 

 

"style": ".blox-carousel .carousel-button:hover {background-color: #e3e3e3} .blox-carousel .carousel-button {background-color: #ffffff}",

 

 

blox pic.jpg

 

-Hari 

 

Astroraf
10 - ETL
10 - ETL

Hi @harikm007 ,

that did the trick but is there no way to just change the color of just the arrow? With this code, all my BloX widgets that have a carousel equal to true are affected by this code.

harikm007
13 - Data Warehouse
13 - Data Warehouse

 

Use below 'style' setting to make arrows white.

"style": ".blox-carousel .carousel-button.arrow-next:before {background-image:url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20306%20306%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M94.35%200l-35.7%2035.7L175.95%20153%2058.65%20270.3l35.7%2035.7%20153-153z%22%2F%3E%3C%2Fsvg%3E)} .blox-carousel .carousel-button.arrow-prev:before {background-image:url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20306%20306%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M94.35%200l-35.7%2035.7L175.95%20153%2058.65%20270.3l35.7%2035.7%20153-153z%22%2F%3E%3C%2Fsvg%3E)} .blox-carousel .carousel-button:hover {background-color: gray} .blox-carousel .carousel-button {background-color: transparent}",

 

-Hari