Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only.

Join the TIBCO Community
TIBCO Community is a collaborative space for users to share knowledge and support one another in making the best use of TIBCO products and services. There are several TIBCO WebFOCUS resources in the community.

  • From the Home page, select Predict: WebFOCUS to view articles, questions, and trending articles.
  • Select Products from the top navigation bar, scroll, and then select the TIBCO WebFOCUS product page to view product overview, articles, and discussions.
  • Request access to the private WebFOCUS User Group (login required) to network with fellow members.

Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community.


Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] How do I change Tab colour/color in Tab Control ?

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SOLVED] How do I change Tab colour/color in Tab Control ?
 Login/Join
 
Member
posted
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 Smiler

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


Developer Studio Release : 7.6.11
 
Posts: 21 | Location: TataSteel Strip Products UK , Port Talbot , South Wales | Registered: November 28, 2006Report This Post
Expert
posted Hide Post
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).


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Expert
posted Hide Post
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


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Member
posted Hide Post
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
Good One


Developer Studio Release : 7.6.11
 
Posts: 21 | Location: TataSteel Strip Products UK , Port Talbot , South Wales | Registered: November 28, 2006Report This Post
Member
posted Hide Post
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();
}


WebFOCUS 8.1.04; SQL Server 2012; Windows 7; Windows Server 2012 R2;
 
Posts: 26 | Registered: November 21, 2005Report This Post
<Minal Shah>
posted
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.
 
Report This Post
Expert
posted Hide Post
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?!


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
<Minal Shah>
posted
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
 
Report This Post
Expert
posted Hide Post
Minal, thanks very much, will give it a try.


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] How do I change Tab colour/color in Tab Control ?

Copyright © 1996-2020 Information Builders