Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

GeneratePress GenerateBlocks

Container overlay

  • Bernhard
    June 2, 2023 at 10:34 pm

    Hi there,
    I want to create an overlay where I write “sold out”, maybe with a png image or an svg file.
    A sample container and an image how it shall look like is in the test page.
    I then want to apply this in more containers via css classes.
    Thank you

  • David
    June 3, 2023 at 4:32 am

    Hi there,

    try:

    1. Add this CSS:

    .sold-out {
    position: relative;
}
.sold-out:after {
    content: "SOLD OUT";
    position: absolute;
    pointer-events: none;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 80px;
    font-weight: 900;
    color: #f00;
    transform: rotate(-25deg)
}

    2. Select a Container Block and in Advanced > Additional CSS Classes add: sold-out

  • Bernhard
    June 3, 2023 at 5:16 am

    Hi David,
    great. Thank you 🙂

  • David
    June 3, 2023 at 5:25 am

    You’re welcome

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.