[Resolved] How to Style Borders on Posts?

[Leo]

On the site we are developing, we are using GP Pro, and GenerateBlocks with no a page builder.

Can you please provide the URL of this site you are developing? I think I’ve asked this many times as well.

[Andres]

Hi Leo,

Thanks for responding.

Actually, you asked: “Can you update the URL to the site that you are developing so I can see the issue and what you are struggling with” (text made bold by me for clarity). I never sent it to you. It’s not possible to update a link that I never sent.

I only sent you the link to the post whose margin styling I wanted to replicate in order to start the conversation to avoid confusion, to make it clear what exactly it was that I wanted to replicate on the new site.

This is the URL to a post on the site we are developing:

For the sake of clarity, I want to replicate the LEFT, TOP, and RIGHT grey margins as they are on the post on our current site.

Thanks and have a good day.

Regards,

Andrés

[Leo]

I actually asked you to update the URL you’ve included in this topic and show a screenshot of how to do it:
https://generatepress.com/forums/topic/how-to-style-borders-on-posts/#post-1347493

Here is what you need to do:

– Remove the full width page builder container you are using and choose default instead:
https://docs.generatepress.com/article/page-builder-container/

– Go to Customizer > Colors > Body and choose #f4f4f4 for the body background color.

– Go to Customizer > Colors > Content and choose #ffffff for the content background color.

[Andres]

Hello Leo,

According to your instructions I:

1. Set the Page Builder Container on the post whose URL I sent in the last message to: Default

2. Set the Background color in Customizer > Colors > Body to #f4f4f4

3. Set the Background color in Customizer > Colors > Content to #f4f4f4

Below is a screenshot of each of these 3 configurations.

1. https://prnt.sc/t9y6c9

2. https://prnt.sc/t9y6rr

3. https://prnt.sc/t9y737

Question

What is the next step? After implementing the steps you recommended, grey margins did not appear on the post on our new site:

Regards,

Andrés

[Leo]

Can you try decreasing the container width to like 900px? Then you should see the grey margin on the side.

[Andres]

Hello Leo,

Which container width are you referring to? The container width of the post in question, or the container width option in Customizer?

From my understanding, “width” affects the width of a post, for example, along the X Axis. Is that correct?

Regards,

Andrés

[Tom]

The site container (Customize > Layout > Container) is very wide, which is why you’re not seeing the grey background color come through.

If you only want this layout on single posts, you could do something like this:

.single .container.grid-container {
    max-width: 900px;
    margin-top: 50px;
}

[Andres]

Hi Tom,

Thank you very, very, very much for stepping in!! That did the trick!! Just to make sure, it only target posts, right? I checked a page and category page, and it did not affect them, I just want to make sure.

I have the site container Customize > Layout > Container to 2000px as per a document on your site that suggest setting it to 2000px. Is this still recommended?

2 Questions when you have a moment

1. If I wanted to adjust the margins on some pages similarly, how would I modify the CSS you just provided to do so?

2. At the bottom of posts there is a green row. How can I make it full width as it is on this page: /

Again, many thanks!!

Have a good day.

Cheers,

Andrés

[Leo]

Just to make sure, it only target posts, right?

Yes – the .single selector Tom used is targeting single posts only.

I have the site container Customize > Layout > Container to 2000px as per a document on your site that suggest setting it to 2000px. Is this still recommended?

I’d say that would only be valid if you want the header footer and navigation all full width as well.

1. If I wanted to adjust the margins on some pages similarly, how would I modify the CSS you just provided to do so?

Are there any pages where you actually want everything to be full width? Just confirming as I feel like we are going in the wrong direction here.

2. At the bottom of posts https://wordpress-424710-1336702.cloudwaysapps.com/benefits-next-day-couples-session/, there is a green row. How can I make it full width as it is on this page: https://arenasfoto.com/client-resources/benefits-next-day-couples-session/

That case Tom’s CSS actually won’t work so we would need to take a step back again unfortunately.

Can you answer the container question I have first so I can provide the best method to go at this?

[Andres]

Hello Leo,

Site Container

I set the site container according to the recommendations on GP’s site. On our current site – not the one under development – the site container width in Customizer is set to 1160px. A developer created our current site. As I am not a developer – I’m just some guy whose working on his site to better his company while it’s been shut down for 4 months in the hopes he’ll still have a business when this is over – I’m just following GP’s recommendations.

On the current site, there’s a full-width hero slider on the homepage, a hero image header on a category page, and on most posts and pages there is that green row at the bottom. I checked, and on the current site, the navigation and footer width in Customizer > Layout > Container are set to Full, and Inner to Contained.

I would like to replicate these elements on the new site. I don’t know if this will required the site container to be 2000px.

I’m pretty sure I can recreate the hero slider and hero image with an a full-width header Element. I did it on the staging site (the new site has a staging site to practice on).

Regarding that green row, I used GenerateBlocks, if that helps.

These are pages on our current site have a full-width element:

Current Home Page: arenafoto.com (hero slider)

Category Page: areansfoto.com/gallery (hero image)

Given this information, what do you recommend I set the site container width to?

Thanks for your time and have a good day.

Regards,

Andrés

[Leo]

I would say:

– Set the customizer container width setting to 1160px – this should be the general width you want in the content throughout your site.

You don’t need to worry about header, navigation and footer widths as they have their own individual settings:
https://docs.generatepress.com/article/header-layout/
https://docs.generatepress.com/article/navigation-layout/
https://docs.generatepress.com/article/footer-layout/

– Then when you want any full width content, then we can use this option without changing the global container width in the customizer:
https://docs.generatepress.com/article/page-builder-container/

– Now for the green bar. Do you want that on every page of your site? or just on all single posts? or it’s just on one page?

And will you need to replicate that COSTA RICA WEDDING RESOURCES & TIPS as well?

There are several methods I can think of and the best method and complicity is a bit different depending on what you want.

[Andres]

Hello Leo,

Thanks for the detailed response!

I am going to implement these changes in the morning tomorrow.

The green bar will be on pretty much all posts. I will create it and then save it to the Reusable Blocks options to insert it with a click on posts. I will also have it on some pages. The only pages it will not be on is: homepage, contact page, and category pages.

I am not sure yet about the posts feed block at the bottom of pages – the one that is under the green row. It’s something I might leave out if it affects performance too much and just have it on the Contact page.

I’m not quite sure how to create it yet. I’m not sure it if would be easiest to use a grid with 3 rows and three columns using GenerateBlocks and use a heading and text with a URL embedded and have an image in the background using Background, or somehow do it with WP Show Posts Pro. The first option is probably the easiest.

I’ll get back to you in the morning tomorrow EST after redoing the site container width and reading the article you referenced.

Thanks a lot and have a good day.

Cheers!

Andrés

[Andres]

Good day, Leo,

I set the site container to 1160. Should I remove the CSS Tom provided for the grey margins?

Regarding the site container width, what criteria does one use to determine what the width should be, out of curiosity?

Whenever you have time, please let me know what you recommend regarding making that green row full width. If it helps, it is possible I will also have that “COSTA RICA WEDDING RESOURCES & TIPS” block too, but only on a few pages.

Thanks and have a good day.

Cheers!

Andrés

[Tom]

Hi there,

The container width is really up to you and your desired design, Something between 1100 – 1200 is pretty typical these days.

In GP Premium 1.11.0, we’re introducing Block Elements, so you could build that green row and then insert it above the footer on all single posts. This is the best method, but it’s not quite ready for public testing, yet. We’re hoping for next week.

Alternatively, you could set that green row to “alignfull”. This would require updating GenerateBlocks to the current release candidate version: https://generateblocks.com/generateblocks-1-1-0/

That way you could keep my CSS as is for the margins.

[Andres]

Hi Tom,

I hope you are having a good day.

Thank you for the information. I’ll wait for the next iteration of GP Premium to use the Block Element given you say it’s the best option. I don’t expect to have the new site ready for about 2 weeks, so it’s perfect timing!! I imagine it will be possible to save the block as a reusable item, insert on all posts for example) and then use the Block Element to target those posts to make that block full width.

Were I to want to apply the margin styling to pages (not posts), what would I have to do to the following CSS?

.single .container.grid-container {
    max-width: 900px;
    margin-top: 50px;
}

Enjoy the rest of your day, and please thank Leo for his help

Cheers!

Andrés

[Author]

Posts