How to add a title to blog landing page 7.0

Site URL: www.twigsbranchphotography.com

Page url: https://www.twigsbranchphotography.com/shropshire-photography-blog

I want to add a title to my blog's landing page but as I can't add blocks I think I need custom code to add it in. How can I do that please?

I am using a Mint template on 7.0 and have very little tech knowledge so please bear with me! 

You mean add a Site Title above Blog Image or?

3 hours ago, tuanphan said:

You mean add a Site Title above Blog Image or?

Hi @tuanphan -  I want to add some text content at top of my blog landing page as an introduction, before the list of blogs. But as I'm on 7.0 I don't seem to be able to add content blocks the usual way on this page? 

On 3/25/2024 at 6:57 PM, twigsplace said:

Hi @tuanphan -  I want to add some text content at top of my blog landing page as an introduction, before the list of blogs. But as I'm on 7.0 I don't seem to be able to add content blocks the usual way on this page? 

I see you solved by using Summary Block? If you still need help, just share link to a blog page, I can give you some CSS code to add text

9 hours ago, tuanphan said:

I see you solved by using Summary Block? If you still need help, just share link to a blog page, I can give you some CSS code to add text

Hey @tuanphan - yes I created a new content page and added the blog as a summary block, then moved the original blog to the unlinked section - no idea if this is a good idea though? Or would it be better to add text to the original blog page and delete the summary page version?

The URL of the original blog is: www.twigsbranchphotography.com/shropshire-photography-blogs

Many thanks! 

Hello - I wanted to follow up on this original request. I'm in a similar position as the original poster, but am looking for something that works directly on the blog page as an introduction to the blog, rather than a separate summary page. The idea would be to have a small paragraph above the most recent blog post. I've found some other threads sharing CSS solutions, but none seem to quite align with what I'm looking for.

I'm on 7.0, Om template in the Montauk family. Here's a link to the blog itself: https://wilsontannersmith.com/hcs-iii

This intro paragraph would sit just before the main blog body, so above the "Misc. Videos" title there, but below all the site navigation. (of course the blog area itself would move down a little to accommodate the extra text).

Thanks!

On 4/9/2024 at 4:30 PM, WilsonTSmith said:

Hello - I wanted to follow up on this original request. I'm in a similar position as the original poster, but am looking for something that works directly on the blog page as an introduction to the blog, rather than a separate summary page. The idea would be to have a small paragraph above the most recent blog post. I've found some other threads sharing CSS solutions, but none seem to quite align with what I'm looking for.

I'm on 7.0, Om template in the Montauk family. Here's a link to the blog itself: https://wilsontannersmith.com/hcs-iii

This intro paragraph would sit just before the main blog body, so above the "Misc. Videos" title there, but below all the site navigation. (of course the blog area itself would move down a little to accommodate the extra text).

Thanks!

You can use this code to Website > Website Tools > Custom CSS

body#collection-5ecc68a1e3d0ce7bf222b572 h1.entry-title:after {
    content: "enter your text here enter your text here";
    display: block;
    font-size: 16px;
}

Hi,

I've got the same question on how to add a small introduction to the blog page itself. I guess this code could answer but the "5ecc68a1e3d0ce7bf222b572" key seems to be personnal.

Our web site : digitalsace.fr

Many thanks in advance

body#collection-5ecc68a1e3d0ce7bf222b572 h1.entry-title:after {
    content: "enter your text here enter your text here";
    display: block;
    font-size: 16px;
}

On 4/15/2024 at 7:03 PM, Manu67 said:

Hi,

 

I've got the same question on how to add a small introduction to the blog page itself. I guess this code could answer but the "5ecc68a1e3d0ce7bf222b572" key seems to be personnal.

 

Our web site : digitalsace.fr

 

Many thanks in advance

 

body#collection-5ecc68a1e3d0ce7bf222b572 h1.entry-title:after {
    content: "enter your text here enter your text here";
    display: block;
    font-size: 16px;
}

You mean blog list page or blog post detail? If list page, use this CSS code

body#collection-5f5f773ef54b1d692851fe70  h1.blog-title:after {
    content: "enter your text here enter your text here";
    display: block;
    font-size: 16px;
}

Hi TuanPhan,

Thanks for your reply.

I do this but nothing happend : 

What's the Matter?

On 4/13/2024 at 9:50 AM, tuanphan said:

You can use this code to Website > Website Tools > Custom CSS

body#collection-5ecc68a1e3d0ce7bf222b572 h1.entry-title:after {
    content: "enter your text here enter your text here";
    display: block;
    font-size: 16px;
}

Thanks for the reply! I'm looking for a header that would sit above any most recent blog post, such that it would serve as a header to the entire blog, rather than sit under the title of a given post as "Misc. Videos" is . Sorry if that was unclear! Is there a different CSS code I could use for that? Thank you!

On 4/18/2024 at 5:51 PM, Manu67 said:

Hi TuanPhan,

 

Thanks for your reply.

 

I do this but nothing happend : 

What's the Matter?

 

 

 

Your screenshot is Page Header Code Injection, to add code to this position, you need to use this new code

<style>
  h1.entry-title:after {
    content: "enter your text here enter your text here";
    display: block;
    font-size: 16px;
}
</style>

On 4/20/2024 at 3:36 AM, WilsonTSmith said:

Thanks for the reply! I'm looking for a header that would sit above any most recent blog post, such that it would serve as a header to the entire blog, rather than sit under the title of a given post as "Misc. Videos" is . Sorry if that was unclear! Is there a different CSS code I could use for that? Thank you!

You mean add text to this position?

TuanPhan

I tried this but nothing happend :

On 4/22/2024 at 11:21 AM, tuanphan said:

Your screenshot is Page Header Code Injection, to add code to this position, you need to use this new code

<style>
  h1.entry-title:after {
    content: "enter your text here enter your text here";
    display: block;
    font-size: 16px;
}
</style>

 

You mean add text to this position?

Yes, that screenshot location is correct - the idea is that the header text would be independent of the blog posts. Previously I was using a template which allowed this, but it seems the template I'm currently using does not.

On 4/22/2024 at 7:24 PM, Manu67 said:

TuanPhan

 

I tried this but nothing happend :

 

I see you edited my code, there is space here

space will make id invalid, my code has no space

On 4/24/2024 at 5:32 PM, WilsonTSmith said:

Yes, that screenshot location is correct - the idea is that the header text would be independent of the blog posts. Previously I was using a template which allowed this, but it seems the template I'm currently using does not.

So did you code work or you still need help?

Hi TuanPhan, 

Thans for your help

The code makes appear a "subtile" for each post. That's not exactly what I want. I would like to get a Title for the global main blog page (digitalsace.fr/blog)

On 4/26/2024 at 5:22 PM, Manu67 said:

Hi TuanPhan, 

Thans for your help

The code makes appear a "subtile" for each post. That's not exactly what I want. I would like to get a Title for the global main blog page (digitalsace.fr/blog)

You can use this code to Custom CSS

body.view-list [data-section-id="61b9bb53963c00104414e46f"] .content-wrapper .content:before {
    content: "abcxzy  1 2 3 4 5";
    text-align:center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
}

Hi Tuan Phan,

Thanks again for your help.

We are on the right way, as I can with this code add a "title" on the blog home page.

But, this title is going on blog tags, especially on smartphones.

Is there a way to make tags disappear for example or another workaround ?

Thanks in advance,

Emmanuel
 

On 4/29/2024 at 2:43 AM, Manu67 said:

Hi Tuan Phan,

Thanks again for your help.

We are on the right way, as I can with this code add a "title" on the blog home page.

But, this title is going on blog tags, especially on smartphones.

Is there a way to make tags disappear for example or another workaround ?

Thanks in advance,

Emmanuel
 

You can use this new code

body.view-list [data-section-id="61b9bb53963c00104414e46f"] .content-wrapper .content:before {
    content: "What do they got in there? King Kong? Hey, you know how I'm, like, always trying to save the planet?";
    text-align:center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
}
@media screen and (max-width:767px) {
    body.view-list [data-section-id="61b9bb53963c00104414e46f"] .content-wrapper .content:before {
        display: none;
    }
    body.view-list [data-section-id="61b9bb53963c00104414e46f"] div#block-yui_3_17_2_1_1639562063313_3002:before {
    content: "What do they got in there? King Kong? Hey, you know how I'm, like, always trying to save the planet?";
    text-align:center;
        margin-bottom: 30px;
        display: block;
}
}

On 4/26/2024 at 10:26 AM, tuanphan said:

So did you code work or you still need help?

Hello, Sorry no it didn't - that code snippet I tried only placed it "within" the blog post's body itself, not as a header for the entire blog like the screenshot you shared.

On 4/30/2024 at 10:32 AM, tuanphan said:

You can use this new code

body.view-list [data-section-id="61b9bb53963c00104414e46f"] .content-wrapper .content:before {
    content: "What do they got in there? King Kong? Hey, you know how I'm, like, always trying to save the planet?";
    text-align:center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
}
@media screen and (max-width:767px) {
    body.view-list [data-section-id="61b9bb53963c00104414e46f"] .content-wrapper .content:before {
        display: none;
    }
    body.view-list [data-section-id="61b9bb53963c00104414e46f"] div#block-yui_3_17_2_1_1639562063313_3002:before {
    content: "What do they got in there? King Kong? Hey, you know how I'm, like, always trying to save the planet?";
    text-align:center;
        margin-bottom: 30px;
        display: block;
}
}

 

Hi TuanPhan GREAT. Thanks a lot.

Just a small thing : is it possible to make it bigger (H1 or H2 for example) ?

On 5/2/2024 at 11:27 PM, Manu67 said:

Hi TuanPhan GREAT. Thanks a lot.

 

Just a small thing : is it possible to make it bigger (H1 or H2 for example) ?

You can use font-size to the code

body.view-list [data-section-id="61b9bb53963c00104414e46f"] .content-wrapper .content:before {
    content: "What do they got in there? King Kong? Hey, you know how I'm, like, always trying to save the planet?";
    text-align:center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
	font-size: 30px;
}
@media screen and (max-width:767px) {
    body.view-list [data-section-id="61b9bb53963c00104414e46f"] .content-wrapper .content:before {
        display: none;
    }
    body.view-list [data-section-id="61b9bb53963c00104414e46f"] div#block-yui_3_17_2_1_1639562063313_3002:before {
    content: "What do they got in there? King Kong? Hey, you know how I'm, like, always trying to save the planet?";
    text-align:center;
        margin-bottom: 30px;
        display: block;
	font-size: 20px;
}
}

On 5/1/2024 at 10:16 PM, WilsonTSmith said:

Hello, Sorry no it didn't - that code snippet I tried only placed it "within" the blog post's body itself, not as a header for the entire blog like the screenshot you shared.

I see it already show fine here

https://wilsontannersmith.com/hcs-iii