Where is the css of the rtmedia masonry gallery for Kleo?

[Splendor]

Hi,

I’m trying to find where the kleo css is where you have changed the style of the rtmedia gallery…? I mean after you have uploaded some images, you have small thumbs.

[sharmstr]

If you have enabled masonry in rtMedia settings, the css is in plugins/buddypress-media/app/assets/css/main.css

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Splendor]

Thanks @sharmstr, I was totally running around in circles.

[sharmstr]

Here’s how I figure out css

(the following is chrome in windows but should be similar for other browsers)
Inspect the element you’re wanting to figure out by right clicking on it and selecting inspect element. This will bring up a developers tool window. On the html side, I start to look for the div/container I want. Then I select it and looks at the css being generated (styles windows). From there, you can see where the css rule is being loaded from.

So lets walk through this particular case. I went to the media tab in my profile and right clicked on the first image, then selected inspect element.

When the dev console came up, it had the code highlighted. Turns out that was enough to be able to figure out where the css was coming from, but sometimes you’ll have to select a div/eleent above it. On the right hand side, you’ll see the css rules and main.css?ver=3.7.24. If you hover your mouse over it or click on it, you’ll be able to see the full path.

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

Attachments:

You must be logged in to view attached files.

[Splendor]

What are you hiding @shamstr ? 😛

[Splendor]

Thank you @sharmstr . I was actually looking in the folder hehe… 🙂

[Splendor]

by the way @sharmstr . Isn’t this affected by kleos own css?

[Splendor]

Three millions years after, I go back to this. I want to get rid of the spaces on sides and below and rightnow are the setting 240×240 cropped for thumbnails but are shown 150×150 cropped. I want to make those 240×240 at min. I’m considering to make that part fullwidth.

[sharmstr]

“isn’t this affected by kleo”. Not necessarily. Depends on the element. As you can see in my screenshot, that particular element is styled by rtMedia. The outer containers are styled by kleo.

I remember answering a similar question about removing gaps and making the images bigger. Let me see if I can find it.

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Splendor]

Thank @sharmstr, yeah you are right.

[sharmstr]

In rtMedia, set your thumbnails to 240 x 240 cropped (I think you have that already). Then add the following css.

To remove the titles below the thumbnail

COPY CODE

.rtmedia-container .rtmedia-item-title, .rtmedia-activity-container .rtmedia-item-title, #buddypress div.rtmedia-activity-container .rtmedia-item-title {
	display: none;
}

To remove the 150px constraint and remove the gaps between the images

COPY CODE

#buddypress .rtmedia-container .rtmedia-list .rtmedia-list-item {
height: auto;
width: auto;
margin-bottom: 0;
}
.rtmedia-list.masonry .rtmedia-list-item {
margin: 0;
}

And to change the width of the actions

COPY CODE

.rtmedia-container .rtmedia-gallery-item-actions {
max-width: 240px;
}

You’ll also have to regenerate your thumbnails if you haven’t already. WP Admin – Tools – Regen Thumbnails.

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Splendor]

I tested this one, everything works fine besides the gap below.

[Splendor]

This reply has been set as private.

[Splendor]

@sharmstr Oki, that was solved by adding !important hihi hi… But the only thing I’m having troubles with is that it still show the images in 150×150.

[sharmstr]

Did you regenerate the thumbnails? My css sets the height and width to auto. So if you’re displaying old thumbnails with a size of 150×150, they will continue to display in that size.

The orignial css had

COPY CODE

#buddypress .rtmedia-container .rtmedia-list .rtmedia-list-item {
height: 150px;
width: 150px;
margin-bottom: 30px;
}

Perhaps you need to put important on the height and width, though I didnt have to.

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Splendor]

I did add !important to it but doesn’t seem to do what I want. Yes, I regenerated the thumbs and the size 240, and it says natural 240×240..but show 150px.. hmm..I’ll test to add it to quick css and see what happens..

[Splendor]

Work if I post on the quick css but not in the child theme..that was odd..

[Splendor]

This was funny a one, I had two post the same code twice in the child theme. Then it works, the remove one line. And that is the problem solved..hahah..

[Splendor]

This reply has been set as private.

[sharmstr]

The way its set up there’s a chance you’ll always have it…. and if you dont someone else probably will. Kleo is using fixed widths for the images. If your browser width isn’t divided by 240 (if you’re still using that size) equally, you’ll always have a gap.

If I’m wrong, then I need a link to help.

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Splendor]

I manage to fix that problem with a bit of luck. Thank you @Sharmstr

[Author]

Posts