Add text to top of blog page

[jamesgwhite]

Hey all.

I’m trying to find a way to add text to the top of my blog page, between the head the posts/ side bar.

NOJAM - Blog

Thanks in advance
James

[marc_a]

Hi Jamesgwhite,

In order for you to add text to the top of your blog page between the head posts/ sidebar. You need to read this document on how the widgets/sidebar works.

Thank you.

[jamesgwhite]

From what I can see this is about creating new sidebars, which I don’t need. All I want to do is add some description text to the top of the blog page.

[marc_a]

Hi @jamesgwhite,

Upon understanding your request, you want to add a text on this area right? Please see the image below with the red box.

In order for you to add text in the red box section

1.) You need to go with Appearance > Widgets
2.) Find the widget bar you are using in your blog page Ex: “Main Sidebar”
3.) Drag the text element to the “Main Sidebar”

4.) Enter the title of the text then hit save.

I hope it will help you solve your issue.

Thank you.

[jamesgwhite]

Nope, I want text across the whole page. but ideally don’t want to have to create a new header with a subheading. So the text will be above both the blog posts and sidebar - centred to the whole page.

[marc_a]

Hi @jamesgwhite,

By default, Pro does not have a default blog title. You will need a little bit of code to be able to do so. Because what you are trying to accomplish requires template customization, we would highly suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when Pro update is released. After your child theme is set up, please review how we recommend making template changes in Customization Best Practices. You can also check the available hooks and filters of Pro here.

After the child theme is set up, please add the following code in your child theme’s functions.php file.

// Add custom blog title
function add_blog_title(){ ?>
	<?php if ( is_home() ) : ?>
    <header class="x-header-landmark x-container max width">
      <h1 class="h-landmark"><span>Custom Blog Title</span></h1>
    </header>
	<?php endif; ?>
<?php }
add_filter('x_after_masthead_end', 'add_blog_title');

Please don’t forget to change the title in the code “Custom Blog Title” to your desire blog title.

I hope this will help solve your issue.

Thank you.

[jamesgwhite]

Thanks for helping, I gave it a try and even added an additional line, had to reduce the h1 size down but left with this mess. Spacing obviously doesn’t work and strange lines around the text.

Any other ideas?

[marc_a]

Hi @jamesgwhite,

I am glad that the title is showing up on your blog page. Then to help on your second problem can you apply the changes in your live site so that we can take a look and at the same time we can help you solve the spacing issues and the strange lines around the text.

Thank you.

[jamesgwhite]

Thanks its live now. I’m looking for the text to be the same size as on this page https://www.nojamyoga.com/social-feed/

[friech]

Hi @jamesgwhite,

@jamesgwhite

I’m looking for the text to be the same size as on this page https://www.nojamyoga.com/social-feed/

That is 28px for the Headline and 21px for the Subheadline.

For the headline since you’re using the Headline element, you can set its font size option directly to 28px

For the Subheadline, since that is custom, you need to apply a custom CSS on that.

e.g.

h3.h-landmark {
/*CSS Property value here*/
}

CSS Properties
font-size
letter-spacing

Please keep in mind that further customization from here would fall outside of the scope of support that we can offer.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

[jamesgwhite]

Thanks so much for this, all sorted now

Really appreciate your help.

James

[jamesgwhite]

@friech

I do appear to have a strange grey line around the text. Not sure where to go to remove this either.

`

[alexander]

Hi @jamesgwhite,

Those accent lines are simply part of the Integrity blog style. You could remove them with some CSS:

.h-landmark span:before, .h-landmark span:after {
    height: 0;
}