[Resolved] How to Style Borders on Posts?

[Andres]

Hi Tom,

Whenever you have a chance, I wanted to know if you could help me achieve a certain style regarding the borders on posts. You provided some guidance on this, but I was not able to work it out. My apologies.

The included URL is a post whose left, right, and upper grey borders I want to replicate. This site uses GP Pro + Elementor. The new site where I want to replicate these borders uses GP Pro with no page builder.

These are the site and post layout settings in case it helps.

Development Site Layout Settings
· Container Width: 2000
· Content Layout: One Container
· Content Alignment: Text
· Content Padding: 50 10 50 10

Development Post Layout Settings
· Post Layout: Set Full Width Content is enabled
· Container: Full Width
· Inner Container: Contained
· Container Width: 2000

I did try the CSS you recommended to reduce the width of the content area (see below) to reveal more of the background color, but it only moved the body to the left and the background did not appear.

“You can reduce the width of your content area when no sidebars are present like this:

.no-sidebar:not(.full-width-content) .site-content {
    max-width: 900px;
}

That will make it so more of the background color shows up.”
What do you recommend to do for the first step? Get the styling set on one page and then do something like this to target the posts for this style?

add_filter( 'body_class', function( $classes ) {
    if ( is_singular() ) {
        $alt_style = get_post_meta( get_the_ID(), 'alt_style', true );

        if ( $alt_style ) {
           $classes[] = 'has-alt-style';
        }
    }

    return $classes;
} );

Thank you Tom, and have a good day.

Andrés

[Leo]

Hi there,

I don’t see any borders on the site you’ve linked.

It’s simply using a grey body background color and a white content background color – both can be adjusted in the customizer.

If this doesn’t work, can you link me to your page in question?

[Andres]

Hello Leo,

Thanks for responding!! I must have use the incorrect terminology. Sorry, I’m not a developer. I am referring to the upper, left, and right grey areas on the page (the inner part where the content is, is white. What should I call them?

Thanks!

Andrés

[Leo]

I explained it above:

It’s simply using a grey body background color and a white content background color – both can be adjusted in the customizer.

[Andres]

Hi Leo,

Thanks for the response.

Would you mind guiding me through the process? I’m not a developer or coder, so telling me to to it in Customizer really is of not help, as there are probably hundreds of settings in Customizer.

Again, thanks and have a good day.

Regards,

Andrés

[Leo]

Body background color is in Colors > Body.

Content background color is in Colors > Content.

[Andres]

HiLeo,

I think there is a bit of a misunderstanding. The background color is already grey. How do I adjust the setting in Customizer to make the left, top, and right (borders? You did not reply to my question regarding the correct term) of a post like the borders in the URL I sent?

Also, don’t the settings in Customizer affect all the posts and pages on a site? As I mentioned in the first message, I want to achieve this on posts, not on all pages.

If you are too busy to help, would you mind if someone else helps me with this? It seems like you are really busy, and I don’t want to bother you.

Thanks,

Andrés

[Leo]

Can you link me to your site in question so I can see where the misunderstanding is coming from?

The example you’ve linked should be pretty straight forward to achieve using the customizer options.

[Andres]

Hi Leo,

When I sent the first message, I sent the URL of a post on our current site that shows the areas in grey that I want to replicate on the site we are developing.

* Would you please advise me of the correct term for what those areas are so we can be on the same page regarding this one point?

This is what I want to do:

1. Replicate the left, top, and right grey areas on the post the post in question on our current site (I’ve already provided you with the URL).

2. Replicate this style on just posts on the site we are developing. I do not want to have this style on all pages post, and archive pages site wide. So, I think it’s going to take more than doing it in Customizer.

If you need the URL for our site, the domain name is in the URL I sent. Just remove the category and post slugs. I prefer to not have URLs to my site posted all over the place. I hope you understand.

Again, please know that I am not a developer nor a coder. As such, telling me to do it in Customizer is of absolutely no help. It’s the same as being in a town you’ve never been to, and when you ask a local for directions to X location, they reply: “It’s down there by the old saw mill off the dirt road.” Please keep this in mind when providing instruction.

Thank you.

Regards,

Andrés

[Leo]

I sent the URL of a post on our current site that shows the areas in grey that I want to replicate on the site we are developing.

Can you update the URL to the site that you are developing so I can see the issue and what you are struggling with?

I’d appreciate that.

[Andres]

Hi Leo,

I did not send you the link to a post on the site we are developing, so I cannot update it.

I sent you the URL to a post on our current site. Did you not receive it?

Regards,

Andrés

[Leo]

If you Edit the original topic, then you can update the URL to the page where I can actually see the issue:
https://www.screencast.com/t/O88ZMxi48zs

I sent you the URL to a post on our current site. Did you not receive it?

Yes I did receive that – but it’s not helping as I can’t see the issue you are having.

I need the URL of the page that you are actually having the issue to be able to provide better help.

Let me know if this makes sense 🙂

[Andres]

Hi Leo,

Let’s start over and take it one step at a time.

Step 1

By clicking on the URL I provided in the first message, go to the post in question on our current site. Do you see the left, right, and top grey areas?

*** Please, please, please, tell me what these areas are called. I’ve politely asked you various times to tell me what they are called so we can be on the same page? Are they borders? Are they margins? What are they?

Regards,

Andrés

[Leo]

That site is using Elementor and looks like they are margins:
https://www.screencast.com/t/nhhFW56N

However, you cannot add color to margins, the colors are actually coming from the body background as I pointed out before:
https://www.screencast.com/t/RwX6DmFoj

[Andres]

Hi Leo,

Great! So they are called margins. Thanks for answering my question!!!

Just to clarify, on the post whose URL I sent you, you did see the left, top, and right (There is no bottom margin) grey margins?

Yes, Leo, I understand they are coming from the background as I mentioned in my first message. Thanks for the clarification.

Now, how to I replicate that look – those left, top, and right margins – in Generate Press only posts? On the site we are developing, we are using GP Pro, and GenerateBlocks with no a page builder.

Again, I am not a developer nor a coder. As such, please provide details.

Thanks Leo, and have a great day.

Cheers!

[Author]

Posts