Topic: With BP Followers the buttons overlap on the members screen: please help!

With BP Followers the buttons overlap on the members screen: please help!

Donald McIntyre
Participant

@donmcint

2 years, 1 month ago

Hello! The plugin is great! but it is doing something I´m trying to correct. The buttons overlap on the Members screen! How can I upload a screenshot?

OK, I tried sepparating them using this in the style.css:

Hey masonjames!

I tried sepparating the buttons using the child theme style.css, but it didn´t work. I think changing something in the code you gave me might work, we are very near a solution. The code you gave me is:

ul.item-list li div.action { top: 0px; }
.generic-button { margin: 20px, 0px }

But it doesn´t work. I´n using a child theme of the BP Social Theme of WPMU DEV and they told me to talk to the plugin´s developer, so here I am!!

Thank you, Donald.

Viewing 10 replies - 1 through 10 (of 10 total)

@mercime
Keymaster

@mercime

2 years, 1 month ago

@donmcint create a testuser account and post username and password here so we could help you. You can easily delete testuser account after issue is resolved.

rizonesoft
Member

@rizonesoft

1 year, 5 months ago

I’ve created a child theme to help with this problem. You can download it here: http://www.rizonesoft.com/more-downloads/bp-replenished/

r-a-y
Moderator

@r-a-y

1 year, 5 months ago

I wrote about this issue in a previous post:

You’re right that the buttons overlap in the directory. I was thinking of adding some inline CSS to the plugin, but thought it’s more of a general bp-default theme issue. I felt that it should be easy enough for theme devs to add a few lines of CSS themselves.

If enough people request it, I will add some inline CSS to the plugin so it will at least look good in bp-default. Can’t say the same for 3rd-party themes though.

valuser
Participant

@valuser

1 year, 5 months ago

Many thanks for the plugin.

Have used a variation of a previous post in this thread (in a 3rd-party theme). Seems to work to prevent overlapping with Friends.

‘ul.item-list li div.action {
top: 18px;
}
ul.item-list li div.action.follow {
position: relative;
top: 18px;
}

ul.item-list li div.action.unfollow {
position: relative;
top: 1px;
}

.friendship-button {
margin-bottom: 18px;
}

.friendship-button.pending {
margin-bottom: 18px;
}’

cleantesophras
Member

@cleantesophras

1 year, 4 months ago

Failure does not mean I have accomplished nothing; It does mean I have learned something

blogsterfiles
Participant

@blogsterfiles

1 year, 2 months ago

“If enough people request it, I will add some inline CSS to the plugin so it will at least look good in bp-default. Can’t say the same for 3rd-party themes though.”

This would be great! Is this where we “request it”? Thanks!

BlinkyBill01
Member

@blinkybill01

1 year, 2 months ago

@valuser thanks for supplying that bit of code. Worked perfectly for me in my RocketTheme theme!

blogsterfiles
Participant

@blogsterfiles

1 year, 2 months ago

I’m using bp-default. I created a child theme and simply added the code above (thank you @valuser ) to the child theme’s style.css and it worked perfectly. Many thanks to @apeatling and @r-a-y for this great plugin! This is such a cool plugin and everything is so great now with the bp-default theme I still think it would be a great idea if the plugin and bp-default worked together right out of the box. Either way, I’m a happy camper, so thanks again!!

gsikora
Member

@gsikora

1 year ago

Hello I applied the child theme for bp-default and it works. Unfortunatelly I cannot fix this bug for BuddyPress mobile. Any idea?

inkblot
Participant

@inkblots

9 months, 2 weeks ago

Just to share a very current fix (post-BuddyPress 1.6 update using BP-Default theme along with custom child theme) for this problem. Our senior developer placed the following in our child theme (style.css), and it fixed this very simple (non-mobile – but it may work coupled with BuddyPress Mobile) glitch with the overlap of the buttons;

`/* Fix overlapping buttons */
div .action .friendship-button {
margin-top: 4px;
margin-bottom: 18px;
}`

And there you have it!