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] Styling in WebFOCUS

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SOLVED] Styling in WebFOCUS
 Login/Join
 
Platinum Member
posted
Hi All,

I am about to undertake a styling exercise where I introduce a dark to theme our environment. So I'm completely recreating the stylesheet.

My question is how to best go about this. I would like to use technology (CSS or webfocus's stylesheets or anything else) where I only need to make changes in a single location, and that styleheet can be used by tables, charts and active reports.

We do use active reports and from my experience they don't always play nice with -HTMLFORM commands, so will CSS be a solution? I'm not sure how to use raw CSS with webfocus.

Thank you,

This message has been edited. Last edited by: FP Mod Chuck,


WebFOCUS 8201, SP 0.1, Windows 7, HTML
 
Posts: 190 | Registered: May 19, 2017Report This Post
Virtuoso
posted Hide Post
For content styling (Reports, Charts and Documents) I usually create a customized WebFOCUS Stylesheet that meets most of my requirements. You can add CSS Classes to these stylesheets if there are things you have to do that don't exist in the generic stylesheet syntax.

For Portals and Pages, you'll have to use a CSS theme. I usually take the generic theme, create a copy of it and start modifying only those pieces that need to be changed. These themes are usually installed under IBFS:/WFC/Global/Themes/ where you'll find Standard and Custom css files. Make sure to back up the existing theme before you start modifying the code.


WebFOCUS 8206, Unix, Windows
 
Posts: 1853 | Location: New York City | Registered: December 30, 2015Report This Post
Platinum Member
posted Hide Post
Thanks for the reply BabaNYC. Can you please give me an example of how you can add CSS classes to WebFOCUS stylesheets? Or a reference to a webpage with this information would do too.


WebFOCUS 8201, SP 0.1, Windows 7, HTML
 
Posts: 190 | Registered: May 19, 2017Report This Post
Virtuoso
posted Hide Post
Go to this page and search for Formatting a Report With an External Cascading Style Sheet

https://infocenter.information...ource%2Ftopic161.htm

A simple example of using CLASS= in this way:
TABLE FILE CAR
HEADING
"Total Retail: <TOT.RCOST "
"Average Retail: <AVE.RCOST"

ON TABLE SET PAGE-NUM NOLEAD
ON TABLE SET ASNAMES ON
ON TABLE NOTOTAL
ON TABLE PCHOLD FORMAT HTML
ON TABLE SET HTMLEMBEDIMG ON
ON TABLE SET HTMLCSS ON
ON TABLE SET STYLE *

	 TYPE=REPORT, CSSURL=IBFS:/WFC/Repository/sandbox/marquees.css, $

TYPE=HEADING, CLASS=marquee  , $
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
$
ENDSTYLE
END
  

Where I've placed the css code that creates a marquee.css effect in a file in my repository that has the following code:
  
@keyframes marquee {
    0%   { text-indent: 430px }
    100% { text-indent: -485px }
}

@-webkit-keyframes marquee {
    0%   { text-indent: 430px }
    100% { text-indent: -485px }
}

.marquee {
    overflow: hidden;
    white-space: nowrap;
    font-size: 150%;
    animation: marquee 10s linear infinite;
    -webkit-animation: marquee 10s linear infinite;
}

.marquee:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}



WebFOCUS will run the report using the stylesheet specified but it'll also apply the css code in the marquee.css file to the HEADING of the report.


WebFOCUS 8206, Unix, Windows
 
Posts: 1853 | Location: New York City | Registered: December 30, 2015Report This Post
Platinum Member
posted Hide Post
Thanks BabakNYC... and this approach will work with reports, active reports and charts? I find that active reports are a little tricky with HTMLFORM, but of course you're not using HTMLFORM here.


WebFOCUS 8201, SP 0.1, Windows 7, HTML
 
Posts: 190 | Registered: May 19, 2017Report This Post
Platinum Member
posted Hide Post
One last thing... Where are the STY files that I'm supposed to modify to make changes happen? I'm testing with usa.sty. I found that this file exists in three places on my DEV server. When I modify these files I don't see the changes when I run reports using that stylesheet. Am I supposed to clear the cache or something?

EDIT: I thought I had that figured out btw... I was making changes to STY files a couple of weeks ago, and I think I'm doing the same thing now, but for whatever reason, my changes are not being reflected.


WebFOCUS 8201, SP 0.1, Windows 7, HTML
 
Posts: 190 | Registered: May 19, 2017Report This Post
Virtuoso
posted Hide Post
Stylesheets you modify, should really be placed in a folder in the Domain so they're a part of any Change Management Package you create.

According to the Doc:
Can I use CSS to format reports generated as PDF, PostScript, or Excel 2000?

No, you can only use external cascading style sheets to format reports that are generated as HTML.

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


WebFOCUS 8206, Unix, Windows
 
Posts: 1853 | Location: New York City | Registered: December 30, 2015Report This Post
Platinum Member
posted Hide Post
Perfect... of course!

Thank you!


WebFOCUS 8201, SP 0.1, Windows 7, HTML
 
Posts: 190 | Registered: May 19, 2017Report This Post
Platinum Member
posted Hide Post
Hey BabakNYC... I tried your solution. It worked, but only for HTML reports. It doesn't play nice with Active (AHTML) reports. Any workarounds for that?

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


WebFOCUS 8201, SP 0.1, Windows 7, HTML
 
Posts: 190 | Registered: May 19, 2017Report This Post
Platinum Member
posted Hide Post
So I'm getting along with changing all the styling. There is alot more work than I thought because the procedures, portals, and html canvas files all use styling that is different.

Anyhow, I'm trying to conditionally style htm files. Like if a user would like to see their stuff in a dark theme, where do i put the conditional bit so that the htm page uses one css instead of another. I hope that's clear.

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


WebFOCUS 8201, SP 0.1, Windows 7, HTML
 
Posts: 190 | Registered: May 19, 2017Report This Post
Virtuoso
posted Hide Post
The easiest way, if I understand properly your request, is to simply use DM and branch to proper block of code that includes the different css and/or style based on a user selection variable
Using Babak sample

TABLE FILE CAR
HEADING
"Total Retail: <TOT.RCOST "
"Average Retail: <AVE.RCOST"

ON TABLE SET PAGE-NUM NOLEAD
ON TABLE SET ASNAMES ON
ON TABLE NOTOTAL
ON TABLE PCHOLD FORMAT HTML
ON TABLE SET HTMLEMBEDIMG ON
ON TABLE SET HTMLCSS ON
ON TABLE SET STYLE *

-IF &USERSELECT EQ 'WARM' THEN GOTO WARMSTYL;
-IF &USERSELECT EQ 'HOT'  THEN GOTO HOTSTYL;

-WARMSTYL
TYPE=REPORT, CSSURL=IBFS:/WFC/Repository/sandbox/marquees.css, $
TYPE=HEADING, CLASS=marquee, $
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
-GOTO STYLEND

-HOTSTYL
TYPE=REPORT, CSSURL=IBFS:/WFC/Repository/sandbox/hotmarquees.css, $
TYPE=HEADING, CLASS=marquee, $
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Hot.sty,$
-GOTO STYLEND

-STYLEND
ENDSTYLE
END


WF versions : Prod 8.2.04M gen 33, Dev 8.2.04M gen 33, OS : Windows, DB : MSSQL, Outputs : HTML, Excel, PDF
In Focus since 2007
 
Posts: 2409 | Location: Montreal Area, Qc, CA | Registered: September 25, 2013Report This Post
Platinum Member
posted Hide Post
Thanks for the reply, but that's not what I was looking for. I'm talking about an htm file generated by the HTML canvas. Like that uses a CSS file, but I'm unclear on how to switch CSS based on user input.

Anyhow... don't worry about this too much. I am working with IBI to get this bit done. Thank you!


WebFOCUS 8201, SP 0.1, Windows 7, HTML
 
Posts: 190 | Registered: May 19, 2017Report This Post
Expert
posted Hide Post
Please post the final solution so we all know what's going on.
Thanks, Doug
 
Posts: 3132 | Location: Tennessee, Nashville area | Registered: February 23, 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] Styling in WebFOCUS

Copyright © 1996-2020 Information Builders