Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #906896

    Hi,

    I opened a thread with the same question (https://kriesi.at/support/topic/target-all-images-except-from-one-with-a-custom-css/) and thought that I solved the problem, however using this CSS none of the images has a shadow. How could I fix this?

    img {
      .avia-image-container-inner a {
    box-shadow: 0px 0px 20px #D9DCDE;
    }
    .avia-image-container-inner a:hover {
    box-shadow: 0px 0px 5px #CACDCE;
    }
    .avia-image-container-inner img {
    box-shadow: 0px 0px 20px #D9DCDE;
    }
    .image-overlay {
     visibility: hidden;
     }
    
    .mainimage {
        .avia-image-container-inner a {
    box-shadow: 0px 0px 0px #ffffff;
    }
    .avia-image-container-inner a:hover {
    box-shadow: 0px 0px 0px #ffffff;
    }
    .avia-image-container-inner img {
    box-shadow: 0px 0px 0px #ffffff;
    }
    .image-overlay {
     visibility: hidden;
     }
    }

    Thank you in advance!
    Best,
    Anton

    #907121

    Hey tonydobrevski,

    
      .avia-image-container-inner a {
    box-shadow: 0px 0px 20px #D9DCDE;
    }
    .avia-image-container-inner a:hover {
    box-shadow: 0px 0px 5px #CACDCE;
    }
    .avia-image-container-inner img {
    box-shadow: 0px 0px 20px #D9DCDE;
    }
    .image-overlay {
     visibility: hidden;
     }
    
    .mainimage {
        .avia-image-container-inner a {
    box-shadow: 0px 0px 0px #ffffff;
    }
    .avia-image-container-inner a:hover {
    box-shadow: 0px 0px 0px #ffffff;
    }
    .avia-image-container-inner img {
    box-shadow: 0px 0px 0px #ffffff;
    }
    .image-overlay {
     visibility: hidden;
     }

    Try the code like that please and let us know if it works.

    Best regards,
    Basilis

    #907149

    Hi Basilis,

    Unfortunately, this code is not working. Is there anything else I could do?

    Thank you in advance!
    Best,
    Anton

    #907507

    Hi,
    Please include the url to the page in question so we can take a closer look. Also specify which is the one image you don’t want a box shadow applied.

    Best regards,
    Mike

    #908587

    Hi Mike,

    This is the page and I would like to target the first image on the page – the one with the house. Another option that is also possible is to target all the images that I would like to have a shadow.

    Thank you in advance!
    Best,
    Anton

    • This reply was modified 6 years, 10 months ago by tonydobrevski.
    #908890

    Hi,
    When I look at your site, it seems that the first image, of the house, already has the box shadow, Please see screenshot in Private Content area. I also see the box shadow on other images on other pages, this is what you wanted right? Please clear your browser cache and check.

    Best regards,
    Mike

    #910035

    Hi Mike,

    I would like to have the box shadow on all images except the one with the house on the main page. When I posted the thread none of them had a shadow but this is because I had some other issues with the website. After fixing them all of the images have shadows. What can I do to target all the images except this one?

    Thank you in advance!
    Best,
    Anton

    #910084

    Hi,
    I added this code to the end of your Enfold Theme Options > General Styling > Quick CSS field:

    #top.home .avia-builder-el-5 img.avia_image {
        box-shadow: none!important; 
    }

    This works on the css principal of specificity, meaning that it is more targeted than your other css code. It’s also important that it is at the end of your file, so it is more important.
    Please clear your browser cache and check.

    Best regards,
    Mike

    #910735

    Hi Mike,

    It worked, however after I made few changes on the main page, it stopped working. How can I fix this? And furthermore, there are few images that I would like to target. So is it possible to target only the images that I want to have with shadows?

    Thank you in advance!
    Best,
    Anton

    • This reply was modified 6 years, 10 months ago by tonydobrevski.
    #910754

    Hi,
    Please try:

    .page-id-287 .avia-image-container-inner a,.page-id-78 .avia-image-container-inner a,.page-id-112 .avia-image-container-inner a,.page-id-239 .avia-image-container-inner a,.page-id-445 .avia-image-container-inner a {
    box-shadow: 0px 0px 20px #D9DCDE!important; 
    }
    .page-id-287 .avia-image-container-inner a:hover,.page-id-78 .avia-image-container-inner a:hover,.page-id-112 .avia-image-container-inner a:hover,.page-id-239 .avia-image-container-inner a:hover,.page-id-445 .avia-image-container-inner a:hover {
    box-shadow: 0px 0px 5px #CACDCE!important; 
    }
    .page-id-287 .avia-image-container-inner img,.page-id-78 .avia-image-container-inner img,.page-id-112 .avia-image-container-inner img,.page-id-239 .avia-image-container-inner img,.page-id-445 .avia-image-container-inner img {
    box-shadow: 0px 0px 20px #D9DCDE!important; 
    }
    .page-id-287 .image-overlay,.page-id-78 .image-overlay,.page-id-112 .image-overlay,.page-id-239 .image-overlay,.page-id-445 .image-overlay {
    visibility: hidden!important; 
    }

    Please clear any cache plugin and your browser cache and check.

    Best regards,
    Mike

    #915154

    Hi Mike,

    This code works perfectly! Thank you very much!

    Best,
    Anton

    #915161

    Hi,
    That is great news! Unless there is anything else we can assist with, shall we close this then?

    Best regards,
    Mike

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