Enabling Gradients in Theme Manager Causes Unwanted Background Gradient

[Jim-Dmm]

Hi,

When I enable gradients in the Theme Manager an unexpected & unwanted background gradient appears on the background are of a Bootstrap 5 Carousel Component. I am trying to then select White as a background color but it will not apply white as a background on the component, the gradient still appears. I am able to apply certain background colors such as primary or secondary which will apply correctly but not white. In the theme manager Body background does have a value of #FFFFFF, I also try applying that but a grey gradient still appears. I have also tried applying a CSS background style of white to the element to no effect. - Any ideas on how to apply white as a background so not to have a grey gradient show?

I am choosing to use a Bootstrap 5 Carousel Component rather than Swiper App Connect Component as I need rounded corners.

Thank You.

[Teodor]

The Carousel is not a part of App Connect components. You can simply inspect it using the dev tools of your browser and see what styles are being applied there and then override them.

@Jim-Dmm

I am choosing to use a Bootstrap 5 Carousel Component rather than Swiper App Connect Component as I need rounded corners.

Not sure i understand this. You can have rounded corners on any element, that's why CSS exists.

[Jim-Dmm]

OK. For simplicity I have been trying to go with pure Bootstrap without CSS. Is there a way to remove the gradient using a carousel component? Thanks.

[Jim-Dmm]

I'll see if I can use the Dev tools to figure that out I guess.

[Jim-Dmm]

Hmm, it is a strange problem, I do not see anything that stands out to me in the dev tools, but regardless I applied a white background image using the attached CSS file, as well an inline style directly to the element which should over ride everything & I still have a gradient.

[Teodor]

It's hard to answer looking at a screenshot of your code
Maybe you can provide a link where i can check this.

[Jim-Dmm]

Ok, thank you, I appreciate it. I understand.

Here's an example of a page which shows I have a bg-white class applied, as well as a custom css style & an inline style. Currently since these pages are in beta, I need to have the .css file commented out on the live server as they interfere with what is currently live, however locally I can show via image how the css style looks. I would think an inline style should override everything.

FloorGuard Entrance Mats | Logo Mat Central

[Teodor]

Well the gradient comes from the default styling of the carousel next/prev buttons:

Simply take the thumbnails row out of the carousel and this will fix your issue:

<div class="col-12 col-md-6 col-xl-6 col-lg-12 mb-3" id="product_image">
        <div id="carouselExampleIndicators" class="carousel slide bg-white style1" style="background-color:#FFFFFF">
          <div class="carousel-inner rounded-1">
            <div class="carousel-item active">
              <img src="images/floorguard-01.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
              <img src="images/floorguard-02.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
              <img src="images/floorguard-03.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
              <img src="images/floorguard-04.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
              <img src="images/floorguard-05.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
              <img src="images/floorguard-06.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
              <img src="images/floorguard-07.jpg" class="d-block w-100" alt="...">
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
        <div class="text-center mt-1 rounded">
          <img src="images/floorguard-01-thumb.jpg" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1" width="40" height="30">
          <img src="images/floorguard-02-thumb.jpg" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2" width="40" height="30">
          <img src="images/floorguard-03-thumb.jpg" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3" width="40" height="30">
          <img src="images/floorguard-04-thumb.jpg" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4" width="40" height="30">
          <img src="images/floorguard-05-thumb.jpg" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-label="Slide 5" width="40" height="30">
          <img src="images/floorguard-06-thumb.jpg" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5" aria-label="Slide 6" width="40" height="30">
          <img src="images/floorguard-07-thumb.jpg" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="6" aria-label="Slide 7" width="40" height="30">
        </div>
      </div>

[Jim-Dmm]

Thank You. Yes, the gradient is gone after being moved out.

It's somewhat confusing as I applied all of those inline & other styles to every element in the carousel & the gradient persisted. But this approach is good thank you. I'll update to Swiper.

[Jim-Dmm]

Can anyone recommend a Bootstrap specific forum for issues such as this?

[Teodor]

You can always post any Bootstrap questions here

[Jim-Dmm]

OK cool, thanks, I'm trying to stay on-topic & don't want to be a bother.

[Jim-Dmm]

The reason I ask is that I have another unexpected behavior on this carousel. Any images that I have that have a white background are made transparent & that gradient shows thru. This is strange to me as these are .jpg images which as far as I understand should not have transparency. The images are sized 470x320 to take up the entire area of the carousel.

FloorGuard Diamond Commercial Entrance Mats | Logo Mat Central

[Teodor]

I don't think that's related to the carousel.
Your images have a white background, not a transparent one, for example: https://www.logomatcentral.com/commercial-entrance-mats/images/faux-coir-01.jpg

[Jim-Dmm]

Yes, the background of the image is white, I'd like to know why they are modified to transparent with a gradient applied, .jpgs should not be transparent.

[brad]

The gradient is part of your carousel.

[Teodor]

@Jim-Dmm

why they are transparent

They are not
Again - it's the buttons that have the gradient background applied and they are covering the image:

[Jim-Dmm]

Hmm, It does appear that only the white area is dropped out. Could that be altered in the Advanced Variables of the Theme Manager? I see there is a Carousel control prev icon bg that shows what appears to be XML coding?

[Teodor]

Just use CSS rules to override the styles of the buttons.

[Chackmool]

Add this code inside the head of your site and see if this is what you are looking for:

<style type="text/css">
    
.carousel-control-prev, .carousel-control-next {
   background-image: none !important; 
}
</style>