Forum Discussion

Astroraf's avatar
Astroraf
Data Pipeline
09-23-2024

How to change the carousal color in a BloX widget?

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

  • harikm007's avatar
    harikm007
    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}",

     

     

     

    -Hari 

     

    • Astroraf's avatar
      Astroraf
      Data Pipeline

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

  • Astroraf's avatar
    Astroraf
    Data Pipeline

    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's avatar
      harikm007
      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