The Header Image On My Blog Is Not Available/Visible

Support
#1

Hi, I would like to add an image/text header, and a text block to the top of my blog page, but there is no way to do that.

When I tell WP which is the blog page in Settings > Reading, then I keep getting this message in the editor “A conflict on the front end of your site has prevented the preview from loading.”

When I don’t indicate a blog page to WP in Settings > Reading, then the blog posts do not appear at all (except for the latest 4 posts in that simple shortcode you provide.)

How do I get my blog page - http://justbringmeleads.com/blog/
To look like my other inner pages? - http://justbringmeleads.com/about/

Thanks.

#2

Hi There,

Unfortunely editing your blog page is not possible out of the box

What you can do instead is to not use Wordpress Blog Page and replace it with a normal page.

You can edit normally with Cornerstone.

To load your posts you can use our recent post element or what I believe is an even better solution, use one of our addons THE GRID or Essential Grid.

You can create a grid using your posts as source and apply the element to the page using Cornerstone.

Hope it helps

#3

Thank you for the answer. I will try that, but I would like to ask:

  • is there a way of showing MORE than just the 4 most recent posts, which is the only option that the shortcode gives me.
  • How do I make ALL of the posts visible?
  • Or have 10 posts visible per page, with, for example, a button or link a the bottom that allows people to click and view the next 10 posts?

I just need it to be like a normal blog page, but I HAVE to be able to put in the header image at the top of the page, or the website’s menu will not show! (you can see the ‘whiteout’ effect here… http://justbringmeleads.com/blog/)

Thank you!

#4

Hello… Anybody there???

#5

Hi There,

Just for future topics, self responding or bumping your post pushes it back in our Queue system so it takes longer to respond to.

1.) Is there a way of showing MORE than just the 4 most recent posts, which is the only option that the shortcode gives me.

  • By default, the recent posts element will display up to 4 items only. If you want to display more, you can insert another recent posts element and make use of the offset option so that the post items will not display duplicate items. For example, to display 12 posts, you will have to insert 3 recent posts element next to each other. In the first element, the offset is 0. In the second recent posts element, the offset is 4 and in the last element, the offset will be 8.

2.) How do I make ALL of the posts visible?

  • By default, WordPress will display up to 10 items. You can change this settings in Settings > Reading > Blog pages show at most option.

3.) The blog index will normally have a pagination so that you can click on page 2 for more post items.

If you created a normal page and have used recent posts elements to display the post items, the pagination will likely be not available since that page is not the default blog index.

I have checked your site and I noticed that:
a.) the header is messed up because you added this custom css:

.masthead {
    position: absolute;
    width: 100%;
}

If you remove this code, it should fixed the normal header.

b.) Your topbar contents and the menu items are all in white. Please change the colors in the theme options. You need to go to X > Launch > Options > Renew. The menu items can be changed in X > Launch > Options > Header > Links - Text

c.) And you also need to set the correct navbar top height. Please go to X > Launch > Options > Header > Navbar and set the “Navbar Top Height” to at least 135 pixels.

Hope this helps. Please let us know how it goes.

#6

You know, I have NO IDEA about that custom CSS. I have no memory of adding it. And I have no idea how to get rid of it… :worried I’l have to work out how to deal with that.

All of your other ideas sound great. I’ll try them and let you know how they go…

Thanks!

#7

Hello There,

You can find the code when you go to X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL CSS

I believe that you added that custom css so that it will be on top in your slider on the homepage. To avoid getting any conflicts, please remove this code:

/*
// Masthead.
*/

.masthead {
  position: absolute;
  width: 100%;
}

.single-post .masthead {
  position: relative;
  width: auto;
  background-color: #001937;
}

@media (max-width: 979px) {
  .masthead {
    position: relative;
    width: auto;
    background-color: #001937;
  }
}

And replace it with this code instead:

/*
// Masthead.
*/

.home .masthead {
  position: absolute;
  width: 100%;
}

.single-post .masthead {
  position: relative;
  width: auto;
  background-color: #001937;
}

@media (max-width: 979px) {
  .home .masthead {
    position: relative;
    width: auto;
    background-color: #001937;
  }
}

We would loved to know if this has work for you. Thank you.

#8

Hi there guys,

Yay! It all worked out really well. Points b) and c) in the first set of instructions, plus the code changes (adding in .home) in the second set of instructions all worked a treat, and now my site looks 100% better! I’m a very happy customer…

Thanks for all your help guys!

Andrea

#9

We’re delighted to assist you with this.

Cheers!