CSS For The Pages The Customizer Doesn't Touch ( Category, OG Login, Library )

The customizer makes it super easy to update the appearance of your courses/membership product overview and lesson pages. However, there are a few pages the customizer does not touch:

• Login page
• Library page
• Course/product category list page
• Course/product category content page

We have created the following CSS stylesheet you can fill in with your own brand colors and add your fonts to, so you can make the entire membership area display cohesively.

/* Membership CSS For Matching Files Card, Login, Library, and Category Pages With Customizer Pages */

/***************************/








/* Login Screen Formatting */
/***************************/
button#login-button {
  background-color: #451580; 
  border-radius: 0px; 
  font-size: 16px;}
a#forgot-password {color: #451580;}
a#forgot-password:hover {color: #BCACDE;}
.text-blue-500 {color: #000000;}
#login-header {font-family: 'Prata', serif;}









/* Login Background - NOTE: will recolor all product background pages except library bg */
.bg-gray-100 {
  background-color: #451580 !important;
 }






/*Hides Portal Name From Client Portal*/
div.text-5xl {
  display: none !important;
}

/***************************/



/*Client Portal Home Page Formatting*/
/************************************/


/*View All Groups and Complete Course test in button*/
span.n-button__content {
  color: #000000 !important;
}


/*Course Progress text*/
div[data-v-aef8f44a].ml-1.text-clientportal-tertiary.hl-text-sm-medium {
  color: #000000 !important;
}


/*Course progress button*/
button#courses-btn.n-button.n-button--primary-type.n-button--medium-type.mt-6.\!font-semibold.hover\:scale-105 {
  background-color: #000000 !important;
}


/*Course progress button border color*/
div.n-button__border {
  border: #000000 !important;
}


/*progress circle fill color*/
div.n-progress-graph-circle path.n-progress-graph-circle-fill {
  stroke: #000000 !important;
}


/*progress circle*/
div.n-progress-graph-circle path.n-progress-graph-circle-rail {
  stroke: #000000 !important;
}

/****************************************/



/* Library Page Formatting */
/***************************/









/* Library Background */
 .bg-white.flex.flex-col.overflow-y-auto.min-h-screen {
  background-color: #451580 !important;
 }
 



/*Hover link color*/
a:hover {
color: INSERT HEX CODE !important;
}






/* All Courses Button Background */
.bg-nova-blue-600 {
  background-color: #BCACDE !important;
}


/*Product Header Icons*/
/*************************************/

/*Header Home button on the right side*/
div#app-launcher.flex.z-20.h-10.w-10.cursor-pointer.items-center.justify-center.rounded-full.text-gray-500.hover\:bg-gray-200 { 
  color: #FFFFFF !important;
}

/* Header waffle icon*/
div#pg-afcp-navbar__navigation-page-app-launcher-btn {
  color: #FFFFFF !important;
}

/*Header home icon on the left side*/
div.flex.items-center.brand-logo-container {
  color: #FFFFFF !important;
}

/*Header search bar text*/
div#search.n-input.n-input--resizable.n-input--round.n-input--stateful.search-bar.search-bar-bg.search-bar-border.hl-input-text.font-sans.search-bar.search-bar-bg.search-bar-border {
  color: #FFFFFF !important;
}

/*Header Search Icon*/
div.n-input__prefix {
  color: #FFFFFF !important;
}

/***************************************/





/* My Courses Text */
div#library-title span:nth-child(2) {
  color: #000000;
}

span.n-button__content .text-sky-400 {
  color: #000000 !important;
}

/*Header icon color*/
:root {
  --header-icon-color: #FFFFFF !important;
}






/* Library Cards - default is transparent bg, may want to change if you change bg color of library page above */
.nova-product-card {
    background: #F9F7FE;
}









/* In Library Button */
.bg-in-library {
    background-color: #BCACDE !important;
}









/* Library Navigation Bar Formatting - NOTE: will recolor nav bar for all product pages */
div#navigation-header {background: #451580;}

/****************************/








/* Category Page Formatting */
/****************************/



/*Hides hero button*/
button#load-next-post {
  display: none !important;
}




/*Hides hero title*/
div#product-title.font-bold.text-4xl.primaryStyle.hero-title {
  display: none !important;
}



/*Mark as complete text in button*/
.text-blue-700 {
  color: INSERT HEX CODE !important;
}
  


/*hover color of mark as complete button*/
#post-completion-btn:hover {
  background-color: INSERT HEX CODE  !important;
}







/* Page Background Color */
.bg-gray-100 {
  background-color: #FFF4EF !important;
}  









/* Category Heading Formatting */
div.title.font-semibold {
  color: #451580; 
  font-family: 'Prata', serif;}









/* Category Title Formatting - list of categories */
p.category-title {
  color: #451580;
  font-family: 'Prata', serif;}









/* Category Lesson Number Formatting - list of categories */
div.count.text-gray-600 {
  color: #451580;}









/* Category Post Title Formatting - list of lessons in category */ 
a.subcategory-title {
  color: #451580 !important;
  font-family: 'Prata', serif !important;
}









/* Breadcrumbs on all pages,  including category */
div#product-breadcrumbs a, div#product-breadcrumbs span {
  color: #F9F7FE; 
}





/*Hides hero button*/
button#load-next-post {
  display: none !important;
}




/*Hides hero title*/
div#product-title.font-bold.text-4xl.primaryStyle.hero-title {
  display: none !important;
}






 /* Card backgrounds: Instructor card, progress bar, individual category overview pages,
 list items on categories overview page, categories overview page - category list card */
 div#instructor-card, div#product-progress-stats, div.category-contents.mb-4.rounded-sm.bg-white.shadow.p-5, div.category-list-item.rounded.lg\:my-4.p-4.lg\:p-2.items-center.bg-white.grid.grid-cols-4.gap-4, div.mb-4.category-list.bg-white.rounded.pb-6.col-span-2.shadow.p-6 {
     background: #F9F7FE !important;
 }









 /* Instructor Card Text */
 span#instructor-heading {
  color: #451580;
 }

div#instructor-title {
    color: #d5ba5c !important;
}

 div#instructor-name {
  color: #451580;
 }









 /* Progress card text */
 span#completion-count {
  color: #451580;
 }




/*Progress bar color*/  
div.progress {
  background: INSERT HEX CODE !important;
}






 /* Progress bar completed color */
 div#progress-completed {
  background-color: #451580;
 }

/**************************/








/* Lesson Page Formatting */
/**************************/





/*Mark as complete text in button*/
.text-blue-700 {
  color: INSERT HEX CODE !important;
}
  



/*Hover color of mark as complete button*/
#post-completion-btn:hover {
  background-color: INSERT HEX CODE  !important;
}






/* Files card background */
div#post-materials {
  background: #F9F7FE;
}









/* Files card title */
.materials-card-ttile {
    color: #000000 !important;
}









/* Linked file text color */
.post-material a {
  color: #451580 !important;
}









/* Comments Card Formatting - lesson page */
.w-full.bg-white.mt-5.px-10.pb-10 {
  background: #F9F7FE;
  border-radius: 4px; /* to match rounded corners on other cards */
}









/* Comments Card title */
.text-gray-600 {
  color: #451580 !important;
}









/* Comments post button */
.text-blue-500 {
  color: #F9F7FE !important;
}

.bg-blue-100 {
  background-color: #451580 !important;
}









/* Mark completed and next lesson buttons */
/* Recolor button border */
button#post-completion-button {
    border: 1px solid #000000 !important;
}









/* Recolor button background and text on hover */
button#post-completion-button:hover {
    background: #d5ba5c !important;
    color: #000000 !important;
}









/* Recolor green text on post-completion button */
button#post-completion-button.text-green-700.hover\:bg-green-500 {
	color: #000000 !important;
}






/*Recolor blue link underline color*/
a {
color:#000000 !important;
}







/* Recolor links on hover */
.hover\:text-blue-600:hover, a:hover, a:hover p.category-title {
    color: #000000 !important;
}
/**************************/


/* Video Player Formatting*/
/**************************/






/* Changes background color of main player button*/
.plyr__control--overlaid {
  background: #000000 !important;
}






/* Changes background color of player buttons*/ 
.plyr__control {
    background:#000000 !important;
  }






/*Changes Button Icon color*/
.plyr button {
   color: #000000 !Important;
}






/*Changes button hover color*/
.video-player-wrapper {
    --plyr-color-main: #000000 !Important;
}

/********************************************/








/* New York Theme ONLY - Lesson List Text */
/********************************************/








/* Recolor blue text */
.lesson-post-tree .text-blue-700 {
    color: #000000 !important;
}









/* Lesson Text On Hover - so it isn't gold text on gold bg */
a.post-highlight span {
    color: #000000 !important;
}