Overriding IR Reports CSS
755501Jan 24 2013 — edited Jan 24 2013I am trying to adjust the font/color of my Headings and Data on Interactive Reports. I am on apex_4.2.
I went into my page template (shared componenets - templates) and in the Definition section after the #HEAD# I added my CSS override info (see below). it doesn't seem to be reading this on my IR Reports. Am I missing something?
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6 no-css3" lang="&BROWSER_LANGUAGE."> <![endif]-->
<!--[if IE 7 ]> <html class="ie7 no-css3" lang="&BROWSER_LANGUAGE."> <![endif]-->
<!--[if IE 8 ]> <html class="ie8 no-css3" lang="&BROWSER_LANGUAGE."> <![endif]-->
<!--[if IE 9 ]> <html class="ie9" lang="&BROWSER_LANGUAGE."> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="&BROWSER_LANGUAGE."> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>#TITLE#</title>
<link rel="icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
#APEX_CSS#
#TEMPLATE_CSS#
#THEME_CSS#
#PAGE_CSS#
#APEX_JAVASCRIPT#
#TEMPLATE_JAVASCRIPT#
#APPLICATION_JAVASCRIPT#
#PAGE_JAVASCRIPT#
#HEAD#
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_24/css/4_1.css">
<script src="#IMAGE_PREFIX#themes/theme_24/js/4_1.js"></script>
<STYLE TYPE="text/css">
/*
********** Interactive Reports Override ************
*/
.apexir_WORKSHEET_DATA {
border:1px solid #b8b8b8;
border-collapse:separate;
empty-cells:show;
font-size:8pt;
}
table.apexir_WORKSHEET_DATA th {
background:#4e4e4e;
font-weight:bold;
color:#fff;
border-top:1px #ccc solid;
border-bottom:1px #aaa solid;
font-size:21px !important;
white-space:nowrap;
vertical-align:center;
letter-spacing:1;
height:25px;
background-image:url(report/report-header-red.gif);
background-repeat:repeat-x;
padding-right: 5px;
}
table.apexir_WORKSHEET_DATA td {
background: #e2e2e2;
font:normal 8pt Tahoma;
padding:2px 5px;
empty-cells:show!important;
border-bottom:1px solid #b8b8b8;
border-top:1px solid #fff;
}
</style>
</head>
<body #ONLOAD#>
<!--[if lte IE 6]><div id="outdated-browser">#OUTDATED_BROWSER#</div><![endif]-->
#FORM_OPEN#
<div id="uBodyContainer">