Applying style sheets (.CSS) to the reports

[dipesh_mistry]

Hi All,
I want to apply the .css style sheets for the reports.
Is there any way to do this?

Thanx in Advance :-)

Regards,
dipsy

[COGNOiSe administrator]

If the built-in styles, or local styles based on templates are insufficient, you can always use HTMLItem and specify style in line.

Code Select Expand


<report xmlns="http://developer.cognos.com/schemas/report/3.0/" expressionLocale="en-us"><!--RS:8.2-->
<modelPath>/content/package[@name='GO Sales and Retailers']/model[@name='model']</modelPath>
<queries>
<query name="Query1">
<source>
<model/>
</source>
<selection><dataItem name="Product line" aggregate="none"><expression>[gosales_goretailers].[Products].[Product line]</expression></dataItem><dataItem name="Product name" aggregate="none"><expression>[gosales_goretailers].[Products].[Product name]</expression></dataItem><dataItem name="Quantity" aggregate="total"><expression>[gosales_goretailers].[Orders].[Quantity]</expression></dataItem></selection>
</query>
</queries>
<layouts>
<layout>
<reportPages>
<page class="pg" name="Page1">
<pageBody class="pb">
<contents>
<list class="ls" refQuery="Query1">



<style>
<CSS value="border-collapse:collapse"/>
</style>
<listColumns><listColumn><listColumnTitle class="lt"><contents><textItem><dataSource><dataItemLabel refDataItem="Product line"/></dataSource></textItem></contents></listColumnTitle><listColumnBody class="lc"><contents><textItem><dataSource><dataItemValue refDataItem="Product line"/></dataSource></textItem></contents><listColumnRowSpan refDataItem="Product line"/></listColumnBody></listColumn><listColumn><listColumnTitle class="lt"><contents><textItem><dataSource><dataItemLabel refDataItem="Product name"/></dataSource></textItem></contents></listColumnTitle><listColumnBody class="lc"><contents><textItem><dataSource><dataItemValue refDataItem="Product name"/></dataSource></textItem></contents></listColumnBody></listColumn><listColumn><listColumnTitle class="lt"><contents><textItem><dataSource><dataItemLabel refDataItem="Quantity"/></dataSource></textItem></contents></listColumnTitle><listColumnBody class="lm"><contents><textItem><dataSource><dataItemValue refDataItem="Quantity"/></dataSource></textItem></contents></listColumnBody></listColumn></listColumns><listGroups><listGroup refDataItem="Product line"/></listGroups></list>
</contents>
</pageBody>
<pageHeader class="ph">
<contents>
<block class="ta">
<contents>
<HTMLItem>
<dataSource>
<staticValue>&lt;STYLE&gt;
TABLE.ls {background-color:#990000;}
&lt;/STYLE&gt;</staticValue>
</dataSource>
</HTMLItem>
<textItem class="tt">
<dataSource>
<staticValue/>
</dataSource>
</textItem>
</contents>
</block>
</contents>
<style>
<CSS value="padding-bottom:10px"/>
</style>
</pageHeader>
<pageFooter class="pf">
<contents>
<table class="tb">
<tableRows>
<tableRow>
<tableCells>
<tableCell>
<contents>
<textItem>
<dataSource>
<reportExpression>AsOfDate()</reportExpression>
</dataSource>
</textItem>
</contents>
<style>
<CSS value="vertical-align:top;text-align:left;width:25%"/>
</style>
</tableCell>
<tableCell>
<contents>
<textItem>
<dataSource>
<staticValue>- </staticValue>
</dataSource>
</textItem>
<textItem>
<dataSource>
<reportExpression>PageNumber()</reportExpression>
</dataSource>
</textItem>
<textItem>
<dataSource>
<staticValue> -</staticValue>
</dataSource>
</textItem>
</contents>
<style>
<CSS value="vertical-align:top;text-align:center;width:50%"/>
</style>
</tableCell>
<tableCell>
<contents>
<textItem>
<dataSource>
<reportExpression>AsOfTime()</reportExpression>
</dataSource>
</textItem>
</contents>
<style>
<CSS value="vertical-align:top;text-align:right;width:25%"/>
</style>
</tableCell>
</tableCells>
</tableRow>
</tableRows>
<style>
<CSS value="border-collapse:collapse;width:100%"/>
</style>
</table>
</contents>
<style>
<CSS value="padding-top:10px"/>
</style>
</pageFooter>
</page>
</reportPages>
</layout>
</layouts>
</report>


[larsonr]

You can call css using an HTML method to use the import tags for standard css    <link href="url" rel="stylesheet" type="text/css">,  place this HTML item in the header of the report.

The other option is to define your own styles and append them to the global style sheet within the cognos environment.  Then you can use these in any report without having to do the css inclusion on every report.  You would then just need to change object class to match the 2 letter code of your newly defined styles in the global style sheet.  These object classes (usually the last row on the left hand side of report studio) are merely to style your lists, cross tabs, etc....

I believe Cognos Support has a few articles on how to use this last method and it is supported to the best of my knowledge.  We are using it to create some DHTML effects with CSS and javascript.

[MDXpressor]

The previous responses deal with making global changes to the entire C8 environment, but they don't work as a 1-off for individual reports.  In C8 css are refered to as 'Classes' in Report Studio.  When you mouse over the Page Explorer, the Fly Out menu will provide you with 3 groups:  Report Pages, Prompt Pages, and Classes.  If the css that you are going to apply is not meant to be global to the entire C8 environment, then use the classes functionality.

[COGNOiSe administrator]

My solution was report specific ... The inline HTML STYLE element takes care of 1-offs.

[christopher_gaal]

Quick question... the Sep-8 11:46 response is report specific but only to 'additive' style elements that would be ordinarily in the GlobalReportStyles.css. Because you dont want to change that 'global' style sheet, for a report specific difference in visual layout.

My question is that how should this solution be modified if we essentailly want to re-map the existing styles (default that appear in the Class Explorer) by report only. Your in-line example showed adding a new class element, changing the table's background color

<STYLE>
TABLE.ls {background-color:#990000;}
</STYLE>

Are there an inherent order to these? What if in the Global style sheet TABLE.ls is also defined? Which background takes precedence?

Because when I run this, there are several .CSS references at the top of the HTML source:

<link rel="stylesheet" type="text/css" href="../skins/corporate/portal/default.css">
<link rel="stylesheet" type="text/css" href="../skins/corporate/portal/default.css">
<link rel="stylesheet" type="text/css" href="../skins/corporate/qs/RVReport.css">
<link rel="stylesheet" type="text/css" href="../skins/corporate/qs/QSRVCommonUI.css">
<link rel="stylesheet" type="text/css" href="../skins/corporate/qs/QSRVSelection.css">
<link rel="stylesheet" type="text/css" href="../skins/corporate/qs/CRN.css">
<link href="../skins/corporate/prompting/promptCommon.css" type="text/css" rel="stylesheet">

but with the specific TABLE.ls modification appears near the end, and thus modifies the background to red from the default of white/none.

SO I GUESS THIS IS A CONFIRMATION THAT ANY HTML ITEMS PLACED INTO THE DESIGN PALETTE, WILL APPEAR LATER IN THE HTML CODE, AND THUS OVERRIDE ANY SAME STYLES COMING IN FROM THE CSS FILES REFERENCED AT THE TOP OF THE CODE, RIGHT?

[COGNOiSe administrator]

That would by my guess. The way CSS works is, every later definition is supposed to override previous ones. However, support for that might vary by browser. Google CSS Zen Garden.