Customer Case: Color Coding SharePoint Form Tabs

How to create a SharePoint form with color-coded tabs

Request a free 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


[contentblock id=6 img=html.png]

Sergi Sinyugin
Sergi Sinyugin

Dive into the insights of Sergi, VirtoSoftware's visionary leader. Explore with Sergi as he pioneers tech breakthroughs and benchmarks for business prowess.

Articles: 219