Custom.CSS Help Needed

Chris_Keander

I'm looking for a way to change the colors of the navigation bar introduced with the Advanced Request Offering wizard.

I've highlighted the bar in question.  I want to change the colors to match the rest of the site I've already customized but my web developer fu is failing me.

Any takers on this?

Geoff_Ross

Hi Chris,
Here you go:

/* This is the main bar background colour*/
.form-wizard-levels {
background-color: #B9E3E1 !important;
}

/* This is the inactive page background colour - you want same as above*/
.form-wizard-levels > li.active {
background-color: #B9E3E1 !important;
}

/* This is the active page background colour*/
.form-wizard-levels > li.active > a {
background-color: #52BBB6 !important;
}

/* This is the little triangle arrow bit colour - you want this same as above*/
.form-wizard-levels > li.active > a::after {
border-left-color: #52BBB6 !important;
}

/*This is the boxes with numbers in - background and border - prob want all the same colour*/
.form-wizard-levels > li > a > span {
background-color: #686868 !important;
border-bottom-color: #686868 !important;
border-left-color: #686868 !important;
border-right-color: #686868 !important;
border-top-color: #686868 !important;
}

Geoff

Geoff_Ross

Hi Mate, 

2 for 2. 

/*set the color of clickable controls like buttons checkboxes, etc*/
/* we use standard bootstrap primary classes*/
.checkbox-primary input[type=checkbox]:checked+label:before,
.checkbox-primary input[type=checkbox]:checked~.checkbox-label:before,
.btn-primary:hover, 
.btn-primary:active, 
.btn-primary:focus, 
.btn-primary {
    background-color: red;
    border-color: red;
}

Geoff_Ross

Hi Chris,
Here you go:

/* This is the main bar background colour*/
.form-wizard-levels {
background-color: #B9E3E1 !important;
}

/* This is the inactive page background colour - you want same as above*/
.form-wizard-levels > li.active {
background-color: #B9E3E1 !important;
}

/* This is the active page background colour*/
.form-wizard-levels > li.active > a {
background-color: #52BBB6 !important;
}

/* This is the little triangle arrow bit colour - you want this same as above*/
.form-wizard-levels > li.active > a::after {
border-left-color: #52BBB6 !important;
}

/*This is the boxes with numbers in - background and border - prob want all the same colour*/
.form-wizard-levels > li > a > span {
background-color: #686868 !important;
border-bottom-color: #686868 !important;
border-left-color: #686868 !important;
border-right-color: #686868 !important;
border-top-color: #686868 !important;
}

Geoff

Chris_Keander

I owe you a beer.  Cheers Geoff!

Chris_Keander

One more quick question.  How about changing the background color of the checkboxes for the Show inactive work items, etc?

Geoff_Ross

Hi Mate, 

2 for 2. 

/*set the color of clickable controls like buttons checkboxes, etc*/
/* we use standard bootstrap primary classes*/
.checkbox-primary input[type=checkbox]:checked+label:before,
.checkbox-primary input[type=checkbox]:checked~.checkbox-label:before,
.btn-primary:hover, 
.btn-primary:active, 
.btn-primary:focus, 
.btn-primary {
    background-color: red;
    border-color: red;
}

Chris_Keander

You rock.  Thanks a million.