Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 19, 2021 at 5:23 pm #1289246
    CarletonTorpin

    I’ve got a page that I’ve linked to in the private-content area, and on that page I’m using the “Featured-Image Slider” from the Enfold theme.

    At present, the featured images are displaying properly, but I would like more control over where the text appears.

    I have three questions regarding the Featured-Image Slider:

    – How do I adjust the Featured-Image Slider’s text so that it aligns close to the bottom, rather than the center of the image?.

    – How do I adjust the Featured-Image Slider’s text element color and shadow effect?

    – How do I best create an overlay image that properly scales with the Featured-Image Slider?

    In the example link I’ve included, you’ll see that there is an image-overlay currently applied to the top-left corner of the Featured-Image Slider, but it tiles oddly sometimes.

    I’d like to upload a properly-sized overlay image that still looks sharp, but doesn’t tile itself, but I don’t know what resolution would be best.

    Thank you for any assistance,

    Carleton

    March 23, 2021 at 6:08 am #1289767
    Rikard

    Hey CarletonTorpin,

    Please try the following in Quick CSS under Enfold->General Styling:

    1.

    .slideshow_align_caption {
    vertical-align: bottom;
}

    2.

    .slideshow_align_caption h2 a {
    color: red;
}

.avia-featureimage-slideshow .slideshow_caption h2 {
    margin: 0;
    text-shadow: 0px 0px 3px rgb(0 0 0 / 50%);
}

    3. I’m not sure I understand what you mean by this, could you try to explain a bit further or post a screenshot highlighting your intentions?

    Best regards,
    Rikard

    March 23, 2021 at 5:37 pm #1289959
    CarletonTorpin

    Thank you for the solutions!

    Disregard #3, because I’ve figured out a solution for that.

    I’ve applied the CSS you wrote, and I adjusted them a bit further, and now I need just a little more help to get them finished.

    I’ve included a screenshot in the private content area, with more information.

    I’d like the text to align all the way to the bottom-right corner, similar to how the image overlay on the slider is in the very top-left corner.

    I’ve included an image that shows where the text is currently appearing, and where I’d like it to appear with additional modifications.

    Additionally, can I make it so that the drop shadow effect is white instead of black?

    Thank you again,

    Carleton

    March 27, 2021 at 7:16 am #1290697
    Rikard

    Hi,

    Thanks for the update. Please try this CSS as well:

    .slideshow_caption {
    padding: 0;
}
.avia-featureimage-slideshow .slideshow_caption h2 {
    text-shadow: 0 0 3px rgb(255 255 255);
    text-align: right !important;
}

    Best regards,
    Rikard

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.