Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • December 22, 2024 at 11:03 pm #1474153
    Dirk Messiaen

    I’m trying to put the same border and shadow on the image as i put on the button below.

    I’ve put a Lockable Custom CSS Class ‘blokje’ in the image as I want to save it as a template.
    I’ve put custom CSS in the Quick CSS. The border works but the shadow doesn’t.

    .blokje img {
border: 1px solid #005999;
padding: 40px;
box-shadow: 1px 1px 0px 0px #005999;
}

    I’ve inspected the CSS result and the properties seem to get overwritten.

    .avia-image-container.av-m4zpvax3-7f0e8c97aa55acf32e454c29d2832a05 img.avia_image {
  box-shadow: none;
}
.avia-image-container .avia_image, .avia-image-container .avia-image-overlay-wrap {
  transition: all 0.7s;
}
.blokje img {
  border: 1px solid #005999;
  padding: 40px;
  box-shadow: 1px 1px 0px 0px #005999;
}

    When I change the ‘none’ in the box-schadow to ‘1px 1px 0px 0px #005999’, I get the result I want.

    I tried to put the following code in Quick CSS but no success:

    .avia-image-container.av-m4zpvax3-7f0e8c97aa55acf32e454c29d2832a05 img.avia_image {
  box-shadow: none;
}

    All these test where with the box shadow property of the image set to ‘No shadow’

    I also tried them with the settings set to ‘outside’ and then it gets overwritten by the following code:

    .avia-image-container.av-m4zpvax3-f7f87307d7c5ae1ae484872a008028bd img.avia_image {
  box-shadow: 0 0 1px 0;
}

    How can I get this to work?

    • This topic was modified 1 month ago by Dirk Messiaen. Reason: Code was not showing as code
    • This topic was modified 1 month ago by Dirk Messiaen.
    December 23, 2024 at 4:14 am #1474158
    Guenni007

    try to give an ID to the selector f.e.:

    #top .blokje .avia-image-overlay-wrap a.avia_image {
  overflow: visible;
}
#top .blokje img.avia_image {
  border: 1px solid #005999;
  padding: 40px;
  box-shadow: 5px 5px 0px 0px #005999;
}

    i placed here a different value so that you can clearly see that “shadow” will work – afterwards you can change back to your box-shadow.

    and btw: https://kriesi.at/support/topic/changing-buttons-colors-to-gradient/#post-1473778

    December 23, 2024 at 5:46 am #1474162
    Ismael

    Hi,

    Thank you for the inquiry.

    Like @Guenni007 mentioned above, try using a more specific selector to either remove or override the dynamic styling, depending on your needs. Let us know if you need further assistance.

    Best regards,
    Ismael

    December 23, 2024 at 4:57 pm #1474187
    Dirk Messiaen

    Hello Guenni007

    Putting the code I received from you by mail gave the result I was looking for, however it changed it for every image on the entire site.
    I followed your suggestion and setting a Custom ID attribute does just what I want it to.
    I’m 99% sure I tried that but because lack of sleep I probably didn’t refresh or made an other typo. ;)

    Thank you very much!

    December 24, 2024 at 3:45 am #1474211
    Guenni007

    To give better advice, it is best to see the page. This also applies to the svg logo issue.

    December 24, 2024 at 9:41 am #1474216
    Dirk Messiaen

    @Ismael

    How can I ‘close’ the topic? Or mark it as resolved?
    I would like to mark Guennni007’s post as the solution.

    December 24, 2024 at 1:31 pm #1474230
    Mike

    Hi,
    Glad Guenni007 could help, thank you Guenni007, we will close the thread for you as solved. If you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Trying to create the same border and shadow on an image as on a button’ is closed to new replies.