Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 2, 2018 at 4:46 pm #906896
    tonydobrevski

    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

    February 2, 2018 at 11:57 pm #907121
    Basilis

    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

    February 3, 2018 at 1:52 am #907149
    tonydobrevski

    Hi Basilis,

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

    Thank you in advance!
    Best,
    Anton

    February 4, 2018 at 1:16 pm #907507
    Mike

    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

    February 6, 2018 at 2:06 pm #908587
    tonydobrevski

    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, 9 months ago by tonydobrevski.
    February 7, 2018 at 4:48 am #908890
    Mike

    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

    February 8, 2018 at 11:10 pm #910035
    tonydobrevski

    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

    February 9, 2018 at 3:35 am #910084
    Mike

    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

    February 11, 2018 at 11:51 am #910735
    tonydobrevski

    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, 9 months ago by tonydobrevski.
    February 11, 2018 at 4:17 pm #910754
    Mike

    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

    February 21, 2018 at 3:21 am #915154
    tonydobrevski

    Hi Mike,

    This code works perfectly! Thank you very much!

    Best,
    Anton

    February 21, 2018 at 3:36 am #915161
    Mike

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

    Best regards,
    Mike

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