[Support request] Blog Layout Changes

[jack]

Hey Guys,

I’m trying to get my blog posts to look really similar to this:
https://onlinemediamasters.com/properly-size-images-wordpress/

My page currently looks like this:
https://jackshelton.com/test-post/

There’s some white space on either side. I’d like there to be that blue background color slightly above the post like on the other site. Pretty much just like the post up top.

What I’ve done so far is added some CSS to make the background blue:
body.single.single-post, body.single.single-post main#main .inside-article {
background-color: rgba(14,163,232,0.1);
}

I’ve also changed the container width in the element to 800px, but I’m not sure as to why there is a larger portion of white space to either side on the screen still. If anyone could assist I would really appreciate it. I’m very new to GeneratePress, and I generally don’t like reaching out unless I really need it but I’ve looked through the docs and can’t seem to find how to implement this.

[Ying]

I’d like there to be that blue background color slightly above the post like on the other site.

Go to customizer > layout > container > Content Layout, change it to separate containers.

What I’ve done so far is added some CSS to make the background blue:

You don’t need CSS for that, you can set the body background color at customizer > colors > body.
And you can set the content background color at customizer > colors > content.

but I’m not sure as to why there is a larger portion of white space to either side on the screen still

It is 800px already.

You are usingblock element - content template for the post layout, go to this block element, and toggle the Keep default post container option, so that the theme settings for container will kick in.

Let me know if you need further assistance 🙂

[jack]

Thanks so much Ying!

It looks much better now.

https://jackshelton.com/test-post/

Do you know any setting off the top of your head that would make my top section similar to his as well?

https://onlinemediamasters.com/namehero-review/

The only thing I can think of would be adding my own icon, linking the author to an about me page, and maybe adding a comment icon and linking to the header?

I really appreciate the help again thank you!!!

[Fernando]

Hi Jack,

To clarify, are you referring to the Header? If so, we can start of with the colors. In the Appearance > Customize > Colors, change the Header Background color, and the Primary Navigation Text color.

Then, upload a white logo.

Or, do you want to apply this only in the Posts page? Let us know.

[jack]

My bad for not clarifying. I’m talking about this area of his blog post

https://gyazo.com/3a4d3bf26b7044fa1f5f78b24dfd83d8

I want to add an avatar, and comment emoticon, pretty much make my blog page

https://jackshelton.com/test-post/

Exactly like this style, I’m wondering if there is any sort of preset the way he set that up, or if it’s a custom emoji he found, and he added the avatar in himself. If you’re aware of that and know where to add it I would love to hear about it. Thanks in advance!

[Fernando]

I see. Thank you for clarifying.

You can use Either a Block Element – Post Navigation or Page Hero.

See: https://docs.generatepress.com/article/block-element-post-meta-template/

Also see: https://docs.generatepress.com/article/block-element-page-hero/

To add the Comment Count, you can try Leo’s response here: https://generatepress.com/forums/topic/number-of-comments-in-header-element/#post-1652207

As for the emoji, are you referring to the Comment logo?

[jack]

Correct. The comment icon and then the count next to it.

For the avatar, would I just add my own inline image to the Element using GeneratePress?

[Fernando]

You can use a GB Image Block, and place everything in a Grid Block.

The Comment icon is a custom SVG.

[Author]

Posts