buddypress table style

[allana]

Hi,

I’ trying to figure out how to change the style of the buddypress table –  i.e. the display of the profile fields. Currently the table is like a  MS ‘Excel style’ (attached 1). Is there any way to edit this simply? I noted on Sweet date, there i s a nice ‘pill’ style table (attached 2). any idea how to achieve this?

Many thanks

Allan

Attachments:

You must be logged in to view attached files.

[Kieran_SQ]

Hi,

You can override any CSS used within the theme by pasting in your custom CSS into your BuddyApp Child theme’s style.css file in WP Admin > Appearance > Editor > BuddyApp Child > Style.css

To target the labels for the profile fields use the below CSS

#buddypress table.profile-fields tr td.label {}

And to target the content of the fields use the below CSS

#buddypress table.profile-fields tr td.data {}

In each case feel free to define any colors, fonts, font weights, borders etc as desired. Save the customized CSS and clear your website cache / browser cache to see the changes.

Thanks,

Kieran

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

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

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[allana]

OK cool, thanks for that. and on the the pill style table as per attachemnt 2?

[Kieran_SQ]

Hi,

You can do this with CSS as described above. I have generated a basic set of classes and styles that you can copy, paste and adjust to use as you need.

COPY CODE

#buddypress table.profile-fields tr td.label {
    background-color: red !important;
    color: white;
    border-radius: 10px;
}
#buddypress table.profile-fields tr td.data {
    background-color: purple;
    color: white;
    border-radius: 10px;
}
#buddypress table.profile-fields tr td.data a {
    background-color: purple;
    color: white;
    font-weight:bold;
    border-radius: 10px;
}
#buddypress table.profile-fields {
    border: 0 !important;
    border-spacing: 5px;
}
#buddypress table.profile-fields tr td {
    padding: 15px !important;
}

Thanks,

Kieran

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

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

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[allana]

thanks for that

[Author]

Posts