Text color in slides of pictures

  • Unknown's avatar
    bigleapoffaithdogtraining · Member ·

    Hi!

    I have a slider on my home page. It haves 4 slides it rotates through. I would like the color of each slide to be different. Is this possible?

    Thanks in advance!
    Amber

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    timethief · Member ·

    Volunteers cannot view private blogs and we do not request access to them. Staff can view private blog content and they do provide support for CSS editing. Please be patient while waiting.

  • Unknown's avatar
    bigleapoffaithdogtraining · Member ·

    Thank you I did not know that and have changed my settings to public

  • Unknown's avatar
    timethief · Member ·

    When another Volunteer who helps with CSS editing logs in they will assist you. Please be patient while waiting.

  • dcoleonline · Staff ·

    Hi @bigleapoffaithdogtraining,

    I would like the color of each slide to be different.

    So right now I see that some of your images are filling the slider, while others are too small. According to the section at the bottom of the guide:

    Featured Image size for posts used in Featured Content (slider) is 2000 wide by 900 tall.

    So the images that don’t fill the slider would ideally be replaced by ones that are at least 2000 x 900. However, if you don’t want to do that, the grey background will appear on either side of the smaller images.

    When you mention having a different color for each slide, are you saying that you’d want the grey background to be different, or are you referring to something else?

  • dcoleonline · Staff ·

    Ah, sorry, I was reading the body of the thread and forgot that you mentioned text color in the title of the thread. I’ll check on that for you now.

  • dcoleonline · Staff ·

    So, yes the text color can be changed on a per-slide basis.

    Here’s how to change it for the first slide:

    /*Change color of text in the first slide*/

.featured-slider-container .single-slide:nth-of-type(1) * {
    color: #00cccc;
}

    You can replace the #00cccc color value with any HTML hex color value.

    To change the color of the subsequent slides, copy the same code, and change the number in the parenthesis to match the slide number you want to change.

    So for slide 2, it would look like this:

    /*Change color of text in the second slide*/

.featured-slider-container .single-slide:nth-of-type(2) * {
    color: #00cccc;
}

    Keep in mind that some colors may be hard to read on top of the image you’re using them with, so you’ll want to be careful with your color selection.

  • The topic ‘Text color in slides of pictures’ is closed to new replies.