Tagged: , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 13, 2015 at 6:25 am #378652
    _urban_

    Dear Kriesi
    I’m trying to change the box overlying the image in the grid blog layout. I would like to have a transparent box with not transparent text. I only manage to change the arrow but not the box. See the custom CSS that I have tried.

    I hope you can help me change the box to a transparent.

    This only changes the little arrow and not the box itself :

    /*Transparent grid box*/
#main_color .container .av-inner-masonry-content, #top .main_color .container .av-masonry-load-more, #top .main_color .container .av-masonry-sort, .main_color .container .av-masonry-entry .avia-arrow {
    background-color: #f8f8f8;
    opacity: 0.5;
}

    Thank you for a fantastic theme and support!

    Best regards
    Urban

    January 13, 2015 at 6:33 am #378654
    _urban_

    It is the “masonry” I am trying to change. Sorry for mixing it up.

    If the solution I am asking for is to difficult, I could use a solution where the title is moved down to under the image. (like it is displayed when using the “blog grid”).

    Again, thanks for your awesome support!

    Urban

    • This reply was modified 9 years, 10 months ago by _urban_.
    January 13, 2015 at 9:35 pm #379128
    Elliott

    Hey!

    I think what your wanting to do is this.

    .av-inner-masonry-content {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.4) !important;
}

    If that’s not correct then take a screenshot and highlight what your trying to do so we can get a better idea.

    Cheers!
    Elliott

    January 17, 2015 at 7:45 pm #381289
    _urban_

    Hi!
    Thank you so much. That was it. However there is a little arrow that also needs to be transparent. I Changed the code slightly, and now it looks ok. But I am not sure if the CSS will affect arrows other paces on the page. I will probably realize if it does; but do you think this CSS will effect the arrow other places?

    *Transparent grid frame */
  .avia-arrow {
    background-color: #ffffff;
    opacity: 0.5;
}

.av-inner-masonry-content {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5) !important;
}

    Thanks
    Urban

    January 17, 2015 at 7:57 pm #381292
    _urban_

    I also added this, and now I am quite happy with the result. The cropping of the images is much better like this, and could be considered for the theme itself.

    .av-inner-masonry-content {
    padding: 10px !important;
    position: relative;
    width: 1000%;
    z-index: 2;
}

    Thanks.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Transparent contrainer under blog grid layout’ is closed to new replies.