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

[Pandaboomer]

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.

 Current DAWN Blog Post layout

[GemPages · Accepted solution]

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

2. Open your main-article theme file

3. Move the below code to before the last </div> above

<h1 class="article-template__title" itemprop="headline">{{ article.title | escape }}</h1>

4. Open your theme.liquid theme file

5. Add the below code before </head>

<style>
.article-template .article-template__hero-container {
 position: relative;
}
.article-template .article-template__title {
 position: absolute;
 transform: translate(-50%, -50%);
 left: 50%;
 top: 50%;
}
</style>

For example,

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

Best regards,
GemPages Support Team

[GemPages · Accepted solution]

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

2. Open your main-article theme file

3. Move the below code to before the last </div> above

<h1 class="article-template__title" itemprop="headline">{{ article.title | escape }}</h1>

4. Open your theme.liquid theme file

5. Add the below code before </head>

<style>
.article-template .article-template__hero-container {
 position: relative;
}
.article-template .article-template__title {
 position: absolute;
 transform: translate(-50%, -50%);
 left: 50%;
 top: 50%;
}
</style>

For example,

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

Best regards,
GemPages Support Team

[Pandaboomer]

@GemPages  Great Job! 👍

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!

[Pandaboomer · Accepted solution]

@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.  

 

[GemPages]

Hello @Pandaboomer ,

It's perfect.

I am also so glad that my solution can help.

Best regards,
GemPages Support Team

[simon265]

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?

[Iamnabeel98]

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...