Hello all,

I was hoping someone could point me in the right direction so I could learn how to use css to create alternate row colors within the data portion of a webfocus report.

Thanks for the help,
B

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

I find it easier to let WebFocus handle the alternate row colors in the style sheet.

TYPE=DATA, BACKCOLOR=( 'WHITE' RGB(224 255 255) ), $

The line above alternates data rows with white and light cyan backgrounds.

Hope that helps,

Norb

I agree, but I am using a css class with type=data so the line type=data,backcolor=... is ignored.

Do it the old-fashioned way, with a flag or indicator:

TABLE FILE CAR
PRINT
COUNTRY CAR MODEL BODYTYPE

COMPUTE CLASSFLAG/A1 = IF CLASSFLAG EQ '' THEN '2' ELSE ''; NOPRINT

ON TABLE SET PAGE NOLEAD
ON TABLE SET STYLE *
TYPE=REPORT, SQUEEZE=ON, $
TYPE=DATA, CLASS=class2, WHEN= CLASSFLAG EQ '2', $
TYPE=DATA, CLASS=class1, WHEN= CLASSFLAG EQ '', $
ENDSTYLE

ON TABLE HOLD AS H001 FORMAT HTMTABLE
END
-RUN

-HTMLFORM BEGIN
<STYLE>
body { font-family: Arial, sans-serif; font-size: 12px; }
.class1 { background-color: yellow; }
.class2 { background-color: red; }
</STYLE>
!IBI.FIL.H001;
-HTMLFORM END

Thanks Francis,

Can you explain what !IBI.FIL.H001; means?

That's the way you insert the contents of your report (ON TABLE HOLD FORMAT HTMTABLE) into the HTMLFORM: !IBI.FIL.filename

!IBI.FIL.file-name;

drops the HOLD file into a HTMLFORM. How did you create the HOLD file and define the CSS classes?

-HTMLFORM BEGIN
   <style>
     .Indent {
        padding-right: 28px;
    font-size: 8pt;
    font-family: Arial;
     }
   .NoIndent {
    font-size: 8pt;
    font-family: Arial;
 }
 .TotalIndent {
  padding-right: 28px;
    font-size: 8pt;
    font-family: Arial;
  font-weight:bold;
  border-top-style:solid;
  border-top-color:black;
  border-top-width:1px;
 )
   </style>
-HTMLFORM END

then use this line to reference...
ON TABLE SET CSSURL mycss.css

So you're saying I don't have to use that line?

Actually, I think I understand. It looks like you're creating the hold file first then passing that to an html form, where as I'm just embedding css into my focus code and referencing the css classes. Am I correct?

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

Correct.

Awesome, thanks Francis!

How can I learn more about incorporating html/javascript and style sheets into my focus code? Are there any websites/documentation/tutorials you're aware of?

That solution gets tedious (impossible?) once you're dealing with across-columns. I haven't found the correct way to deal with those yet, a suggestion would be appreciated.

In CSS3 you can use the new nth-child selector, eg:

tr:nth-child(odd) > td.data { background-color: yellow; }
tr:nth-child(even) > td.data { background-color: red; }

Unfortunately we use IE6...

quote:

Originally posted by Wep5622:
That solution gets tedious (impossible?) once you're dealing with across-columns. I haven't found the correct way to deal with those yet, a suggestion would be appreciated.

Never mind, I just remembered there's ACROSSCOLUMN=...