Chat with us, powered by LiveChat

Now we have Advanced Request Offerings in Portal v5 and beyond, did you know that you can configure the color of the breadcrumbs ribbon when you have multiple pages? Currently, there isn’t any reference in the custom.css examples, however, we will update this in future releases.  The default blue looks great with the OOB theme but it is not ideal in a corporate branded portal. In your custom.css you will want to add the following code and change the colors to match your specifications.

Tip: The “:active” selector can be used on all elements, not only links.

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

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

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

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

/*This is the boxes with numbers in - background and border - prob want all the same color*/
.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;
}

Tip: If you aren’t familiar with w3schools you need to check it out! You can find pretty much anything you need for customizing your css.  Here’s their website: http://www.w3schools.com/

A special thanks to John Doyle and Geoff Ross for the content which I mostly stole for this post!

I hope this helps you customize and enjoy your Cireson Self-Service Portal even more.