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,

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.

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.

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.

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.

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.

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,

Perfect... of course!

Thank you!

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,

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,

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

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!

Please post the final solution so we all know what's going on.
Thanks, Doug