Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • June 4, 2024 at 10:03 am #1447743
    Monika

    Hello there,
    I would love to have the image overlay text formatted as button.

    This is my “practise page”:

    Startseite

    I found this code in another thread and tried to copy it in the Custom CSS, but it doesn’t seem to make anything:
    https://postimg.cc/gallery/DJvyzxW

    Basically, the button I placed under the picture (the green one with “Entsorgung und Recycling” should replace the white text on the image…

    How do I do that?
    Thank you very much!

    June 4, 2024 at 11:35 am #1447792
    Ismael

    Hey Monika,

    Thank you for the inquiry.

    You can use this css code to adjust the style of the caption overlay. 

    .av-image-caption-overlay-center p {
    border-radius: 3px;
    padding: 10px;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin: 3px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: normal;
    text-align: center;
    max-width: 100%;
    color: var(--enfold-main-color-button-font);
    background: var(--enfold-main-color-button-border);
    transition: all 0.4s ease-in-out;
    box-shadow: none;
    border: 0;
    padding: 25px 50px 23px;
    font-size: 28px;
    min-width: 200px;
}

    Best regards,
    Ismael

    June 4, 2024 at 1:32 pm #1447886
    Monika

    Ismael, you are truly amazing! Thank you so much for your help!
    I hope you have a great week and many wonderful things happen to you!

    Okay, I have one question still, though:
    Can I define I custom element, so that this above only applies to the elements on the main page?

    • This reply was modified 3 weeks ago by Monika.
    June 4, 2024 at 6:22 pm #1448051
    Rikard

    Hi,

    Thanks for the update. If you only want the CSS to apply to the home page, then you can use this instead:

    .home .av-image-caption-overlay-center p {
    border-radius: 3px;
    padding: 10px;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin: 3px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: normal;
    text-align: center;
    max-width: 100%;
    color: var(--enfold-main-color-button-font);
    background: var(--enfold-main-color-button-border);
    transition: all 0.4s ease-in-out;
    box-shadow: none;
    border: 0;
    padding: 25px 50px 23px;
    font-size: 28px;
    min-width: 200px;
}

    Best regards,
    Rikard

    June 5, 2024 at 7:48 am #1448437
    Monika

    Hi Rikard,
    somehow that doesn’t work. I even tried replacing “.home .av-image-caption-overlay-center p {” with “.start .av-image-caption-overlay-center p {“, because that’s the name of the site, but as soon as I place anything before the “.av-image…” the green buttons vanish?

    June 5, 2024 at 8:43 am #1448446
    Ismael

    Hi,

    Thank you for the update.

    Try to replace the selector “.home” with “.page-id-362”. 

    .page-id-362 .av-image-caption-overlay-center p {
    border-radius: 3px;
    padding: 10px;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin: 3px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: normal;
    text-align: center;
    max-width: 100%;
    color: var(--enfold-main-color-button-font);
    background: var(--enfold-main-color-button-border);
    transition: all 0.4s ease-in-out;
    box-shadow: none;
    border: 0;
    padding: 25px 50px 23px;
    font-size: 28px;
    min-width: 200px;
}

    Please make sure to purge the cache before checking the page.

    Best regards,
    Ismael

    June 5, 2024 at 8:48 am #1448449
    Monika

    Perfect, that did the trick. Your support is awesome!

    June 5, 2024 at 8:52 am #1448454
    Ismael

    Hi,

    Great! Good to know. Going forward, you can add a Custom CSS Class Name to the element and use it to adjust the style of the element specifically.

    // https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

    Please feel free to open another thread if you have more questions about the theme.

    Have a nice day.

    Best regards,
    Ismael

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