[Resolved] BuddyPress 2.1 styles

[Klaus]

Hi,

i’ve just installed BuddyPress 2.1 on a site and realized that all submit buttons are really small. BuddyPress uses standard input type submit buttons without any class at all.
How can i fix it, to show buttons in the same design as GeneratePress?

[Klaus]

Here is a screenshot to illustrate the problem. I’m running BuddyPress on a closed membership site. So it’s not availlable in the public pages.

[Tom]

Hi there,

I can’t think of any GeneratePress styles that would cause this kind of issue, but it’s hard to tell without actually looking at a page where it’s happening.

Do you have any other plugins installed that may includes styles for buttons?

[Klaus]

Hi Tom,

i have installed a demo version, running only generatepress and buddypress on this page:
https://fussballbambinis.de/intern/

No other plugins installed. Same behavior.

[Tom]

Excellent – thank you!

I will investigate first thing in the morning 🙂

[Tom]

Weird, BuddyPress seems to be using REM to determine the font size.

Adding this CSS should fix it:

#buddypress .comment-reply-link, #buddypress a.button, #buddypress button, #buddypress div.generic-button a, #buddypress input[type="button"], #buddypress input[type="reset"], #buddypress input[type="submit"], #buddypress ul.button-nav li a, a.bp-title-button {
      font-size: inherit;
}

[Klaus]

Yes and no.

Buttons are larger now, but not in the way the rest of generatepress looks like.
Some other buttons are super large now as on this page https://fussballbambinis.de/intern/gruppen/

[Tom]

Not sure why BuddyPress includes all of these styles – they should just let the themes decide.

This code should replicate every other button using GeneratePress:

#buddypress .comment-reply-link, #buddypress a.button, #buddypress button, #buddypress div.generic-button a, #buddypress input[type="button"], #buddypress input[type="reset"], #buddypress input[type="submit"], #buddypress ul.button-nav li a, a.bp-title-button {
    background-color: #666;
    border: 0 none;
    color: #fff;
    font-size: inherit;
    padding: 10px 20px;
}

#buddypress .comment-reply-link:hover, #buddypress a.button:focus, #buddypress a.button:hover, #buddypress button:hover, #buddypress div.generic-button a:hover, #buddypress input[type="button"]:hover, #buddypress input[type="reset"]:hover, #buddypress input[type="submit"]:hover, #buddypress ul.button-nav li a:hover, #buddypress ul.button-nav li.current a {
    background: none repeat scroll 0 0 #606060;
    border: 0 none;
    color: #fff;
    outline: 0 none;
    text-decoration: none;
}

[Klaus]

Hi Tom,

thank you for your support. It’s awesome!

Everything looks perfect now.

Klaus

[Tom]

Awesome – glad I could help 🙂

[Author]

Posts