Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • August 10, 2014 at 7:14 pm #302282
    Skibro

    Hi!

    I would like to customise the masonry element.

    Can I change somehow the height of the background behind the caption?
    How could I change the color of the date?
    Can I somehow align the caption vertically centered?

    I’m not a CSS professional, just living from the recent topics.

    I am using the following code in the quick css field:

    figcaption.av-inner-masonry-content.site-background{
    background-color: rgba(249,249,250,0.7)!important; text-align: center!important;
    }
    div.avia-arrow{
    display:none!important;}
    div.av-masonry-image-container{
    opacity: 1!important;
    }
    .avia_desktop .av-masonry-entry:hover .av-masonry-image-container {
    -webkit-transform: none;
    -moz-transform: none;
    transform: none; opacity: 0.5!important;
    }

    Thank you!

    August 11, 2014 at 12:07 am #302320
    Ismael

    Hi Skibro!

    Thank you for using the theme.

    1.) Change the height of the background image with this on Quick CSS or custom.css:

    .av-masonry-image-container {
text-align: center;
background-size: 100% 100%;
background-position: center center;
}

    2.) Date color can be change using this:

    span.av-masonry-date.meta-color.updated {
color: red;
}

    3.) You can adjust the position of the caption box with this:

    .av-fixed-size .av-masonry-entry .av-inner-masonry-content, .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content {
position: absolute;
bottom: 30%;
}

    Adjust the bottom position.

    Regards,
    Ismael

    August 12, 2014 at 10:22 am #303053
    Skibro

    Worked like a charm! Thank you!

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Masonry customisation (caption background, alignment)’ is closed to new replies.