The BuddyPress Profile Tabs Pro plugin adds a wrapper div to the content to allow you easily style it.
We add following css classes to the div. You can use the generic or the specific classes to target contents for every tab generated by Profile Tab Pro or just a few.
For this tutorial, we have following assumptions:-
- We have a tab name “Support” with slug “support”
- We have a sub tab of the Support tab name “help”
- We are going to style the contents of this help sub tab.
In this example, our tab slug is “support”, sub tab slug is “help”.
The following markup is generated for this content
<div class="bpptc-item-content bpptc-member-content bpptc-content-tab-support bpptc-content-sub-tab-help bpptc-content-view-support-help">
Tab Content here.
As you can see, we add some generic classes as shown below:-
And some specific css classes like
In your case, the specific class will depend on the slug of your tab/sub tab.
Here is an example css code we can use to style all tabs generated by BuddyPress User Profile Tabs Pro
border: 1px solid #e7e9ec;
You can visit Dashboard->Appearance->Customize and click on “Additional CSS” and add the code.