Add text to top of blog landing page

Site URL: http://hiddensouth.com/journal

I'm trying to do something that seems like it would be very simple. I'd like to have a paragraph of text that appears before the individual posts on my blog landing page. I believe that some templates insert the description that you write in the settings at the top of the page. Unfortunately it looks like the Tudor template doesn't do that.

Is there possibly code that I can inject in the header that will accomplish this?

same text for all posts? or?

also do you use Personal Plan or higher?

I only want the text to appear on the main blog page not the individual post pages. I simply want a paragraph of text describing what the blog is.

I have a basic commerce plan.

Add to Journal Page Settings > Advanced > Header

<style>
  div#blogList:before {
    content: "tuanphan tuan";
    display: block;
    text-align: center;
    margin-bottom: 20px;
}
</style>

Th did the trick. Thanks!

On 11/4/2020 at 7:40 PM, hiddensouth said:

Th did the trick. Thanks!

I see header seems big on scroll. You can add this to Home > Design > Custom CSS to resize header logo on scroll.

/* resize header logo on scroll */
.logo-image img {
    transition: all 0.5s;
}
.header-tucked .logo-image img {
    max-height: 60px;
}

This page http://www.thehiddensouth.com/thehiddensouth

 has long content on mobile, you can consider adding a back to top button. I think on forum, you will see some code to do this.

I'm wanting to do the same thing using the OM template but this code doesn't seem to work for me. Any tips?

On 7/30/2021 at 2:06 AM, tracey said:

I'm wanting to do the same thing using the OM template but this code doesn't seem to work for me. Any tips?

Hi. Can you share link to blog landing page on your site? We can help easier

On 10/27/2020 at 3:09 AM, tuanphan said:

same text for all posts? or?

also do you use Personal Plan or higher?

Hello, can you help with making the same text appear for all blog posts please?

On 2/16/2022 at 6:55 PM, claudiatinn said:

Hello, can you help with making the same text appear for all blog posts please?

Just add to Design > Custom CSS

div#blogList:before {
    content: "tuanphan tuan";
    display: block;
    text-align: center;
    margin-bottom: 20px;
}

Hello! I have tried out this code and it works great but when I use the masonry alignment of blog posts the images cover the text. Is there a way to have my text above the images in the masonry grid alignment? I would prefer to have my images organized with the masonry option if possible. 

This is the page: https://www.technicolordino.com/work

50 minutes ago, funzzypants said:

Hello! I have tried out this code and it works great but when I use the masonry alignment of blog posts the images cover the text. Is there a way to have my text above the images in the masonry grid alignment? I would prefer to have my images organized with the masonry option if possible. 

 

This is the page: https://www.technicolordino.com/work

It is fine to me

It's fine when I have the images arranged with the "Baseline arrangement" but when I choose the "Masonry arrangement" the text hides behind the images as shown in the image below. I have tried adjusting everything I can thus far and it remains the same with the "Masonry arrangement." 

On 6/29/2023 at 12:44 AM, funzzypants said:

It's fine when I have the images arranged with the "Baseline arrangement" but when I choose the "Masonry arrangement" the text hides behind the images as shown in the image below. I have tried adjusting everything I can thus far and it remains the same with the "Masonry arrangement." 

You can choose Masonry first, then we can check easier

I've saved the Masonry setting. Thank you for the help! 

Nick 

On 7/8/2023 at 4:48 AM, funzzypants said:

I've saved the Masonry setting. Thank you for the help! 

Nick 

Try this new code

div#blogList:Before {
    content: "This journal demonstrates the various projects I have been working on. Click each images to see more.";
    display: block;
    text-align: center;
    margin-bottom: 70px;
    position: relative;
    top: -50px;
}
.tweak-blog-list-max-width-narrow .blog-list {
    margin-top: 100px !important;
}

Sorry, but it doesn't seem to have worked unless I am entering the code wrong on my end. 

On 7/10/2023 at 10:57 AM, funzzypants said:

Sorry, but it doesn't seem to have worked unless I am entering the code wrong on my end. 

I see you added code to Page Header or Code Injection

But the code should be at Design > Custom CSS

Ah! Thanks for the help. Looks all good now 

Hello @tuanphan! I’m having the same issue here and have tried the above code (in the correct place) but it doesn’t seem to change anything.

Here’s the url:

https://tinyurl.com/mryuv6j2

(I’ve removed the code for now).

Essentially just want a bit of intro text on the main blog so that people have context for what the blog is used for - any help much appreciated! 

On 6/13/2024 at 7:09 PM, Grimfango said:

Hello @tuanphan! I’m having the same issue here and have tried the above code (in the correct place) but it doesn’t seem to change anything.

Here’s the url:

https://tinyurl.com/mryuv6j2

(I’ve removed the code for now).

 

Essentially just want a bit of intro text on the main blog so that people have context for what the blog is used for - any help much appreciated! 

You can use this code instead

div.article-list.hfeed:before {
    content: "This journal demonstrates the various projects I have been working on. Click each images to see more.";
    display: block;
    text-align: center;
    margin-bottom: 70px;
    position: relative;
}

Amazing! Thanks so much. Been trying to figure that out all week. I don’t suppose you could also tell me how to add a header to that same section. So there’s a header ‘blog’ to the page in h1 style, followed by the ‘this journal demonstrates…’ in body text style. Many thanks! 

21 hours ago, Grimfango said:

Amazing! Thanks so much. Been trying to figure that out all week. I don’t suppose you could also tell me how to add a header to that same section. So there’s a header ‘blog’ to the page in h1 style, followed by the ‘this journal demonstrates…’ in body text style. Many thanks! 

You can use this new code

div.article-list.hfeed:before {
    content: "MTD \A Here you'll find the latest news, projects and happenings.";
    white-space: pre-wrap;
    display: block;
    text-align: left;
    margin-bottom: 40px;
    position: relative
}
div.article-list.hfeed::first-line {
    font-size: 30px;
}