Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • November 25, 2022 at 1:23 pm #1373866
    Oceans247

    Hi there,

    I want to round the corners of some colour sections. Please see the attached private links. The yellow site is mine. I am trying to recreate the other website I linked.
    Please could you tell me how to achieve this.

    November 25, 2022 at 2:40 pm #1373881
    Rikard

    Hey Christopher,

    Please assign a class to the section in the element options, then add this to Quick CSS:

    .your-class .av-section-color-overlay {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

    Best regards,
    Rikard

    November 25, 2022 at 2:53 pm #1373883
    Oceans247

    PLs see screen shots.
    What am i doing wrong?

    November 25, 2022 at 3:36 pm #1373886
    Rikard

    Hi,

    The header_block class is not present on the page you linked to, please check. Also, you only need to add the class in the Custom CSS class field, not in all the fields.

    Best regards,
    Rikard

    November 25, 2022 at 3:46 pm #1373888
    Oceans247

    Sorry, but I do not understand what you mean by this,
    The header_block class is not present on the page you linked to, please check

    November 25, 2022 at 5:10 pm #1373894
    Rikard

    Hi,

    If you inspect the page you linked to in a browser, then the class you added in your screenshots is not there. Did you add it to the actual element you want to apply it to? If you want to apply it to an element on a different page, then please link to where we can see that element.

    Best regards,
    Rikard

    November 27, 2022 at 2:53 am #1373999
    Oceans247

    sorry for that. I am trying it on my testing website. Link in private message. I also included the backend username and password if you want to take a look at my settings.

    November 27, 2022 at 12:18 pm #1374014
    Rikard

    Hi,

    I’ve edited the code for you, please review your site.

    Best regards,
    Rikard

    November 27, 2022 at 1:18 pm #1374017
    Oceans247

    Thanks so much. I managed to apply the same effect to the other yellow blocks. However, the mid page yellow block has lost its curved edges since I added a background video. How do I enforce the curved edges?

    November 27, 2022 at 7:25 pm #1374042
    Mike

    Hi,
    You could use this css:

    .mid_block .av-section-color-overlay {
    border-bottom-left-radius: 35px;
    border-bottom-right-radius: 35px;
    border-top-left-radius: 35px;
    border-top-right-radius: 35px;
}

    but since your video is a YouTube iframe the video will show in the corners because you can’t style the inner elements of an iframe.
    Try hosting the video on your site.

    Best regards,
    Mike

    November 27, 2022 at 7:31 pm #1374043
    Oceans247

    Hye Mike, thanks for that.

    So that suggestion leaves ugly corners of the vid showing. Is there CSS code that I could use to fade out maybe 30px of the vid to transparent?

    November 27, 2022 at 7:36 pm #1374046
    Mike

    Hi,
    Unfortunately not while your video is an iframe, we maybe able to round the corners if you self-host the video on your site.

    Best regards,
    Mike

    November 27, 2022 at 7:46 pm #1374047
    Oceans247

    alright, i will try that. Thank you.

    November 27, 2022 at 7:48 pm #1374048
    Mike

    Hi,
    Let us know when you changed the video and we will look again.

    Best regards,
    Mike

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