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 issue with HTMLCSS

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SOLVED] Styling issue with HTMLCSS
 Login/Join
 
Virtuoso
posted
We have a report style that specifies bold text for pretty much everything on the page, except for the FOOTING. It seems though, that the generated CSS properties don't take that into account properly for some reason. This looks like a bug in the generated style data.

For example, we have:
	UNITS=CM,
	PAGESIZE='SCREEN',
	SQUEEZE=ON,
	ORIENTATION=LANDSCAPE,
	BACKCOLOR=RGB(221 221 221),
	PAGECOLOR=RGB(221 221 221),
	STYLE=BOLD,
$ General page styles
TYPE=REPORT,
	GRID=OFF,
	COLOR='black',
	FONT='Arial',
	STYLE=BOLD,
	SIZE=10,
$ General report styles
TYPE=DATA,
	BACKCOLOR=( RGB(221 221 221) RGB(231 231 231) ),
$ Alternate colours
TYPE=TABHEADING,	LINE=1,
	SIZE=8,
	STYLE=NORMAL,
	JUSTIFY=RIGHT,
$ First row of table headings
TYPE=TABFOOTING,	SIZE=12,$ Table footing
TYPE=HEADING,		JUSTIFY=CENTER,$ Page heading
TYPE=FOOTING,
	SIZE=9,
	STYLE=NORMAL,
$ Page footing
TYPE=SUBTOTAL,		BACKCOLOR=RGB(210 210 210),$
TYPE=ACROSSVALUE,	SIZE=9,$
TYPE=GRANDTOTAL,	BACKCOLOR=RGB(210 210 210),$


In the HTML page the generated styles are, among others:
BODY { background-color:#DDDDDD }
TD { vertical-align:top; padding-left:6pt; padding-right:6pt; }
TABLE,PRE,SPAN { font-family:ARIAL; font-size:10pt; font-weight:bold; color:#000000; background-color:#DDDDDD; }
.x2_0 { font-family:ARIAL; font-size:10pt; font-weight:bold; color:#000000; background-color:#DDDDDD; }
.x2_1 { font-family:ARIAL; font-size:10pt; font-weight:bold; color:#000000; background-color:#E7E7E7; }
// (...left some out here)

// This is the style used in the FOOTING
.x9 { font-family:ARIAL; font-size:9pt; color:#000000; background-color:#DDDDDD; }

// (...rest isn't relevant)


As you can see, the style for the FOOTING omits setting "font-weight: normal;", and thus we get a bold font there!

Additionally, I think it would be beneficial to assign place-holder classes to standard report structures (HEADING, FOOTING, DATA, etc) to make them easier to reference from CSS. In case you didn't know, you can assign multiple class definitions to a tag by separating them with a space character.
For example, in my case it would have been convenient to have a FOOTING with 'class="x9 WF-footing"' so that I could have put
.WF-footing { font-weight: normal important!; }
in my site-wide style-sheet.

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


WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010
: Member of User Group Benelux :
 
Posts: 1669 | Location: Enschede, Netherlands | Registered: August 12, 2010Report This Post
Virtuoso
posted Hide Post
Forgot to mention... We apply this style by:
ON TABLE PCHOLD FORMAT HTML
ON TABLE SET HTMLCSS ON
ON TABLE SET CSSURL 'http://company-server/approot/General/company.css'
ON TABLE SET STYLE *
     INCLUDE = company,
$


The css-file included there contains no styles that would cause text to be bold, so that's not where the bold FOOTING text originates from.
Firebug says the bold style originates from WFServlet too, I can disable that style from there and see the footer as it should be, but that's only a very temporary solution of course - we can't expect people to watch our pages using Firebug and disable certain styles by hand Wink


WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010
: Member of User Group Benelux :
 
Posts: 1669 | Location: Enschede, Netherlands | Registered: August 12, 2010Report This Post
Master
posted Hide Post
Shouldn't that be:

TYPE=FOOTING,
SIZE=9,
STYLE=-BOLD,
$
??


_____________________
WF: 8.0.0.9 > going 8.2.0.5
 
Posts: 668 | Location: Veghel, The Netherlands | Registered: February 16, 2010Report This Post
Virtuoso
posted Hide Post
No it should not, in this case that does not make any difference.

What does make a difference:
TABLE FILE CAR
PRINT CAR MODEL SEATS
BY COUNTRY
HEADING
"Page header"
FOOTING
"Page bottom"
ON TABLE SET HTMLCSS ON
ON TABLE SET PAGE OFF
ON TABLE SET STYLE *
UNITS=CM, PAGESIZE='SCREEN', SQUEEZE=ON, ORIENTATION=LANDSCAPE,
      BACKCOLOR=RGB(221 221 221), PAGECOLOR=RGB(221 221 221), $ General page styles
TYPE =DATA, GRID=OFF, COLOR='black', BACKCOLOR=( RGB(221 221 221) RGB(231 231 231) ),
      FONT='Arial', STYLE=BOLD, SIZE=10, $ General report styles
TYPE =TITLE, COLOR='black',BACKCOLOR=RGB(221 221 221),
      FONT='Arial', STYLE=BOLD, SIZE=10, $ Title style
TYPE =TABHEADING, LINE=1, SIZE=8, STYLE=NORMAL, JUSTIFY=RIGHT,$ First row of table headings
TYPE =TABFOOTING,  SIZE=12, STYLE=NORMAL,$ Table footing
TYPE =HEADING,     JUSTIFY=CENTER, STYLE=NORMAL,$ Page heading
TYPE =FOOTING,     SIZE=10, STYLE=NORMAL, $ Page footing
TYPE =SUBTOTAL,    BACKCOLOR=RGB(210 210 210), $
TYPE =ACROSSVALUE, SIZE=9, $
TYPE =GRANDTOTAL,  BACKCOLOR=RGB(210 210 210), $
ENDSTYLE
END

The big difference being that the specification for the entire report has been removed from the general styling part, and that the TYPE=REPORT has been changed to TYPE=DATA. Now heading and footing do appear as specified.


GamP

- Using AS 8.2.01 on Windows 10 - IE11.
in Focus since 1988
 
Posts: 1961 | Location: Netherlands | Registered: September 25, 2007Report This Post
Virtuoso
posted Hide Post
Oh, forgot to mention. I also added specific styling for the titles.


GamP

- Using AS 8.2.01 on Windows 10 - IE11.
in Focus since 1988
 
Posts: 1961 | Location: Netherlands | Registered: September 25, 2007Report This Post
Expert
posted Hide Post
I suggest this is a bug with HTMLCSS=ON.

SET LINES =10
TABLE FILE CAR
PRINT *
HEADING
"WEBFOCUS REPORT"
FOOTING
"THIS IS THE FOOTING"
ON TABLE SET PAGE NOLEAD
ON TABLE SET HTMLCSS ON
ON TABLE SET STYLE *
TYPE=REPORT, FONT='ARIAL', SIZE=8, STYLE=BOLD, $
TYPE=HEADING, STYLE=NORMAL, COLOR=BLUE, $
TYPE=FOOTING, STYLE=NORMAL, COLOR=RED, $
TYPE=DATA, STYLE=NORMAL, COLOR=GREEN, $
ENDSTYLE
END

Comment "ON TABLE SET HTMLCSS ON" - Normal works.
Uncomment - everything is bold.


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
I agree with Francis, the CSS created should add a weighting specifying that it is not bold. This is missing, and therefore takes the weight from the table.

You could use GamP suggestion or perhaps add a class name to the footing from your css file.


Waz...

Prod:WebFOCUS 7.6.10/8.1.04Upgrade:WebFOCUS 8.2.07OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

 
Posts: 6347 | Location: 33°49'23.0"S, 151°11'41.0"E | Registered: October 31, 2006Report This Post
Virtuoso
posted Hide Post
quote:
Originally posted by Waz:
You could use GamP suggestion or perhaps add a class name to the footing from your css file.


I'd prefer to go with the latter, but there doesn't appear to be any specific class generated by WebFOCUS to apply my style to - it's just generically named 'x9' or something, which may well prove to be in use for a different element on a different report...

Is there some way to force a CSS-class on specific parts of a report?

If not, I suppose I'll have no choice but to go with GamP's suggestion.


WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010
: Member of User Group Benelux :
 
Posts: 1669 | Location: Enschede, Netherlands | Registered: August 12, 2010Report This Post
Expert
posted Hide Post
Yes, there is -

TYPE=FOOTING, SIZE=9, STYLE=NORMAL, CLASS=[your css class], $ Page footing

T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004Report This Post
Virtuoso
posted Hide Post
quote:
Originally posted by Tony A:
Yes, there is -

TYPE=FOOTING, SIZE=9, STYLE=NORMAL, CLASS=[your css class], $ Page footing

T


Awesome, thanks!

EDIT: Ehrm... except that it doesn't seem to do anything? I expected extra class attribute-values in my HTML after adding these, but they're still the old classes ('x8', 'x9', etc). I added a CLASS='WFfooting' line to my included style file, but it doesn't appear in my page source.

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


WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010
: Member of User Group Benelux :
 
Posts: 1669 | Location: Enschede, Netherlands | Registered: August 12, 2010Report This Post
Expert
posted Hide Post
Never mix HTMLCSS=ON and CLASS= in your WebFOCUS style-sheet.

My preference is to not use HTMLCSS at all, create your own CSS stylesheet and apply your own CSS classes to report components - you are in control.


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
Virtuoso
posted Hide Post
quote:
Originally posted by Francis Mariani:
Never mix HTMLCSS=ON and CLASS= in your WebFOCUS style-sheet.

My preference is to not use HTMLCSS at all, create your own CSS stylesheet and apply your own CSS classes to report components - you are in control.


That may be true, but in that case the styling of very little remains available to your style-sheet; Most of the styling gets hardcoded in the generated HTML tags. That approach isn't very flexible.

I verified that this does indeed fix the problem I mentioned though, but it also causes new styling problems that I didn't have before - the standard report-font being way too big, for example. The footers being bold at times is less of a problem, I'll stick with that.

WebFOCUS is missing a feature here I think, it should simply combine the styles from both styling-sources into a single class definition like so:
class="&GENERATED_CLASS_NAME &USER_DEFINED_CLASSNAME"


Where &GENERATED_CLASS_NAME is what's generated from the table definitions (with HTMLCSS=ON) and &USER_DEFINED_CLASSNAME is the CLASS= attribute defined on specific STYLING elements.
The resulting class-definition is a space-delimited list of classes to use as the class-attribute value for the appropriate tags - that should be a fairly simple feature to add. It doesn't appear to be possible with the current version of WebFOCUS though - a shame.

That said, this doesn't solve the fact that different layout is generated depending on the setting of HTMLCSS on a table, there are apparently some bugs left to fix there... If it were up to me I'd deprecate HTMLCSS=OFF fast.

Are the WebFOCUS people perchance working on a modernized version (7? 8?) of WebFOCUS? That would be a really great idea IMHO.


WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010
: Member of User Group Benelux :
 
Posts: 1669 | Location: Enschede, Netherlands | Registered: August 12, 2010Report This Post
Expert
posted Hide Post
"That may be true, but in that case the styling of very little remains available to your style-sheet; Most of the styling gets hardcoded in the generated HTML tags. That approach isn't very flexible." - I beg to differ. CSS is intrinsically flexible, you just have to know how to use it.

You say "the standard report-font being way too big, for example" - all you have to do is add CSS styling to control the body font size. "The footers being bold at times is less of a problem" - easily controlled with CSS. "it should simply combine the styles from both styling-sources into a single class definition" - that just doesn't make sense. "different layout is generated depending on the setting of HTMLCSS on a table, there are apparently some bugs left to fix there" - no general bug here, just the particular one you found with SUBFOOTs.

I think you've really missed the point of creating your own CSS stylesheet.


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
Virtuoso
posted Hide Post
quote:
Originally posted by Francis Mariani:
"That may be true, but in that case the styling of very little remains available to your style-sheet; Most of the styling gets hardcoded in the generated HTML tags. That approach isn't very flexible." - I beg to differ. CSS is intrinsically flexible, you just have to know how to use it.


Well, it is possible, but hardly convenient. You'd have to override the styling (that gets inserted by WebFOCUS by using font-tags and bgcolor attributes and the like) with !important flags in your CSS and you'd lose the ability for people to override the company-wide styling where necessary because you have to force your styles already in CSS.

quote:
"it should simply combine the styles from both styling-sources into a single class definition" - that just doesn't make sense.


It does, but maybe you're not aware of the feature I'm referring to - many people seem to overlook this rather powerful feature of CSS. It's a bit hard to explain without using HTML-tags, maybe I just wasn't clear enough before.

To expand a bit:
You can apply multiple CSS-classes to an element with a single class-attribute, for example: class="x9 WFfooter" applies both the 'x9' style and the 'WFfooter' style to the element it's defined on. Your style-sheet could for example contain:
.x9 {
    font-weight: bold;
}

.WFfooter {
    color: red;
}


You don't need to explain CSS to me, I've been a web-developer for the past 10 years. I've been lecturing people (web-designers among them) on how to efficiently use standards-compliant CSS. I know what I'm talking about.

quote:
"different layout is generated depending on the setting of HTMLCSS on a table, there are apparently some bugs left to fix there" - no general bug here, just the particular one you found with SUBFOOTs.


If that were the only styling that changed by just toggling HTMLCSS on or off, I wouldn't be complaining. Instead, the page-wide font changes, cell background colours change half-way through tables, margins and paddings are different, etc. It definitely doesn't render the same way.

Remember, all I did was switch HTMLCSS from ON to OFF. The only difference is that the styling no longer gets applied by class="x1", class="x2", etc-attributes but is now applied the old-fashioned way using font-tags, bgcolor attributes, etc. The CSS style-sheet still gets included, but this was before we learned of the CLASS= property of table styles, so it should apply exactly the same way whether HTMLCSS is on or off.

P.S. The tags and attributes that WebFOCUS uses with HTMLCSS=OFF have been marked 'deprecated' by the W3 Consortium several years ago, hence my calling them old-fashioned. I realise WebFOCUS has a long history, but that isn't really an excuse to cling to old ways of doing things. Of course, backward compatibility is a valid excuse - I don't know when the HTMLCSS property was introduced? Is it as old as Netscape 4?


WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010
: Member of User Group Benelux :
 
Posts: 1669 | Location: Enschede, Netherlands | Registered: August 12, 2010Report This Post
Expert
posted Hide Post
quote:
The tags and attributes that WebFOCUS uses with HTMLCSS=OFF
are only generated when you DO NOT USE CLASS= in your WebFOCUS stylesheet. That is what I'm trying to get across - do not use HTMLCSS and do not use WebFOCUS styling, exclusively use CLASS= in your WebFOCUS stylesheet, referring to your own CSS stylesheet modelled after your company-wide styling.


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
Virtuoso
posted Hide Post
quote:
Originally posted by Francis Mariani:
are only generated when you DO NOT USE CLASS= in your WebFOCUS stylesheet. That is what I'm trying to get across - do not use HTMLCSS and do not use WebFOCUS styling, exclusively use CLASS= in your WebFOCUS stylesheet, referring to your own CSS stylesheet modelled after your company-wide styling.


After some experimenting I'm starting to grasp the full extent of what you were saying there. The current state of CSS support in WebFOCUS is pretty awful apparently.

From my experiments it appears that:
Wether HTMLCSS=ON or OFF, CLASS-attributes in your WebFOCUS stylesheet propagate to your report IF AND ONLY IF you don't define any custom WebFOCUS styles in your report. Some examples would be borders around certain types of cells or alternating row backgrounds. If you do define any custom WebFOCUS styles in your report then the class-attributes get dropped on those sections of your report!

It doesn't matter what HTMLCSS is set to, if it's ON your class-attributes get replaced by a new class defined in the page head, if it's OFF the class attributes get dropped for extra tags and attributes to apply the local styling. The latter goes as far as inserting a table-row with a HR to create a horizontal border...

So, if you want to apply customised styling to some sections of your report AND wish to be able to apply a company-wide style, then you have to define CSS-classes for every exception in your styling AND reference those exceptions as such using CLASS= attributes in your reports! Ouch...

If that's correct then you have effectively rendered branding nigh to impossible and you can't use the report editor for reports anymore once you start using CSS - any change made by it would ravage your styling.

Next to that, because you can't apply the usual WebFOCUS style definitions to your report sections anymore, it's now impossible to use the same report for, for example, PDF output unless you're content with having just your basic styling applied (from a WebFOCUS style-file).


IMHO class-attributes from WebFOCUS style-files should ALWAYS be applied to their respective report sections (on HTML reports only, naturally). That way you get at least your default company-wide styling applied, and you can override those with local styling where that suits your needs.


Another nice-to-have would be if you could define alternating classes the way you can define alternating backcolors, for example:
TYPE=DATA, CLASS=( 'WFdata odd' 'WFdata even' ), $

Unfortunately, if you try the above you get 'class="("' in your HTML...

In fact, that would probably be good to have on other WebFOCUS styles as well, I don't really see why BACKCOLOR is an exception to the rule there. If I'd want my font to be bold every other row, or only want left/right borders on my odd rows, why wouldn't I be able to? I've seen tricks posted to these forums to force that behaviour, but those are hardly elegant, are they?


WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010
: Member of User Group Benelux :
 
Posts: 1669 | Location: Enschede, Netherlands | Registered: August 12, 2010Report This Post
Expert
posted Hide Post
quote:
Another nice-to-have would be if you could define alternating classes the way you can define alternating backcolors, for example:
TYPE=DATA, CLASS=( 'WFdata odd' 'WFdata even' ), $

If you use the correct syntax and also use non spaced names for the classes, you can specify multiple classes for an item. However, it will not alternate as you would wish -

TYPE=DATA, CLASS=WFdata_odd WFdata_even, $

T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004Report This Post
Virtuoso
posted Hide Post
quote:
Originally posted by Tony A:
quote:
Another nice-to-have would be if you could define alternating classes the way you can define alternating backcolors, for example:
TYPE=DATA, CLASS=( 'WFdata odd' 'WFdata even' ), $

If you use the correct syntax and also use non spaced names for the classes, you can specify multiple classes for an item. However, it will not alternate as you would wish -

TYPE=DATA, CLASS=WFdata_odd WFdata_even, $


That's too bad, I think many people would appreciate being able to alternate groups of multiple classes, or other report-style attributes.

The reason that there are spaces in my "class names" is not a syntax error BTW. They are there to specify multiple classes for each alternate row. Odd rows would get 'class="WFdata odd"', specifying the classes 'WFdata' and 'odd' on them, whereas even rows would get 'WFdata' and 'even'. That's the proper way to do this according to the CSS experts.


WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010
: Member of User Group Benelux :
 
Posts: 1669 | Location: Enschede, Netherlands | Registered: August 12, 2010Report 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 issue with HTMLCSS

Copyright © 1996-2020 Information Builders