Focal Point Banner
Community Center Education Summit Technical Support User Groups
Let's Get Social!

Facebook Twitter LinkedIn YouTube
Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] App Studio 8 - Changing Tab Colours
Go
New
Search
Notify
Tools
Reply
  
[SOLVED] App Studio 8 - Changing Tab Colours
 Login/Join
 
Member
posted
I'm trying to change the colour of the orange tabs at the top of this HTML page using the GUI in App Studio 8.0.0.9

Anyone know how to do this please?

This message has been edited. Last edited by: <Kathryn Henning>,


WF App Studio 8.0.0.9
WF Dev Studio 8.0.0.8
WF Dev Studio 7.7
 
Posts: 5 | Registered: November 26, 2014Reply With QuoteReport This Post
Member
posted Hide Post
Answered my own question.

Properties tab
Change the dropdown to DOCUMENT
Change the theme.

Not as customisable as I'd like but better than nothing.


WF App Studio 8.0.0.9
WF Dev Studio 8.0.0.8
WF Dev Studio 7.7
 
Posts: 5 | Registered: November 26, 2014Reply With QuoteReport This Post
Expert
posted Hide Post
quote:
better than nothing

is the new motto.


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, 2005Reply With QuoteReport This Post
Member
posted Hide Post
quote:
Originally posted by Francis Mariani:
quote:
better than nothing

is the new motto.


Seems to be!


WF App Studio 8.0.0.9
WF Dev Studio 8.0.0.8
WF Dev Studio 7.7
 
Posts: 5 | Registered: November 26, 2014Reply With QuoteReport This Post
Gold member
posted Hide Post
Its possible to change all the CSS elements of the theme inside that Properties window. If I remember correctly.

So its possible to style Tab/Button individually aswell.


Release: WebFOCUS 8104, AppStudio: 8105
OS: Windows
Output: HTML,Excel,Active Reports
 
Posts: 89 | Registered: November 19, 2013Reply With QuoteReport This Post
Member
posted Hide Post
quote:
Originally posted by SSander:
Its possible to change all the CSS elements of the theme inside that Properties window. If I remember correctly.

So its possible to style Tab/Button individually aswell.


Ssander, can you explain this further please?

The GUI in App Studio seems VERY limited compared to the coding you can do. And yet, coding of the HTML report pages is limited as you can't open it back in the GUI afterwards.


WF App Studio 8.0.0.9
WF Dev Studio 8.0.0.8
WF Dev Studio 7.7
 
Posts: 5 | Registered: November 26, 2014Reply With QuoteReport This Post
Expert
posted Hide Post
quote:
So its possible to style Tab/Button individually aswell

No guessing please.

There appears to be no way to style the tabs. This probably has to be done via an external theme style-sheet, which I have not played around with yet. TimN, how did you make it orange? Also, have you found that AppStudio v8.0.09 works with server v8.0.08 (which I assume you have, because you mention Dev Studio v8.0.08)...



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, 2005Reply With QuoteReport This Post
Gold member
posted Hide Post
Hi TimN

There are CSS class files IBI_pageHeader and IBI_pageHeader_Selected that can be used to change the tab color:

1 - Click on Embedded JavaScript/CSS tab in AppStudio
2 - Go to Settings panel and select Internal CSS button

3- Use the following:


body{
}


.IBI_pageHeader
{
background-image:none;
background-colorRed Facerange;
color:cornsilk;



}
.IBI_pageHeader_Selected
{
background-image:none;
background-color: Cyan;
color:gold;
}


If you have an issue open up a case and ask for Barry.

Thanks Barry


WebFOCUS 8103, Windows, App Studio
 
Posts: 84 | Location: NYC | Registered: November 13, 2008Reply With QuoteReport This Post
Platinum Member
posted Hide Post
Barry's suggestion works great to style tabs on a single HTML page.

I didn't want to tweak this for every page we created.

I opted to track down the actual style sheet on the web server.

(Our BIP was set up to use the Silver Theme)

e:\ibi\WebFOCUS80\ibi_html\javaassist\ibi\html\composer\themes\nonBindows\IBI-Themes\bip-silver.css

Just another option for you.


webFOCUS 8203
WindowsServer 2012 R2,
Excel, PDF, HTML, ActiveReports
 
Posts: 124 | Location: Minnesota | Registered: August 26, 2013Reply With QuoteReport This Post
Gold member
posted Hide Post
quote:

(Our BIP was set up to use the Silver Theme)

e:\ibi\WebFOCUS80\ibi_html\javaassist\ibi\html\composer\themes\nonBindows\IBI-Themes\bip-silver.css

Just another option for you.

We used the default option and then used our own custom CSS, but after updating to 8009 we had so many errors and issues with HTML pages that now we have to re-think how we attach CSS files to HTML-s.


Release: WebFOCUS 8104, AppStudio: 8105
OS: Windows
Output: HTML,Excel,Active Reports
 
Posts: 89 | Registered: November 19, 2013Reply With QuoteReport This Post
Expert
posted Hide Post
quote:
after updating to 8009 we had so many errors and issues
- I'm sure you're very busy dealing with these issues, but it would be beneficial to all of us (including IBI) if you told us about some of the problems you faced.


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, 2005Reply With QuoteReport This Post
Gold member
posted Hide Post
Hi

Once you have the css code that you want, you can take the current sylesheet (IBI's) copy it to the content folder, modify it, and attach it to the HTML pages that you create. But adding the custom CSS on every page is not that hard, just cut and paste...

Thanks Barry


WebFOCUS 8103, Windows, App Studio
 
Posts: 84 | Location: NYC | Registered: November 13, 2008Reply With QuoteReport This Post
Gold member
posted Hide Post
I will greatly share my experience, I haven't had time to report all issues to IBI.
But some items we ran into with stylesheets.

  • Updating "default_theme.css" on server side caused AppStudio elements like tabs/accordions to break. Note here is that we took BIPBlack as base.
  • Second issue with updating "default_theme.css" was that we had "Infowindow"/"Messages" on every html page. After some debugging we found that it came from IB_COMPOSERS.js and there was hardcoded following: if(isDefaultThemeLoaded()||isTemplateDocument()){controlHtml=
    so infowindow was hardcoded into all of our HTML pages. So solution was just to modify this js and add visibility: hidden.
  • As in this topic aswell there are some people mentioning that you can add custom css to HTML page by GUI. I am not aware if it acts like this only our system, but I noticed this GUI does not "include" but copies this css into local folder. For example if I have CSS in WFC/Repository/Common/ and I include to HTML placed in WFC/Repository/ABC/ the CSS is copied into that folder. I will research this more, because we need to get this working and have only 1 common css.
  • With 8009 we have to use Client side option "Strict_IE" (100% sure of parameter name, but its under "Other" tab) - without this as "True" some HTMLs just will not load inside portal (run them separately works fine, either from resource tree or from AppStudio).

I think right now its all I remember, there might be some other things that just come in mind right now.


Release: WebFOCUS 8104, AppStudio: 8105
OS: Windows
Output: HTML,Excel,Active Reports
 
Posts: 89 | Registered: November 19, 2013Reply With QuoteReport This Post
  Powered by Social Strata  
 

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] App Studio 8 - Changing Tab Colours

Copyright © 1996-2018 Information Builders, leaders in enterprise business intelligence.