{"id":2218,"date":"2020-09-24T16:17:11","date_gmt":"2020-09-24T16:17:11","guid":{"rendered":"https:\/\/buddydev.com\/docs\/?p=2218"},"modified":"2020-09-24T16:33:16","modified_gmt":"2020-09-24T16:33:16","slug":"styling-tab-content-using-css","status":"publish","type":"post","link":"https:\/\/buddydev.com\/docs\/buddypress-user-profile-tabs-creator-pro\/styling-tab-content-using-css\/","title":{"rendered":"Styling Tab Content using CSS"},"content":{"rendered":"<p>The BuddyPress Profile Tabs Pro plugin adds a wrapper div to the content to allow you easily style it.<\/p>\n<p>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.<\/p>\n<h3>Assumptions:-<\/h3>\n<p>For this tutorial, we have following assumptions:-<\/p>\n<ul>\n<li>We have a tab name &#8220;Support&#8221; with slug &#8220;support&#8221;<\/li>\n<li>We have a sub tab of the Support tab name &#8220;help&#8221;<\/li>\n<li>We are going to style the contents of this help sub tab.<\/li>\n<\/ul>\n<p>In this example, <strong>our tab slug<\/strong> is &#8220;support&#8221;, <strong>sub tab slug<\/strong> is &#8220;help&#8221;.<\/p>\n<p>The following markup is generated for this content<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;div class=\"bpptc-item-content bpptc-member-content bpptc-content-tab-support bpptc-content-sub-tab-help bpptc-content-view-support-help\"&gt;\r\n    Tab Content here.\r\n&lt;\/div&gt;<\/pre>\n<p>As you can see, we add some generic classes as shown below:-<\/p>\n<ul>\n<li>bbptc-item-content<\/li>\n<li>bbptc-member-content<\/li>\n<\/ul>\n<p>And some specific css classes like<\/p>\n<ul>\n<li>bpptc-content-tab-<strong>support<\/strong><\/li>\n<li>bbptc-content-sub-tab-<strong>help<\/strong><\/li>\n<li>bpptc-content-view-<strong>support-help<\/strong><\/li>\n<\/ul>\n<p>In your case, the specific class will depend on the slug of your tab\/sub tab.<\/p>\n<p>Here is an example css code we can use to style all tabs generated by BuddyPress User Profile Tabs Pro<\/p>\n<pre class=\"lang:css decode:true\">.bpptc-item-content {\r\n    background: #fff;\r\n    padding: 20px;\r\n    border: 1px solid #e7e9ec;\r\n    margin-bottom: 20px;\r\n    border-radius: 4px;\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>You can visit Dashboard-&gt;Appearance-&gt;Customize and click on &#8220;Additional CSS&#8221; and add the code.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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. Assumptions:- For this tutorial, &#8230;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9309],"tags":[],"class_list":["clearfix","post-2218","post","type-post","status-publish","format-standard","hentry","category-buddypress-user-profile-tabs-creator-pro"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Styling Tab Content using CSS &#8226; BuddyDev Help Center<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/buddydev.com\/docs\/buddypress-user-profile-tabs-creator-pro\/styling-tab-content-using-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Styling Tab Content using CSS &#8226; BuddyDev Help Center\" \/>\n<meta property=\"og:description\" content=\"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. Assumptions:- For this tutorial, ...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/buddydev.com\/docs\/buddypress-user-profile-tabs-creator-pro\/styling-tab-content-using-css\/\" \/>\n<meta property=\"og:site_name\" content=\"BuddyDev Help Center\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-24T16:17:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-24T16:33:16+00:00\" \/>\n<meta name=\"author\" content=\"Brajesh Singh\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brajesh Singh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/buddydev.com\/docs\/buddypress-user-profile-tabs-creator-pro\/styling-tab-content-using-css\/\",\"url\":\"https:\/\/buddydev.com\/docs\/buddypress-user-profile-tabs-creator-pro\/styling-tab-content-using-css\/\",\"name\":\"Styling Tab Content using CSS &#8226; BuddyDev Help Center\",\"isPartOf\":{\"@id\":\"https:\/\/buddydev.com\/docs\/#website\"},\"datePublished\":\"2020-09-24T16:17:11+00:00\",\"dateModified\":\"2020-09-24T16:33:16+00:00\",\"author\":{\"@id\":\"https:\/\/buddydev.com\/docs\/#\/schema\/person\/4ebf5f3e519f8cbddc6583e182dbe4fb\"},\"breadcrumb\":{\"@id\":\"https:\/\/buddydev.com\/docs\/buddypress-user-profile-tabs-creator-pro\/styling-tab-content-using-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/buddydev.com\/docs\/buddypress-user-profile-tabs-creator-pro\/styling-tab-content-using-css\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/buddydev.com\/docs\/buddypress-user-profile-tabs-creator-pro\/styling-tab-content-using-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/buddydev.com\/docs\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Styling Tab Content using CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/buddydev.com\/docs\/#website\",\"url\":\"https:\/\/buddydev.com\/docs\/\",\"name\":\"BuddyDev Help Center\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/buddydev.com\/docs\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/buddydev.com\/docs\/#\/schema\/person\/4ebf5f3e519f8cbddc6583e182dbe4fb\",\"name\":\"Brajesh Singh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/buddydev.com\/docs\/#\/schema\/person\/image\/\",\"url\":\"\/\/www.gravatar.com\/avatar\/2106622ee90d53d15ac1402806616aca?s=96&#038;r=g&#038;d=identicon\",\"contentUrl\":\"\/\/www.gravatar.com\/avatar\/2106622ee90d53d15ac1402806616aca?s=96&#038;r=g&#038;d=identicon\",\"caption\":\"Brajesh Singh\"},\"sameAs\":[\"http:\/\/buddydev.com\/members\/sbrajesh\/\",\"https:\/\/x.com\/sbrajesh\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Styling Tab Content using CSS &#8226; BuddyDev Help Center","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/buddydev.com\/docs\/buddypress-user-profile-tabs-creator-pro\/styling-tab-content-using-css\/","og_locale":"en_US","og_type":"article","og_title":"Styling Tab Content using CSS &#8226; BuddyDev Help Center","og_description":"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. Assumptions:- For this tutorial, ...","og_url":"https:\/\/buddydev.com\/docs\/buddypress-user-profile-tabs-creator-pro\/styling-tab-content-using-css\/","og_site_name":"BuddyDev Help Center","article_published_time":"2020-09-24T16:17:11+00:00","article_modified_time":"2020-09-24T16:33:16+00:00","author":"Brajesh Singh","twitter_misc":{"Written by":"Brajesh Singh","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/buddydev.com\/docs\/buddypress-user-profile-tabs-creator-pro\/styling-tab-content-using-css\/","url":"https:\/\/buddydev.com\/docs\/buddypress-user-profile-tabs-creator-pro\/styling-tab-content-using-css\/","name":"Styling Tab Content using CSS &#8226; BuddyDev Help Center","isPartOf":{"@id":"https:\/\/buddydev.com\/docs\/#website"},"datePublished":"2020-09-24T16:17:11+00:00","dateModified":"2020-09-24T16:33:16+00:00","author":{"@id":"https:\/\/buddydev.com\/docs\/#\/schema\/person\/4ebf5f3e519f8cbddc6583e182dbe4fb"},"breadcrumb":{"@id":"https:\/\/buddydev.com\/docs\/buddypress-user-profile-tabs-creator-pro\/styling-tab-content-using-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/buddydev.com\/docs\/buddypress-user-profile-tabs-creator-pro\/styling-tab-content-using-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/buddydev.com\/docs\/buddypress-user-profile-tabs-creator-pro\/styling-tab-content-using-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/buddydev.com\/docs\/"},{"@type":"ListItem","position":2,"name":"Styling Tab Content using CSS"}]},{"@type":"WebSite","@id":"https:\/\/buddydev.com\/docs\/#website","url":"https:\/\/buddydev.com\/docs\/","name":"BuddyDev Help Center","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/buddydev.com\/docs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/buddydev.com\/docs\/#\/schema\/person\/4ebf5f3e519f8cbddc6583e182dbe4fb","name":"Brajesh Singh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/buddydev.com\/docs\/#\/schema\/person\/image\/","url":"\/\/www.gravatar.com\/avatar\/2106622ee90d53d15ac1402806616aca?s=96&#038;r=g&#038;d=identicon","contentUrl":"\/\/www.gravatar.com\/avatar\/2106622ee90d53d15ac1402806616aca?s=96&#038;r=g&#038;d=identicon","caption":"Brajesh Singh"},"sameAs":["http:\/\/buddydev.com\/members\/sbrajesh\/","https:\/\/x.com\/sbrajesh"]}]}},"_links":{"self":[{"href":"https:\/\/buddydev.com\/docs\/wp-json\/wp\/v2\/posts\/2218","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buddydev.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buddydev.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buddydev.com\/docs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/buddydev.com\/docs\/wp-json\/wp\/v2\/comments?post=2218"}],"version-history":[{"count":4,"href":"https:\/\/buddydev.com\/docs\/wp-json\/wp\/v2\/posts\/2218\/revisions"}],"predecessor-version":[{"id":2222,"href":"https:\/\/buddydev.com\/docs\/wp-json\/wp\/v2\/posts\/2218\/revisions\/2222"}],"wp:attachment":[{"href":"https:\/\/buddydev.com\/docs\/wp-json\/wp\/v2\/media?parent=2218"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buddydev.com\/docs\/wp-json\/wp\/v2\/categories?post=2218"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buddydev.com\/docs\/wp-json\/wp\/v2\/tags?post=2218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}