Caption above image

Hi @mica123. Thanks for using MetaSlider.

There are several ways to do this.

You can choose a theme that has different caption placement: https://www.metaslider.com/docs/more-themes/

You can use CSS to modify an existing theme: https://www.metaslider.com/docs/custom-css/

You can use the “Theme Editor” feature: https://www.metaslider.com/docs/theme-editor-introduction/

Thank you. None of the themes have caption above the image unless I am missing something?

It would seem that I have to find my own way how to implement this in CSS.

Thank you.

Hi @mica123

to move the caption above, please try adding this custom CSS:

.metaslider .nivo-caption {
    top: 0px;
}

Please ignore previous suggestion and try this one instead:

.metaslider .caption-wrap {
  top: 0;
  bottom: unset !important;
}

Thank you very much for getting back to me. Alas, it doesn’t work.

May I have a link to preview your slideshow?

Hi @mica123. That code was for the default theme and may need modifying depending on your theme. We have some sample CSS snippets here: https://www.metaslider.com/docs/change-caption-styles/

I very much appreciate you both getting back to me. My site is not live, it is in development. I am using the clarity theme. Would that help?

In that case this should do the job:

.metaslider-flex.ms-theme-clarity .ms-image > .metaslider_image_link,
.metaslider-flex.ms-theme-clarity .ms-image > img {
    order: 2;
}

That’s great, it does work indeed. Thank you so much.

If I can trouble you, I have the heading now above the image, thanks to you. Would it be possible for me to have an explanatory paragraph under the image as well?

Thanks so much again for the great support.

• This reply was modified 1 month, 3 weeks ago by mica123.

The only field to add text is the caption.

We’ve not heard from you in over a week so are closing this discussion. Please post back if this remains an issue.

Thank you for the response. I am grateful for your help. I was hoping that it would be possible to add text under the image as well. It was disappointing to learn that it is not possible. So, I suppose this still remains an issue for me.