Making masonry background transparent?

This topic has 16 replies, 3 voices, and was last updated 7 years by Radu.

Author
July 25, 2017 at 18:51 #168544

wildbug
Participant

Is there a way to make the background of the masonry posts transparent so that each post sits on the background I am using for that section? Right now the background is white so they appear as a block.

Attachments:
You must be logged in to view attached files.

July 25, 2017 at 18:52 #168546

wildbug
Participant

Oops. Reattaching screenshot.

Attachments:
You must be logged in to view attached files.
July 26, 2017 at 04:53 #168596

Laura
Moderator
Hello, try by adding this to style.css
COPY CODE
```
.posts-listing.responsive-cols.kleo-masonry.per-row-6.with-meta.inline-meta.masonry-listing {
    background: transparent !important;
}
```
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂
July 26, 2017 at 11:32 #168620

wildbug
Participant

That did not change anything…
July 26, 2017 at 21:53 #168687

Laura
Moderator
Hello, this is the code to delete the background of that element, but you will see it doesnt look very good
COPY CODE
```
.posts-listing.responsive-cols.kleo-masonry.per-row-6.with-meta.inline-meta.masonry-listing article {
    background: transparent !important;
}
```
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂
July 26, 2017 at 22:05 #168692

wildbug
Participant

I guess I did not make myself clear … I don’t actually want each post to be transparent, those should be white so they are readable. I want the SPACE BETWEEN POSTS to be transparent. So each WHITE post sits on the background image (earth) and does not appear as one large white block of articles. Is this possible?

July 27, 2017 at 21:43 #168771

Laura
Moderator

Hello, please check attached, there is no space between them, its the actual item what you see.
So, do you want to make them more separated between each other?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

Attachments:
You must be logged in to view attached files.

July 27, 2017 at 23:09 #168783

wildbug
Participant

Yes, I would love there to be an equal space between each, just a very small space like 1/8″.
July 28, 2017 at 05:41 #168800

Laura
Moderator
Try with this css 🙂
COPY CODE
```
.posts-listing.responsive-cols.kleo-masonry.per-row-6.with-meta.inline-meta.masonry-listing {
    width: 1100px !important;
}
```
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂
July 28, 2017 at 06:18 #168805

wildbug
Participant

Thanks but that didn’t really work. It surprises me how little control there is with this theme to make basic styling adjustments.

July 28, 2017 at 06:31 #168812

Laura
Moderator

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂
July 31, 2017 at 16:04 #169113

Radu
Moderator
Hi,

Replace the css provided by the Laura with this one
COPY CODE
```
@media(min-width:768px) {

   .responsive-cols.per-row-6>* {
        width:15.5%;
    }

    .kleo-masonry article {
        padding: 0;
        margin-right: 10px !important;
    }

    .kleo-masonry article:last-of-type {
        margin-right:0 !important;
    }

}
```
Let me know if it’s ok

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
July 31, 2017 at 16:45 #169120

wildbug
Participant

That worked, thank you it looks great. EXCEPT it is not showing 6 across, it is showing 5 articles across and one is doubled down. That is not what I wanted. I want 6 articles across. How do we fix that now?

July 31, 2017 at 16:46 #169121

wildbug
Participant

Here is a screenshot.

Attachments:
You must be logged in to view attached files.

August 1, 2017 at 16:20 #169271

Radu
Moderator

Hi,

The snippet will make all 6 to be shown ok, but there was encoded a character just replace the code with the same code but copy it from Pastebin: https://pastebin.com/raw/4W6E1TTy

This is how will look using the CSS frmo pastebin

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

August 1, 2017 at 17:18 #169274

wildbug
Participant

Yay, it worked! Finally! Thank you!!

August 2, 2017 at 18:44 #169396

Radu
Moderator

Hi,
You’re welcome

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
Author

Posts