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;
 }

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


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



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


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



/* My Courses Text */
div#library-title span:nth-child(2) {
  color: #000000;
}
span.n-button__content .text-sky-400 {
  color: #000000 !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 */
/****************************/



/* 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; 
}
 


 /* 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 completed color */
 div#progress-completed {
  background-color: #451580;
 }

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


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



/* 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 links on hover */
.hover\:text-blue-600:hover, a:hover, a:hover p.category-title {
    color: #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;
}