How Do I Make Page Titles Appear and Add Space Between Header And Page Featured Image

[Jeannuke]

Hello, I am using the ethos stack of x themes pro

I have three issues on my site.

1. Suddenly there are no titles for all my PAGES. How do I make my page titles appear as they do for all my Posts. example

2. After creating a header using cornerstone, the featured image in my pages no touch my header. How do I add a space between my header and feature image for all my Pages. example

3. My the previous and next arrows in all my posts no longer show. all I see is the box which turns black when I hover my mouse over it. This used to work fine until this week. I do I restore this these buttons to the way their default setting?

These issues are making my head hurt as I can’t find solutions anywhere in the forum. Please help.

[ruenel]

Hello Jean,

Thanks for writing in!

1.) You are using a child theme. Do you have any modifications to the template files in your child theme? It seems that the _content-post-header.php has been modified or overridden in the child theme. We would love to check your site if we can have access to it. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​

To know how to create a secure note, please check this out: How The Forum Works

2.) You can edit your custom header and add a bottom margin in your bar settings so that you can add a space between your custom header and your featured image for all pages.

3.) Please go to Cornerstone > Theme Options > Miscellaneous and make sure that the Font Awesome is enabled so that the icons will display on your site.

By the way, please update your theme to the Pro theme 5.0.6 version.

Best Regards.

[Jeannuke]

hi I have managed to implement point number 3. the icons are back.

I am not sure how to do number 2. can you possibly give me steps to do that.

[tristup]

Hi Jean,

You need to add the Margin by adding the custom CSS into the Customize > Element CSS of the Bar as shown in the screenshot.

$el
{
    margin-bottom:50px;
}

Hope it helps.
Thanks

[Jeannuke]

Thank you this works

[prakash_s]

You are most welcome Jean.

[Jeannuke]

@ruenel

You can edit your custom header and add a bottom margin in your bar setti

I am still waiting for feedback regarding my missing page headers? the post headers appear but the page headers do not show and I have no clue how to change this

[ruenel]

Hello Jean,

“2.) After creating a header using cornerstone, the featured image in my pages no touch my header. How do I add a space between my header and feature image for all my Pages . example”

You have created only one custom header and you assigned it to display in the entire site.

The custom header has already been edited and a margin-bottom was added. So now, the header and your featured image have a space in between.

With your last question: “I am still waiting for feedback regarding my missing page headers? the post headers appear but the page headers do not show and I have no clue how to change this”:

We are not sure which page header are you looker for. Maybe you are talking about the default header that is now being replaced with the custom header.

Best Regards.

[Jeannuke]

hi ruenel,

My apologies. I was calling my page and post titles headers.

What I am referring to is my page and post titles. So, when you open a post, you will see the title appears but when you open a page, for example my about us page. There is no page title. All my pages have no titles. So what I meant to ask is, how can I get all my pages to have page titles too like my posts currently have?

[tristup]

Hi Jean,

You can use the The Title element to get the Page Title into the pages created through the Page Builder.

Hope it helps.
Thanks

[Jeannuke]

Hi tristup. Thanks for the pointer. I wanted to make the change to all my “Pages” . I tried page builder but it seems it is only for one page at a time. So I went to the lay out builder.

But now with layout builder when I add my main sidebar to the widget area all the styling for my sidebar is gone. The styling is no longer like the rest of my website (see the home page side bar for example.

How do I get the side bar to look the way it is supposed to with all the nice styling in the widget area when using layout builder?

[friech]

Hi Jean,

Thank you for the clarification, creating a Layout for your pages is not the answer. I did go ahead and unassign your custom Layout for the pages to resolve the sidebar issue.

Now to the page title (headline) issue, the page title (headline) that you’re looking for is part of the Default Header, now that you created a custom Header that page title is now gone.

So the solution is to add that title on your custom Header. I did go ahead and add a second bar containing the title on your header so your pages will have the title like before. This bar has a condition to specifically show on the pages so it will not duplicate the title on the blog posts.

Feel free to adjust this second bar as you see fit, if you feel that it’s too close on the content, please adjust the bottom padding of this bar.

Hope it helps,
Cheers!

[Jeannuke]

Hi friech

The bar idea is good but it looks rather odd as it does not match how headlines appear in my posts. Here are my issues

1. If my headline is long it stretches across over my side bar which I completely do not want
2. My ads now appear right under the title (headline) which looks too odd.
3. My Main header height is too much now. I prefer it narrower as it was before

I like the way the page title (headline) appears when I use the layout builder. It looks more uniform with how things appear on posts which is what I want.

If I can get the page title (headline) to appear exactly how my post titles appear then this problem is resolved.

Is there no existing css code I can use in the layout builder to fix my side bar? As the sidebar uses the standard ethos stack sidebar style, can’t we just copy the css for ethos side bar and apply it to this element in the layout builder?

[tristup]

Hi Jean,

Please find the answer to your issues below.

1. You are using a Layout with a sidebar, I would suggest you add the Title into the Left section where the content shows.

2. If you add the Title to the left section, the ads will be shown just above it, which does not look odd.

3. If you add the Title to the content section, the height of the Header will be automatically short.

NOTE: there is no such CSS code that can be copied to make the sidebar looks like the Ethos stack.

Hope it helps.
Thanks

[Jeannuke]

I managed to get the title part done well with layout builder. The only issue was my side bar. When I inserted it on the widget area it had completely no styling. The text was white and the titles had no borders. The only thing showing was the images.

So in other words you are saying I have to manually add the titles for every single page using page builder to get what I want? (That is a proper side bar + titles on every page)

[marc_a]

Hi Jean,

I suggest that you create a single layout template using the Layout Builder so that you don’t need to manually added the page title and you can globally style your sidebar inside the builder. To know more about Layout Builder, please check the articles below.

• https://theme.co/docs/layout-builder-overview
• https://www.youtube.com/channel/UCgY5E3tOI83kBEahh9Y3uRg/search?query=layout%20builder

Hope that helps.

[Jeannuke]

hi marc_a

You guys are taking me round in circles now.

the links you sent me are exactly what I used and I got the page titles I was looking for but now I could not get my sidebar to look the way look in the rest of my site.

After using the layout approach if you look back at the chain of messages here is what I have been told

1. Instead of using the layout builder put a bar below your header and the page title in the bar (I was not happy with this option though it solves the side bar issue)

2. It is not possible to make my sidebar look the way it does in the rest of my website using the layout builder approach to have my page titles appear on all pages.

3. Now you are saying it is possible using global styling.

I am happy to hear it is possible but I have no clue how to go about doing global styling. I did not write the code for my current sidebar, its the ethos stack preset style.

So my question now is how do I globally style my sidebar in the layout builder so that it looks like the preset ethos stack sidebar style that my entire website currently has?

Why does selecting my main sidebar in layout builder simply adopt the exiting style?

Once more I am clueless here. Please show me the steps, I would love to implement this.

Thanks

[ruenel]

Hello Jean,

Sorry for the confusion. Because you are using the Widget Area element, the styling of the widgets of your Main Sidebar was reset. To get this resolved, please do the following:

1.) Edit your custom single layout.

2.) In your Widget Area element, find the “Customize” option.

3.) Insert a custom x-sidebar in the class selector.

4.) In the inline Element CSS, you will have to insert this width override:

$el {
  width: 100%;
}

Set the x-sidebar class and insert the inline element CSS:

Final look in the preview:

Kindly let us know if this works out for you. Thanks.

[Jeannuke]

Thank you so much ruenel. My problem is solved. this was such a simple solution. I probably was not communicating my problem well.

I am happy and can rest easy now. God Speed

[tristup]

Hi Jean,

Glad that we are able to help you.

Thanks