Text on Header in Blog

Hmmm…see now I’m confused. I know that I can go into a page and edit it with cornerstone. That’s easy - but you can’t really edit posts the same way, so I have no idea how or where to change that gap.

Is it in customize? I looked there, but didn’t see that gap in the CSS.

Feel free to log into my site if you’d like

Hi there,

That’s not part of CSS, it’s a gap element added to your content and you can only change its size by inspecting it and change its setting. The same way as how you change other cornerstone elements’ setting.

Though, with your screenshot, it looks like it’s added through shortcode instead of using cornerstone. That case, you should look for gap shortcode and change its size, example, [gap], [x_gap], or [cs_gap]

Thanks!

I have to be honest,I have no idea how to change that. Any suggestions? Anyway you could log in and make that small change for me? Sorry for the inconvenience

Hi There,

Look for the Gap shortcode on your content, and add/adjust the size property of it.

e.g.

[x_gap size="25%" class="my-gap"]

Gap shortcode

Cheers!

Right, I’ve been told that there is a gap there, but let me try to communicate this a bit better…

When editing a normal page, you can go into corner stone and add gaps and photos and everything else on the entire page. As you know, on blogs this isn’t the same. While you can edit most of the page with cornerstone, you can’t really do a lot with the featured image. So on one of the blog pages, it won’t even let me add in a gap. I looked through all my CSS and I don’t see it there either. You mention being a shortcode, but I really don’t see it. Any help with this would be appreciated.

Hi There,

You can adjust the size of the gap that is above the title of your featured image by adding the following code to Theme Options CSS

.overlay .x-gap {
margin-top: 20% !important;
}

Hope it helps

I’ve tried and I cannot seem to figure out how to move the headline up in the middle of the featured image. I’ve looked at the inspector but cant seem to find a gap.

I’m also trying to make the text white

Any suggestions?

Hello There,

Thanks for updating this thread. I am sure you are using a custom function or template modification in displaying the featured image. Please provide access to your site so that I can examine how you have created the posts and then I can provide a tailored solution to your issue.

Best Regards.

OK great! Thanks!

Hi there,

Are you referring to this text?

Jana + Michael // Lionheart Chateau Wedding

You already have the custom CSS that position it.

.featured-image .caption {
    position: absolute;
    z-index: 999;
    color: #fff !important;
    bottom: 15%;
}

You just need to increase the bottom value to push it on the center.

Thanks.

So I’m finding that changing the color doesn’t seem to work as the title of the page (ex. Jana + Michael // Lionheart Chateau Wedding) stays a little bit transparent. How do make it less transparent?

I’d like the color to be white

Hello There,

Please edit your parallax.css file and update this code:

.featured-image .caption h1 {
   color: rgba(255, 255, 255, 0.7) !important;
}

into this one:

.featured-image .caption h1 {
   color: rgba(255, 255, 255, 1) !important;
}

This change should make the title color to white.

Do you mind telling me where to find that CSS code? I looked under all my global CSS and it’s not there. I looked under the CSS for the specific blog page and don’t see it there either. Where can I go and edit this?

Hello There,

You have added a custom stylesheet parallax.css.
Please go to Appearance > Editor, find the parallax.css file and edit the css.

Please let us know how it goes.