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. 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>
- Code Repository:
Comments
tab panel styles with v5
that was a very good trick, and though you had to leave roughly everything as default in the designer to get the style effectiveley applied (the manual corrections are applied last), it reveals that images in styles can't be called by names from media://.... you have to use the image you need as a static image or labal, edit the html code servoy then generates to find out the media ID and use this in the style sheet. And this id changes when you move the solution to another server. So I found easier to use images on an external web site for this kind of style. It also reveals some strange things like the style called "table" is used for tables and also used for calendar popups. worst is the fact that this collapses with servoy v5, back to normal sad blue tabs though some styles still work (buttons for instance). I first thought servoy had changed names for tab panel styles, but that does not seem to be the right reason. I asked servoy about this, but as this is unsupported... So if anyone has tried to dig this question...
tab panel styles with v5
that was a very good trick, and though you had to leave roughly everything as default in the designer to get the style effectiveley applied (the manual corrections are applied last), it reveals that images in styles can't be called by names from media://.... you have to use the image you need as a static image or labal, edit the html code servoy then generates to find out the media ID and use this in the style sheet. And this id changes when you move the solution to another server. So I found easier to use images on an external web site for this kind of style. It also reveals some strange things like the style called "table" is used for tables and also used for calendar popups.
worst is the fact that this collapses with servoy v5, back to normal sad blue tabs though some styles still work (buttons for instance). I first thought servoy had changed names for tab panel styles, but that does not seem to be the right reason. I asked servoy about this, but as this is unsupported...
So if anyone has tried to dig this question...
tab panel styles with v5
that was a very good trick, and though you had to leave roughly everything as default in the designer to get the style effectiveley applied (the manual corrections are applied last), it reveals that images in styles can't be called by names from media://.... you have to use the image you need as a static image or labal, edit the html code servoy then generates to find out the media ID and use this in the style sheet. And this id changes when you move the solution to another server. So I found easier to use images on an external web site for this kind of style. It also reveals some strange things like the style called "table" is used for tables and also used for calendar popups.
worst is the fact that this collapses with servoy v5, back to normal sad blue tabs though some styles still work (buttons for instance). I first thought servoy had changed names for tab panel styles, but that does not seem to be the right reason. I asked servoy about this, but as this is unsupported...
So if anyone has tried to dig this question...