{"id":91,"date":"2026-04-06T19:27:44","date_gmt":"2026-04-06T19:27:44","guid":{"rendered":"https:\/\/ghlcss.com\/blog\/?p=91"},"modified":"2026-04-23T15:24:33","modified_gmt":"2026-04-23T15:24:33","slug":"ghl-membership-site-css-styling-guide","status":"publish","type":"post","link":"https:\/\/ghlcss.com\/blog\/ghl-membership-site-css-styling-guide\/","title":{"rendered":"GHL Membership Site CSS: How to Create a Premium Course Area"},"content":{"rendered":"<style>.kb-table-of-content-nav.kb-table-of-content-id91_a76485-f3 .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);border-top:2px solid #cc66ff;border-right:2px solid #cc66ff;border-bottom:2px solid #cc66ff;border-left:2px solid #cc66ff;border-top-left-radius:10px;border-bottom-right-radius:10px;}.kb-table-of-content-nav.kb-table-of-content-id91_a76485-f3 .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id91_a76485-f3 .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id91_a76485-f3 .kb-table-of-content-wrap .kb-table-of-content-list{font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}@media all and (max-width: 1024px){.kb-table-of-content-nav.kb-table-of-content-id91_a76485-f3 .kb-table-of-content-wrap{border-top:2px solid #cc66ff;border-right:2px solid #cc66ff;border-bottom:2px solid #cc66ff;border-left:2px solid #cc66ff;}}@media all and (max-width: 767px){.kb-table-of-content-nav.kb-table-of-content-id91_a76485-f3 .kb-table-of-content-wrap{border-top:2px solid #cc66ff;border-right:2px solid #cc66ff;border-bottom:2px solid #cc66ff;border-left:2px solid #cc66ff;}}<\/style>\n\n\n<p>Do you want your <strong>GoHighLevel (GHL)<\/strong> membership site to look like a high-end learning platform? The standard GHL portal is great for hosting videos, but the design can feel a bit plain. By using <strong>GHL CSS<\/strong>, you can transform your course area into a professional &#8220;Netflix-style&#8221; experience.<\/p>\n\n\n\n<p>In this guide, we will show you how to style your membership headers, sidebar navigation, and lesson cards to impress your students.<\/p>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns91_553ec8-e2{gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns91_553ec8-e2 .kt-button{font-weight:normal;font-style:normal;}.kt-btns91_553ec8-e2 .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns91_553ec8-e2 .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns91_553ec8-e2 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns91_553ec8-e2 .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns91_553ec8-e2 .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns91_553ec8-e2 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns91_553ec8-e2 .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns91_553ec8-e2\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn91_7e306f-7e.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn91_7e306f-7e.kb-button{color:var(--global-palette2, #2B6CB0);border-top-left-radius:10px;border-bottom-right-radius:10px;border-top-color:#cc66ff;border-top-style:solid;border-right-color:#cc66ff;border-right-style:solid;border-bottom-color:#cc66ff;border-bottom-style:solid;border-left-color:#cc66ff;border-left-style:solid;}@media all and (max-width: 1024px){.wp-block-kadence-advancedbtn .kb-btn91_7e306f-7e.kb-button{border-top-color:#cc66ff;border-top-style:solid;border-right-color:#cc66ff;border-right-style:solid;border-bottom-color:#cc66ff;border-bottom-style:solid;border-left-color:#cc66ff;border-left-style:solid;}}@media all and (max-width: 767px){.wp-block-kadence-advancedbtn .kb-btn91_7e306f-7e.kb-button{border-top-color:#cc66ff;border-top-style:solid;border-right-color:#cc66ff;border-right-style:solid;border-bottom-color:#cc66ff;border-bottom-style:solid;border-left-color:#cc66ff;border-left-style:solid;}}<\/style><a class=\"kb-button kt-button button kb-btn91_7e306f-7e kt-btn-size-standard kt-btn-width-type-full kb-btn-global-outline  kt-btn-has-text-true kt-btn-has-svg-false  wp-block-kadence-singlebtn\" href=\"https:\/\/link.leadsflex.com\/schedule-quickcall\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"kt-btn-inner-text\">Get a Free Custom Growth Plan Call<\/span><\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Why Style Your GHL Membership Portal?<\/h2>\n\n\n\n<p>Your membership area is where your customers spend the most time. If it looks premium, they will feel they got a better deal. A custom-styled portal also makes it easier for students to find their lessons.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Benefits of Membership CSS:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Professional Look:<\/strong> Move away from the &#8220;standard&#8221; GHL layout.<\/li>\n\n\n\n<li><strong>Better Navigation:<\/strong> Use colors and icons to highlight the current lesson.<\/li>\n\n\n\n<li><strong>Increased Retention:<\/strong> Students are more likely to finish a course if the area feels modern and clean.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Where to Add CSS for GHL Memberships<\/h2>\n\n\n\n<p>Unlike funnels, membership CSS is added in a specific spot:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Go to <strong>Sites<\/strong> &gt; <strong>Memberships<\/strong> &gt; <strong>Settings<\/strong>.<\/li>\n\n\n\n<li>Click on <strong>Custom JS\/CSS<\/strong>.<\/li>\n\n\n\n<li>Paste your code into the <strong>CSS<\/strong> box and click <strong>Save<\/strong>.<\/li>\n<\/ol>\n\n\n\n<p>Before you start styling the portal, make sure you understand the basics of <a href=\"https:\/\/ghlcss.com\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/ghlcss.com\/\" rel=\"noreferrer noopener\">GHL CSS<\/a> to avoid common coding mistakes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Standard Portal vs. Custom CSS Portal<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Feature<\/strong><\/td><td><strong>Standard GHL Portal<\/strong><\/td><td><strong>Custom CSS Portal<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>Lesson Cards<\/strong><\/td><td>Sharp Edges<\/td><td>Rounded with Soft Shadows<\/td><\/tr><tr><td><strong>Header<\/strong><\/td><td>Simple Logo<\/td><td>Transparent or Gradient Bar<\/td><\/tr><tr><td><strong>Sidebar<\/strong><\/td><td>Basic List<\/td><td>Active Lesson Highlighting<\/td><\/tr><tr><td><strong>Fonts<\/strong><\/td><td>Default System Fonts<\/td><td>Custom Brand Fonts<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Top GHL CSS Snippets for Memberships<\/h2>\n\n\n\n<p>Use these snippets to give your course area an instant facelift.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Create Rounded Lesson Cards<\/h3>\n\n\n\n<p>CSS<\/p>\n\n\n\n<pre class=\"wp-block-code has-background\" style=\"background-color:#d56af7\"><code>.card-course {\n  border-radius: 12px !important;\n  box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;\n  transition: 0.3s;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">2. Style the &#8220;Mark as Complete&#8221; Button<\/h3>\n\n\n\n<p>CSS<\/p>\n\n\n\n<pre class=\"wp-block-code has-background\" style=\"background-color:#d56af7\"><code>.btn-complete {\n  background-color: #10b981 !important;\n  border-radius: 5px !important;\n  font-weight: bold !important;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">3. Change the Sidebar Navigation Background<\/h3>\n\n\n\n<p>CSS<\/p>\n\n\n\n<pre class=\"wp-block-code has-background\" style=\"background-color:#d56af7\"><code>.membership-sidebar {\n  background: #f9fafb !important;\n  border-right: 1px solid #e5e7eb !important;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">How to Make a &#8220;Netflix-Style&#8221; Layout<\/h2>\n\n\n\n<p>To get that modern streaming look, you should focus on your <strong>Course Library<\/strong> page. Use CSS to make your course thumbnails larger and add a &#8220;zoom&#8221; effect when a user hovers over them.<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Set the <code>aspect-ratio<\/code> of your thumbnails to 16\/9.<\/li>\n\n\n\n<li>Add a <code>scale<\/code> effect on hover.<\/li>\n\n\n\n<li>Hide the progress bar until the user hovers over the card.<\/li>\n<\/ol>\n\n\n\n<p>If you are also working on your main agency look, don&#8217;t forget to check our guide on <a href=\"https:\/\/ghlcss.com\/blog\/ghl-dashboard-css-white-label-branding\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/ghlcss.com\/blog\/ghl-dashboard-css-white-label-branding\/\" rel=\"noreferrer noopener\">GHL Dashboard CSS<\/a> for a consistent brand experience.<\/p>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns91_a344c2-36{gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns91_a344c2-36 .kt-button{font-weight:normal;font-style:normal;}.kt-btns91_a344c2-36 .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns91_a344c2-36 .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns91_a344c2-36 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns91_a344c2-36 .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns91_a344c2-36 .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns91_a344c2-36 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns91_a344c2-36 .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns91_a344c2-36\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn91_2e703a-e6.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn91_2e703a-e6.kb-button{color:var(--global-palette2, #2B6CB0);border-top-left-radius:10px;border-bottom-right-radius:10px;border-top-color:#cc66ff;border-top-style:solid;border-right-color:#cc66ff;border-right-style:solid;border-bottom-color:#cc66ff;border-bottom-style:solid;border-left-color:#cc66ff;border-left-style:solid;}@media all and (max-width: 1024px){.wp-block-kadence-advancedbtn .kb-btn91_2e703a-e6.kb-button{border-top-color:#cc66ff;border-top-style:solid;border-right-color:#cc66ff;border-right-style:solid;border-bottom-color:#cc66ff;border-bottom-style:solid;border-left-color:#cc66ff;border-left-style:solid;}}@media all and (max-width: 767px){.wp-block-kadence-advancedbtn .kb-btn91_2e703a-e6.kb-button{border-top-color:#cc66ff;border-top-style:solid;border-right-color:#cc66ff;border-right-style:solid;border-bottom-color:#cc66ff;border-bottom-style:solid;border-left-color:#cc66ff;border-left-style:solid;}}<\/style><a class=\"kb-button kt-button button kb-btn91_2e703a-e6 kt-btn-size-standard kt-btn-width-type-full kb-btn-global-outline  kt-btn-has-text-true kt-btn-has-svg-false  wp-block-kadence-singlebtn\" href=\"http:\/\/gohighlevel.com\/30-day-trial?fp_ref=leadsflex\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"kt-btn-inner-text\">Claim Your $10K Bonuses + Free Funnels<\/span><\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Best Practices for Membership Design<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Focus on Readability<\/h3>\n\n\n\n<p>Course areas are for learning. Do not use dark backgrounds with dark text. Always use high contrast so students can read your lesson notes easily.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Keep It Fast<\/h3>\n\n\n\n<p>Memberships often have many images and videos. Keep your CSS file small so the lessons load quickly on slow internet connections.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mobile Learning<\/h3>\n\n\n\n<p>Many students watch courses on their phones. Test your CSS on a mobile device to make sure the sidebar doesn&#8217;t block the video player.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently Asked Questions (FAQs)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Will CSS hide my videos?<\/h3>\n\n\n\n<p>No. CSS only changes the &#8220;frame&#8221; around your videos. Your video hosting (Wistia, YouTube, or GHL) will stay the same.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Can I use different CSS for different courses?<\/h3>\n\n\n\n<p>Currently, the Custom CSS in GHL Memberships is global. This means it will apply to all courses inside that specific portal.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Can I change the login page too?<\/h3>\n\n\n\n<p>Yes! You can use the same CSS box to style the login and password reset pages for your students.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>A beautiful <strong>GHL Membership Site<\/strong> sets you apart from other coaches and agencies. By adding just a few lines of CSS, you can turn a basic course into a premium digital product. Start by rounding your cards and matching your brand colors to create a space where your students love to learn.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you want your GoHighLevel (GHL) membership site to look like a high-end learning platform? The standard GHL portal is great for hosting videos, but the design can feel a bit plain. By using GHL CSS, you can transform your course area into a professional &#8220;Netflix-style&#8221; experience. In this guide, we will show you how&#8230;<\/p>\n","protected":false},"author":1,"featured_media":92,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-91","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-setup-guides"],"_links":{"self":[{"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/posts\/91","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/comments?post=91"}],"version-history":[{"count":2,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/posts\/91\/revisions"}],"predecessor-version":[{"id":115,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/posts\/91\/revisions\/115"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/media\/92"}],"wp:attachment":[{"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/media?parent=91"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/categories?post=91"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/tags?post=91"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}