Okay
  Public Ticket #4108621
Border Radius on Flip Box
Closed

Comments

  •  1
    3AH started the conversation
    July 8, 2025 at 2:59pm

    Hello Salient Team,

    Can you please advise how to implement a border radius (e.g. 10px) to create a flip box with rounded corners?

    Thanks!

    - J.

  •  396
    Pat replied
    July 8, 2025 at 10:33pm

    Hi J.,

    Thank you for reaching out.

    This can be done with a custom CSS snippet.

    Please add the following code to your Salient > General Settings > CSS/Script Related > Custom CSS Code box:

    .nectar-flip-box,
.nectar-flip-box .flip-box-front,
.nectar-flip-box .flip-box-back {
    border-radius: 10px !important; 
}

    Give it a try and let us know how it goes.

    Best wishes,

    Salient Theme Support

  •  1
    3AH replied
    July 8, 2025 at 11:30pm

    Thanks, Noah!

    And if we want to target the code to this page, how would we amend the CSS?

    https://readingpartnership.com/teaching-our-children-to-read/

    - J.

  •  396
    Pat replied
    July 9, 2025 at 12:29am

    Hi J.,

    Thank you for getting back to us.

    You can target an individual page using its class name found in the body tag. For the page you shared, the class name identifier is “page-id-3300.”

    Hope this helps! Please let us know if you need any further assistance.

    Thanks again,

    Salient Theme Support

  •  396
    Pat replied
    September 3, 2025 at 9:46pm

    Hi J.,

    I hope you're doing well, and that the solution provided worked for you.

    I'll go ahead and close this ticket for now.

    As always, if you have any further questions or need assistance, please don't hesitate to reach out.


    Best wishes,

    Salient Theme Support