How do I use CSS in Report Designer?

[dvilchez]

Hello.

I have this value in the Master Report's Attributes tab:

<link type="text/css" rel="stylesheet" href="style.css" />

style.css is something like this:

.red {
   color: #FF0000;
}

Then I click in an element (a label, for example) and, in the Attributes tab, I change the value of class, wich now is red, but nothing happens.

What are the steps to use a CSS file in a report? Is there any tutorial about that subjet? Is there any good book about using Report Designer?

Thanks for your time.

[pgraju]

Hi dvilchez,

I had a look at what happens when PRD generates a report as HTML and I noticed that every field in a report is wrapped with a <td></td> then <span></span> element, any class or id options you specify for the field is added as a class to the <td></td> element and not the <span></span> element (PRD also links its own style sheet with its own styles). If this sounds confusing preview your report as HTML and then check out the source code it clears up alot of questions!

These are the steps I did to get it working:

1. Add CSS to the Report

Click on the Master Report item under the Structure tab. Under the Attributes tab find the html > append-header option and place your CSS or link tag in there, i.e.:

<style type="text/css">
  .red span { color: red; }
</style>

* It is important that you put span as the child of your class as every field is contained in a span element when you generate the report as HTML.

2. Add Class to the Field

Click on the field which you want to add the class to and click on the Attributes tab and enter the class i.e. red into the html > class option.

Preview the report as HTML and you should see the change. Obviously this can only work when viewing the report in HTML - either way it is still an awesome feature!

I have attached an example prpt report.

[dvilchez]

Thanks for the example, pgraju, it has been so useful!

[bblais]

I'm attempting to change the style of a hyperlink using this method. Using your example, I set the url property of the label to point to http://www.yahoo.com just for an example, and then added the following to the master report's append-header:

<style type="text/css">
.red span { color: red; }
.red span a:hover { color: red; text-decoration: underline; }
</style>

It does not seem to be affecting the style of the hyperlink. I've attached the modified sample as makemeredlink.prpt.

Any thoughts?

Thanks in advance...