Flexslider color/alignment

Sparkling
1

  1. Great Theme!

  2. I’ve tried everything that I can think of to change the red box in the slider. All rbga values in the stylesheet are changed to the color I want but the box is still showing that same red color. For reasons beyond my comprehension, the html is showing:

.flex-caption h2 {
    background: rgb(218,68,83);
    background: rgba(218,68,83,0.7);
    font-weight: 400;
    font-size: 24px;
    max-width: 640px;
    display: inline-block;
    padding: 12px 20px;
    margin-bottom: 0;
    color: #fff;

even though there is no such rgba value in the stylesheet

  1. The boxes that contain the post title and excerpt are out of alignment. How do I stretch the box containing the post title to align with the bottom?

website: 4dogsandalittlelady.com

2

Hi @4daall,

I hope you are well today and thank you for your questions.

You can try achieving this by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS

.flex-caption h2.entry-title {
    background: rgba(45, 41, 42, 0.7);
}
div.flex-caption {
    bottom: 77px;
}

Best Regards,
Movin

3

Hi @movin,

Interestingly enough, adding that code worked to make the top box the same as the bottom. But when I tried to change the rgba color to the one I want, the slider stopped working. When I changed it back to the code you suggested it went back to red?

Also, the alignment was still off on the two boxes. Is there a way to fix the width of the top box so that it matches the bottom regardless of the length of the post title?

4

@movin This is what I would like the slider to look like. With the blue box always staying the same width and expanding only if the title requires two lines.

5

To achieve this try using the below CSS code instead of the code shared above.

.flex-caption h2.entry-title {
    background: rgba(59, 253, 255, 0.7);
    width: 600px;
    max-width: 100%;
}
div.flex-caption {
    bottom: 77px;
}
6

@movin that worked, thank you very much.

If I wanted to change the opacity of the blue color, can i change the .7 in that rgba value?

7

You are most welcome here :slight_smile:

If I wanted to change the opacity of the blue color, can i change the .7 in that rgba value?

Yes you can.