Public pages

e.g: login, signup, forgot password pages

WEB_APP_CUSTOMER_PORTAL_LOGIN_CUSTOM_CSS

WEB_APP_MOBILE_CUSTOMER_PORTAL_LOGIN_CUSTOM_CSS

/* Custom CSS for pages that required login first */
/* set the following in the CUSTOMER_PROPERTIES */
/* WEB_APP_CUSTOMER_PORTAL_LOGIN_CUSTOM_CSS or customer portal */
/* WEB_APP_MOBILE_CUSTOMER_PORTAL_LOGIN_CUSTOM_CSS or customer portal mobile app */
/* primary (custom) replace #f05a8d */
/* lighter primary (custom) replace #ffcdfe */
/* darker primary (custom) replace #7B2E48 */
/* ----------------------------------------------------------------------------*/

.btn-primary {
background-color: #ffcdfe;
border-color: #ffcdfe;
color: #FFFFFF;
}

.btn-primary:hover,
.btn-primary:focus, 
.btn-primary:active, 
.btn-primary.active, 
.open 
.dropdown-toggle.btn-primary, 
.btn-primary:active:focus, 
.btn-primary:active:hover, 
.btn-primary.active:hover, 
.btn-primary.active:focus{
	background-color: #7B2E48;
	border-color: #7B2E48;
      color: #FFFFFF;
}

.btn-primary.disabled, 
.btn-primary.disabled:hover, 
.btn-primary.disabled:focus, 
.btn-primary.disabled:active, 
.btn-primary.disabled.active, 
.btn-primary[disabled], 
.btn-primary[disabled]:hover, 
.btn-primary[disabled]:focus, 
.btn-primary[disabled]:active, 
.btn-primary.active[disabled], fieldset[disabled] 
.btn-primary, fieldset[disabled] 
.btn-primary:hover, fieldset[disabled] 
.btn-primary:focus, fieldset[disabled] 
.btn-primary:active, fieldset[disabled] 
.btn-primary.active {
    background-color: #7B2E48;
	border-color: #7B2E48;
	color: #FFFFFF;
}

.form-control:focus, .single-line:focus {
	border-color: #ffcdfe;
}

Secured pages

any pages after signin to the customer portal (or mobile app)

WEB_APP_CUSTOMER_PORTAL_CUSTOM_CSS

WEB_APP_MOBILE_CUSTOMER_PORTAL_CUSTOM_CSS

/* Custom CSS for pages that required login first */
/* set the following in the CUSTOMER_PROPERTIES */
/* WEB_APP_CUSTOMER_PORTAL_CUSTOM_CSS or customer portal */
/* WEB_APP_MOBILE_CUSTOMER_PORTAL_CUSTOM_CSS or customer portal mobile app */
/* primary (custom) replace #f05a8d */
/* lighter primary (custom) replace #ffcdfe */
/* darker primary (custom) replace #7B2E48 */
/* Note: use > not >
/* ----------------------------------------------------------------------------*/

/*container custom css */
.top-navigation 
.navbar-brand {
background: #ffcdfe; } 

.top-navigation .nav > li.active > a{
 color: #ffcdfe;
 }


.top-navigation .nav > li a:hover,
.top-navigation .nav > li a:focus,
.top-navigation .nav > li.active a:hover,
.top-navigation .nav > li.active a:focus {
    background: #fff;
    color: #7B2E48;
}

.navbar-toggle {
  background-color: #ffcdfe;
  color: #fff;
  padding: 6px 12px;
  font-size: 14px;
}

.panel-info, .panel-primary {
    border-color: #ffcdfe;
}
.panel-info > .panel-heading, .panel-primary > .panel-heading {
    background-color: #ffcdfe;
    border-color: #ffcdfe;
    color: #fff;
}

.btn-primary, .btn-success { 
 background-color: #ffcdfe; 
 border-color: #ffcdfe; 
 color: #FFF; 
 } 
 
.btn-primary.btn-outline,
.btn-success.btn-outline {
    color: #FFFFFF;
}

.btn-primary:hover, 
 .btn-primary:focus, 
 .btn-primary:active, 
 .btn-primary.active, 
 .open 
 .dropdown-toggle.btn-primary, 
 .btn-primary:active:focus, 
 .btn-primary:active:hover, 
 .btn-primary.active:hover, 
 .btn-primary.active:focus,
 .btn-success:hover, 
 .btn-success:focus, 
 .btn-success:active, 
 .btn-success.active, 
 .open 
 .dropdown-toggle.btn-success, 
 .btn-success:active:focus, 
 .btn-success:active:hover, 
 .btn-success.active:hover, 
 .btn-success.active:focus { 
 background-color: #7B2E48; 
 border-color: #7B2E48; 
 color: #FFFFFF; }
 
 
 .btn-primary:active:hover, 
 .open>.dropdown-toggle.btn-primary:hover, 
 .btn-primary:active:focus, 
 .btn-primary.active:focus, 
 .open > .dropdown-toggle.btn-primary:focus, 
 .btn-primary:active.focus, 
 .open > .dropdown-toggle.btn-primary.focus,
 .btn-success.active:hover, 
 .open>.dropdown-toggle.btn-success:hover, 
 .btn-success.active:focus, 
 .open > .dropdown-toggle.btn-success: focus, 
 .btn-success:active.focus, 
 .open > .dropdown-toggle.btn-success.focus{ 
 background-color: #7B2E48; 
 border-color: #7B2E48; 
 color: #FFFFFF; }
 
.label-primary, .badge-primary {
    background-color: #7B2E48;
    color: #ffcdfe;
}

.text-info {
    color: #ffcdfe;
}

.text-navy {
    color: #ffcdfe;
}

 /*v1 booking calendar table*/
 table#calendar_view_table td:first-child{
	background: #c04871!IMPORTANT ;
	color: white;
}

What to do

Update relevant customer property. You can reload the setting dynamically via

<customer-potal-link>/secure/customer/css/reload-custom-css

e.g. http://localhost:8080/secure/customer/css/reload-custom-css