Customizing the Style of Native Tabs on Web Client

Many people like the default look of the native tabs in Smart Client, but don't like how the tabs style in Web Client.

Many people like the default look of the native tabs in Smart Client, but don't like how the tabs style in Web Client. So, using this code, you can add your own custom style to the native tabs in Web Client.

Copy the html code below. Then create a new Global Variable in your solution. In the dialog, paste the html code below for the default value of the global. Note that when you look at the source of the .js file, you'll see Servoy has automatically added all the necessary escape characters. Next, take that Global, and place it on your form. Set it to HTML_AREA, and not editable. Launch your solution in Web Client, and you'll see your new tab styles. Modify as needed.

<html>

<head>

<style type="text/css">

ul.tabs

{

 padding-right: 0px;

 padding-top: 3px;

 padding-bottom: 0px;

 padding-left: 0px;

 list-style-type: none;

 text-align: left;

 padding: 3px 0px 0px 2px;

 margin: 2px 0px 0px 0px;

 border-bottom: 1px solid #C2CCE2;

 float: left;

 width: 100%

}

 

ul.tabs li

{

 display: inline

}

 

ul.tabs li a

{

 padding-right: 10px;

 padding-top: 1px;

 padding-bottom: 0px;

 padding-left: 0;

 text-decoration: none;

 padding: 1px 10px 0px 10px;

 margin-top: 0.2em;

 margin-left: 0.2em;

 background-color: #C2CCE2;

 border: 1px solid #C2CCE2;

 border-bottom: 1px solid #C2CCE2;

 float: left

}

 

ul.tabs li a:hover

{

 color: #000;

 background-color: #C2CCE2;

 border-bottom: 1px solid #C2CCE2

}

 

ul.tabs li.disabled_selected_tab a

{

 color: #000;

 background-color: #C2CCE2;

 border-bottom: 1px solid #C2CCE2

}

 

ul.tabs li.disabled_tab a

{

 color: #000;

 background-color: #C2CCE2;

 border-bottom: 1px solid #C2CCE2

}

 

ul.tabs li.selected_tab a

{

 color: #000;

 background-color: #EBF2FA;

 border-bottom: 1px solid #C2CCE2

}

 

ul.tabs li.selected_tab a:hover

{

 color: #000;

 background-color: #EBF2FA;

 border-bottom: 1px solid #C2CCE2

}

 

</style></head></html>