Does anyone know how to change the tab colour/color on tab control within the html composer
in developer studio 7.6.5 ? If I set the background colour/color to "RED" I get the text of
that tab with a white background and then 2 vertical red lines either side of that.
My gut feel is that this is not possible in 7.6.5 but I would really like to be proved wrong.

Thanks in advance
Paul

This message has been edited. Last edited by: Madasabear,

Yes, that looks awful!

Try as I might, I cannot find any Dev Studio "online" documentation on 'tab AND control'. I finally found how to add a tab item in the PDF documentation (anyone notice how unintuitive the HTML Composer is, or is it becasue I am a GUI-phobe?)

I'm afraid it might be something to do with the Java version that is required for the particular Dev Studio version. I recently upgraded to Dev Studio v7.6.8 but did not verify what version Java was at on my PC (due to a previous version fiasco).

OK, I have no idea why this horrendous piece of code is generated by the Composer:

<STYLE id=ibi_defaultstyleElt type=text/css>.tabitemsclass {
 BACKGROUND-COLOR: white
}

But it looks like you can remove reference to this via the GUI.

Click on the Tab Item. In the Properties window on the right, look for the property "Class identifier (CSS)" - by default it is set to tabitemsclass. You can remove this value. This must be done to each Tab Item.

I tried changing "white" to "red" in the HTML class declaration, but it doesn't stick - it gets changed back to "white" when saving the file.

This message has been edited. Last edited by: Francis Mariani,

Francis , that works a treat. I'm quite happy in editing via HTML
anyway , just have to remember if I make any changes in the GUI
to re-do the tab colours.

Many thanks,
Paul

Here is a little something else to dress up your tab controls.

For each tab, set on onClick event to call the setTab function.

function setTab(tabId)
{
  var spans = document.getElementsByTagName('span');
  for(var i=0; i<spans.length; i++)
  {
    if(spans[i].id.substr(0,7) == 'tabitem')
    {
      spans[i].className = 'tabitemsclass';
      spans[i].style.borderTop = 'teal 1px solid';
      spans[i].style.borderBottom = 'white thin';
    }
  }
  tabId.className = 'tabitemselected';
}

//Begin function tabitem1_onclick
function tabitem1_onclick(ctrl) {
  setTab(ctrl);
}
//End function tabitem1_onclick

I then setup another style class for the selected tab.

<STYLE id=ibi_defaultstyleElt type=text/css>.tabitemsclass {
	BORDER-BOTTOM: teal 1px solid; FILTER: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#002D56, EndColorStr=#75A1C5); BORDER-LEFT: teal 1px solid; BACKGROUND-COLOR: white; COLOR: silver; BORDER-TOP: teal 1px solid; BORDER-RIGHT: teal 1px solid
}
</STYLE>

<STYLE id=custom1 type=text/css>.tabitemselected {
	BORDER-BOTTOM: white 1px solid; FILTER: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#D9E2EA, EndColorStr=#FFFFFF); BORDER-LEFT: teal 1px solid; COLOR: #00457d; BORDER-TOP: teal 1px solid; BORDER-RIGHT: teal 1px solid
}

And finaly (and also to get around the gui setting the default tab from the last one worked with to the one I actually want to be my default), use onInitialUpdate to set the first tab.
[code]
function onInitialUpdate()
{
document.getElementById('tabitem1').click();
}

One option could be to add external style sheet while removing reference to .tabitemclass for every tab item in the HTML code. The new external CSS script can be created and added by clicking on Insert menu from the toolbar.

Or you could remove the reference to .tabitemclass for every tab item in the HTML code and right click on the tab item and select Style.... This opens up the Style Composer where you cans elect the necessary styling option as needed per your requirement. You can select background and apply any color you wish.

Thanks,
Minal Shah
Technical Specialist
Information Builders, Inc.
New York, NY.

So, when you "remove the reference to .tabitemclass for every tab item in the HTML code", it doesn't get put back by HTML Composer? Will wonders never cease?!

No, instead you create a reference to your own class name rather than letting it refer to the default "tabitemclass". For example, let it refer to class=tabitemclass2. Define tabitemclass2 in your newly created css file script.

Thanks,
Minal

Minal, thanks very much, will give it a try.