Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 10, 2013 at 12:27 pm #198498
    broodjekaas

    Hello,

    I am customizing the enfold theme for my website, at the moment i am trying to customize the Masonry element.
    And i need the Title & caption box to be completely transparent, at the moment I insert this code in to the Quick CSS box:

    figcaption.av-inner-masonry-content.site-background {
background-color: rgba(0,0,0,0);
}

    This code is dirived from this page https://kriesi.at/support/topic/enfold-css-masonry-query

    Only i have the following problems:
    In some browsers (Chrome & Safari) a little diamond shaped whit box keeps appearing around the top of the Title/caption box see the following link: https://www.dropbox.com/s/7fvu302yui6d34o/Screenshot.JPG
    I would like this to be also removed/transparent

    Now my changes to the masonry apply to all the pages and i wonder if it is possible to show te regular white title/caption box on some pages and on some pages the transparent one? And what code is needed to apply these changes?

    December 11, 2013 at 12:51 am #198758
    Josue

    Hi,

    Can you post the link to your website please?

    Regards,
    Josue

    December 16, 2013 at 11:40 am #200631
    broodjekaas
    This reply has been marked as private.
    December 17, 2013 at 1:43 am #200885
    Yigit

    Hi!

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

    .main_color .avia-arrow { background-color: transparent; }

    Cheers!
    Yigit

    December 19, 2013 at 2:42 pm #202021
    broodjekaas

    Thank you Yigit,
    The arrow is removed and it looks very nice, tahnk you.

    I also have another question:
    Is there also an option tu execute this transparency CSS only on specifick pages?
    We might also need one masonry gallery page that has the regular whit Title box, but all the others masonry pages need to stay transparent

    Thank you,

    December 19, 2013 at 2:47 pm #202022
    Yigit

    Hey!

    Sure, you can right click on Chrome and on Firefox and click Inspect Elements to find out page ID’s http://i.imgur.com/TrDQ84Y.jpg
    You can edit custom css code as following to apply it only on certain pages

    .page-id-763 .main_color .avia-arrow { background-color: transparent; }

    Cheers!
    Yigit

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Masonry Title & caption box’ is closed to new replies.