Can anyone tell me what I am missing? I am new to APEX and to CSS. I've searched and searched for answers but nothing turns up. I am having trouble getting my CSS to override a page templates standard CSS.
My Environment:
I am hosting with appshosting.com.
Application Express 4.2.4.00.08
Oracle Database 10g Enterprise Edition Release 10.2.0.4.0 - Prod
Here is what I have done:
1. Uploaded my CSS file into the workspace in Shared Components --> Cascading Stylesheets
2. Copied page template and renamed as my own
3. Assigned my page template to all of my pages
3. Modified the header HTML of my page template, added reference to my stylesheet making sure it followed the standard stylesheet (see code snippet below, my change in red)
#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">
<link rel="stylesheet" href="#WORKSPACE_IMAGES#PDSLight.css" type="text/css">
<script src="#IMAGE_PREFIX#themes/theme_24/js/4_1.js"></script>
</head>
I can see in firebug that APEX is picking up my stylesheet:
<meta content="width=device-width, initial-scale=1.0" name="viewport"><link href="/i/themes/theme_24/css/4_1.css" rel="stylesheet">
<link type="text/css" href="wwv_flow_file_mgr.get_file?p_security_group_id=39384205349726775&p_fname=PDSLight.css" rel="stylesheet">
header#uheader hgroup{ height: 50px; !important } This line reveals when I click the plus button revealing the CSS in my file
</link>
But as I hover over the header, the style it shows that it is using is the standard css:
header#uHeader hgroup { height: 90px; position: relative;
}
Any help would be greatly appreciated.