Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • June 30, 2017 at 6:24 pm #815104
    tlchase

    Hello Kriesi,

    Thanks for the great support and theme. I’ve been looking through several closed tickets regarding changing the caption on images however most are for changing the caption position of the slider. I have a full width slider on the top of the page and then within the page, I am trying to have images with the caption a specific heading (h2) so that the font is the same as the slider font. Unfortunately the default caption font on images is different than the font on Sliders.
    How can I have the caption on an image the same font style as my headings but also a specific size (18px) just for these image captions? I would also want the captions centered and towards the bottom of the image.

    ***Image with sample of end result below.

    Thank you!

    July 1, 2017 at 7:15 am #815267
    Rikard

    Hey tlchase,

    They are using the same font, Bitter, though the captions are a lot smaller. What element did you use for the images? It looks like it’s not from the Layout Builder? If you wrote that yourself then you could add a class to the the text tag, like my-class, then you can target it with CSS like this:

    .my-class {
  font-size:18px;
}

    Best regards,
    Rikard

    July 3, 2017 at 4:34 pm #815948
    tlchase

    I am using the regular image Enfold Media Element. Please see below regarding specific image and caption placement from sample page and actual page we are creating.

    Thanks!

    July 4, 2017 at 5:00 am #816141
    Rikard

    Hi,

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

    .av-image-caption-overlay-center {
    padding: 0 !important;
    vertical-align: bottom !important;
    color:black !important;
    font-family: 'bitter' !important;
}

    Best regards,
    Rikard

    July 5, 2017 at 5:20 pm #816834
    tlchase

    Thank you Rikard,
    how can I achieve the darker background caption only for the image caption though? The caption is bottom and centered but the caption background only should be a darker overlay opacity of color #081e3f (per image below)

    Thank you!

    July 6, 2017 at 6:33 am #817056
    Rikard

    Hi,

    Try this:

    #top .av-image-caption-overlay-center p {
    background: rgba(8, 30, 63, 0.5) !important;
}

    Best regards,
    Rikard

    July 6, 2017 at 4:50 pm #817350
    tlchase

    Thank you Rikard, you rock! Really appreciate that…one last thing with this: is there any way to have the text change color (to #f7c225) when you hover over the image?

    Thanks again for your help!

    July 6, 2017 at 5:33 pm #817388
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    #top .av-image-caption-overlay-center:hover p {
    color: #f7c225;
}

    Best regards,
    Yigit

    July 6, 2017 at 5:40 pm #817394
    tlchase

    Hi Yigit! That worked like a charm..thank you both for your help and support!!

    July 6, 2017 at 5:47 pm #817397
    Sarah

    We’re glad to help! Do let us know here in the forums if you have any other questions or issues.

    We’d also appreciate it if you can take a moment to review our theme if you haven’t already. https://themeforest.net/downloads

    Thank you so much!

    Cheers,
    Sarah

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Image Caption change font to heading style’ is closed to new replies.