Tagged: ,

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • November 17, 2015 at 12:18 pm #537243
    webgk

    Hi

    I’m using the masonry as a menu on this site http://kg.loket-oost-vlaanderen.be/test-home/

    I’d like the speechbubble pictures to be black and white, and in color when mouse-over. is there a way to do this?

    November 17, 2015 at 3:22 pm #537314
    Yigit

    Hey Jan!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .av-masonry-image-container img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray;
    -webkit-transition: all .6s ease;
    transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
}
.av-masonry-image-container img:hover {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: none;
}

    Cheers!
    Yigit

    November 17, 2015 at 3:27 pm #537317
    webgk

    Great! that did it!

    the same type of menu appears here http://kg.loket-oost-vlaanderen.be/2015/10/26/groene-energie-van-eigen-bodem/ How do I make that behave the same way as well?

    November 17, 2015 at 3:30 pm #537321
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    .avia_desktop .av-hover-overlay-active .av-masonry-image-container {
    background-image: none!important;
}
.av-fixed-size .av-masonry-image-container img {
    display: block;
}

    Regards,
    Yigit

    November 17, 2015 at 3:35 pm #537326
    webgk

    thanks, but there’s still a tiny bit of color in the edges.

    And a different question: I want the masonry on that page to stay fixed at the bottom, not moving with the opening and closing of the toggle. is that possible?

    November 19, 2015 at 2:10 pm #538980
    Andy

    Hi!

    add this code:

    .av-masonry-image-container img {
position: relative;
top: -5px;
}

    and adjust top value as needed.

    Cheers!
    Andy

    November 30, 2015 at 10:34 am #544333
    webgk

    Hi

    i tried adding that code, problem remains. I changed the top value from anywhere between 5 and 50, but no visible difference.

    November 30, 2015 at 10:47 am #544339
    Yigit

    Hey!

    Please add following code to Quick CSS 

    .avia_desktop.avia_transform3d .av-masonry-image-container {
    background: none!important;
}
.av-inner-masonry-sizer, .av-masonry-container.isotope {
    height: 100px!important;
}

    and remove following code

    .av-masonry-image-container img {
    position: relative;
    top: -50px;
}

    Cheers!
    Yigit

    November 30, 2015 at 10:51 am #544343
    webgk

    added the code, now the masonry container has disappeared completely…

    November 30, 2015 at 10:53 am #544347
    Yigit

    Hey!

    Which browser and OS are you using?
    Please make sure to flush browser cache and refresh your page a few times. This is how it looks on my end – http://i.imgur.com/JavxSF6.png

    Best regards,
    Yigit

    November 30, 2015 at 11:02 am #544357
    webgk

    Browser is chrome, OS is windows 7. once I open one of the toggles, the container is gone. I’d like it to be at the same height as the bottom of the video.

    November 30, 2015 at 12:05 pm #544398
    webgk

    Hi

    just checked again. Initially the masonry is there (not positioned at the bottom). Once I refresh the page, it disappears completely.

    November 30, 2015 at 5:46 pm #544660
    Andy

    Hi!

    hm not sure what you wish to achieve. Can you provide us a mockup please? so we can get a clearer idea of what you want to achieve? you can use imgur.com or dropbox.

    Do you want a fix position for your masonry? if yes use this code:

    div#av-masonry-1 {
position: fixed;
bottom: 60px;
right: 0px;
left: 706px;
}

    and adjust as needed.

    Best regards,
    Andy

    December 7, 2015 at 3:09 pm #548021
    webgk

    Hi

    i tried the code, but it doesn’t seem to work. I made a mockup of what I want to achieve, you can download that here: https://www.wetransfer.com/downloads/b66d7a3221eca70f7815aa509f47ff1520151207130553/b3cf470c2e413650d01ddbaaa50538ea20151207130553/e61dd6

    I also noticed that everything I change on the masonry, also affects the masonry here: http://kg.loket-oost-vlaanderen.be/test-home/
    Is there a way to prevent that?

    December 7, 2015 at 7:02 pm #548228
    Andy

    Hey!

    try to add an !important to my code:

    div#av-masonry-1 {
position: fixed !important;
bottom: 60px !important;
right: 0px !important;
left: 706px !important;
}

    You can prevent that by turning on custom css class for all alb elements: kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Cheers!
    Andy

    December 11, 2015 at 4:00 pm #551151
    webgk

    Hi

    Just added the important… It’s still not quite right. have a look http://kg.loket-oost-vlaanderen.be/2015/10/26/groene-energie-van-eigen-bodem/

    I tried playing around with the height, but then the masonry just disappears…

    December 14, 2015 at 3:21 pm #552337
    Andy

    Hey!

    could you provide us admin access, so we can take a closer look into it? Are we allowed to temporarily deactivate all your plugins? Post login details here as private reply.

    Best regards,
    Andy

    December 14, 2015 at 3:28 pm #552342
    webgk

    Sure, here you go:

    and feel free to deactivate plugins.

    December 14, 2015 at 3:39 pm #552366
    Andy

    Hey!

    You are using an old version of the theme and WordPress, so please upgrade to Enfold 3.4.6 and let us know if you still need help afterwards.

    Regards,
    Andy

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