[Resolved] Different Outer Border Sizes Within Containers

[jm1991]

Hello!

I’m trying to mimic border designs as seen in this image https://freeimage.host/i/HXb7Ixs

I’ve linked to a test homepage in the submission box where I’ve tried to replicate the design. The design is at the bottom of the page.

As you can see from the linked page, I haven’t been able to replicate the outer borders correctly. The outer borders should inverse in size, rather than the opposite.

Thanks!

[David]

Hi there,

don’t use many containers.
Just keep the inner most container with the border and give it a class of: fancy-border

then add this CSS to your site:

.fancy-border {
    position: relative;
}
.fancy-border:after,
.fancy-border:before {
    content: '';
    position: absolute;
    inset: 17.5px 17.5px -17.5px -17.5px;
    isolation: isolate;
    z-index: 0;
    border-left: 5px solid #000;
    border-bottom: 5px solid #000;
}
.fancy-border:after {
    inset: 30px 30px -30px -30px;
}

[jm1991]

Brilliant. Thank you.

Is it possible to customise the two CTA buttons at the top of the page to follow the same design as the testimonials (and logo)?

Of course, the design would need to be scaled to fit the CTA.

I’ve added the class branded-cta to the buttons and tried to modify the CSS, but of course, it adds a border, rather than manipulates the individual CTAs themselves.

If you could help out, that would be great.

Thanks!

[Ying]

Is it possible to customise the two CTA buttons at the top of the page to follow the same design as the testimonials (and logo)?

In that case, try targeting the button block, not the buttons block.

[jm1991]

Hello!

Brilliant that has solved it.

One question. Is there any way to ensure the outer border aligns with the specified container width?

As you’ll notice, the outer border doesn’t quite align with the logo and on-page text.

Thanks!

[Fernando]

Hello there,

For clarity, can you share a screenshot of this issue?

Uploading Screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

[jm1991]

Hi Fernando,

Sure. Here’s a screenshot https://postimg.cc/zy0GN31K

You’ll see that the outer border does not align with the templated width.

I can move it inwards by changing the margin manually, but I’d instead find a way that aligns everything in a templated way.

Thanks.

[Fernando]

I see. Try adding this CSS:

.gb-button.fancy-border {
    margin-left: 30px;
}

[jm1991]

Hey Fernando,

That moves the border too far to the right and out of alignment.

I can manually play with the margin to get it closely aligned with the rest of the page, but I was just wondering if they were a means to ensure that the outer border would adhere to the template width, without having to specify the margin.

Thanks for your help anyway.

[David]

the pseudo elements aka :after, :before don’t take up literal space on the page as they are absolute positioned. So you will need to manually adjust margins to align them

[jm1991]

Great, thanks once again.

[David]

You’re welcome

[Author]

Posts