How to Place Blog Post Title Over the Featured Image in DAWN Theme?

Above image: This is exactly what I would like to achieve.

On the blog posts, the title of the blog post, author and date with an overlay on the featured blog post image.

Basically

  • Post Featured Image
  • Post Title
  • Post Meta
  • Post Excerpt

I hope this explains it ok? Currently, the DAWN theme has all this under the featured image.

Thanks in advance.

Below: This is the current DAWN theme layout.

Hello @Pandaboomer ,

It’s GemPages support team and glad to support you today.

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

  1. Open your main-article theme file

  2. Move the below code to before the last above

# {{ article.title | escape }}

  1. Open your theme.liquid theme file

  2. Add the below code before


For example,

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

2 Likes

@GemPages Great Job! :+1:

Almost there!

I just need the overlay (slightly darkening the image) to help the text pop, and I would like the text white.

Thanks so much!

@GemPages It’s OK. I managed to work it out. Thank you for your previous assistance. It is much appreciated.

I added to the section-blog-post.css file:

.article-template .article-template__hero-container {
background-color: #413F3D;
}

.media {
opacity: 0.5;
}

.article-template__title:not(:only-child) {
margin-bottom: 1rem;
color: white;
text-align: center;
}

Problem Solved.

I hope others find my discussion/post useful.

2 Likes

Hello @Pandaboomer ,

It’s perfect.

I am also so glad that my solution can help.

Best regards,
GemPages Support Team

1 Like

Will this code work on the debut theme?

currently, I’m facing the same problem on my website. I don’t know where to start it because it has some different functionalities than Dawn. so can you help me with it?

Link to my website: https://www.industrialpuppy.com/blogs/news/unleashing-independence-3-things-to-know-when-looking-for-a-service-dog

I’ve just tried this and it works great for desktop, but when viewing via a mobile a lot of the article title letters get cut off. Did you notice this and if so did you find a fix?