SharePoint Web Parts
& Office 365 Apps
by VirtoSoftware

Customer Case: Color Coding SharePoint Form Tabs

How to create a SharePoint form with color-coded tabs

Request FREE 30-mins consultation

Business Requirements

We have a request by a client to color-code the form tabs with a custom color to match the company design.

Virto Software Components Used

Virto SharePoint Forms Designer.

Solution Summary

Virto SharePoint 2013 and SharePoint Online forms can be extended with css color-coding, using custom code in css editor.

You have to put the following code in css editor and save the form.

SharePoint forms with color-coded tabs

.bootstrap-scope .nav-tabs {
border-radius: 10px 10px 0px 0px;
width: 100%;
background: #00aeef;

.bootstrap-scope .nav-tabs>li {
border-radius: 10px;
margin-top: 5px;

.bootstrap-scope .nav-tabs>li:first-child {
margin-left: 5px;
.bootstrap-scope .nav-tabs>li>a{
.bootstrap-scope .nav-tabs>li>a:hover{
.bootstrap-scope .nav-tabs>>a{
.bootstrap-scope .nav-tabs>li>a{
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;

In this example, the blue background color #00aeef is used. You can change the background color and text colors as well.

Now you can have the color-coded tabs in your SharePoint form.

SharePoint forms with color-coded tabs

Find more useful information on the Virto SharePoint Forms Designer and Virto SharePoint Online Forms Designer pages.

Related Products:
Office 365
Forms Designer
SharePoint Forms


About the author linkedin


Tatiana Sushchenko is the product owner at VirtoSoftware. She started her IT career with the famous ABBYY Lingvo back in 2006 in Moscow. Then she moved to Microsoft performing strongly in various marketing management roles across Visio, SharePoint, Office 365 and Project for almost 10 years. Tatiana is a graduate of the Institute of Business Studies and holds a mini-MBA degree. She also graduated from Microsoft marketing excellence university.

All publications of the author

sharepoint formsuse cases

Leave a Reply

Your email address will not be published.