This discussion is archived
7 Replies Latest reply: Feb 22, 2013 12:31 AM by fac586 RSS

APEX referencing custom css file

960543 Newbie
Currently Being Moderated
APEX 4.0.2

I am having difficulty finding the reason my custom css file is not working properly.

I have this with in <head> on the default page template used in my app.
<link rel="stylesheet" href="#WORKSPACE_IMAGES#revrec1.css" type="text/css" />

revrec1 is a simple css file...
specialtitle1 {color:#CC0000;font-size:14pt;}

I have this line in my new region, but the Title is not changing color or size.
<div class="specialtitle1">#TITLE#</div>

Our hardware was recently changed out. When they reloaded the APEX environment on our new hardware they did not load the images, css, or custom page/region templates. So I had to recreate them and I am 99.9% sure I have recreated it to the way it was before the move, but it is not working (it was working before the move). Any helpful ideas of what to try would be greatly appreciated.
  • 1. Re: APEX referencing custom css file
    fac586 Guru
    Currently Being Moderated
    Joel Pritchett wrote:
    APEX 4.0.2

    I am having difficulty finding the reason my custom css file is not working properly.

    I have this with in <head> on the default page template used in my app.
    Always post code using <tt>\
    ...\
    </tt> tags as described in the FAQ.
    <link rel="stylesheet" href="#WORKSPACE_IMAGES#revrec1.css" type="text/css" />
    revrec1 is a simple css file...
    specialtitle1 {color:#CC0000;font-size:14pt;}
    I have this line in my new region, but the Title is not changing color or size.
    <div class="specialtitle1">#TITLE#</div>
    Our hardware was recently changed out. When they reloaded the APEX environment on our new hardware they did not load the images, css, or custom page/region templates. So I had to recreate them and I am 99.9% sure I have recreated it to the way it was before the move, but it is not working (it was working before the move). Any helpful ideas of what to try would be greatly appreciated.
    The problem is the selector in the recreated CSS style sheet. This is intended to be a class selector to apply the rule to elements with <tt>class="specialtitle1"</tt> attributes, however the selector is missing the period (".") prefix of a class selector. The rule should be:
    .specialtitle1 {color:#CC0000;font-size:14pt;}
  • 2. Re: APEX referencing custom css file
    960543 Newbie
    Currently Being Moderated
    I thought that was the issue before, and I did change that and it still isn't working. I am not sure if I just need to wait for the server to update, or if the change should be immediate.
  • 3. Re: APEX referencing custom css file
    960543 Newbie
    Currently Being Moderated
    I used Firebug and checked the css, and it is not appearing on that tab. Also when I debug the page I get this error...

    "NetworkError: 404 Not Found - https://rev-rec-cappad.oraclecorp.com/i/css/none"

    So I am not sure if this error is showing the root cause, or if this is something separate.
  • 4. Re: APEX referencing custom css file
    fac586 Guru
    Currently Being Moderated
    Joel Pritchett wrote:
    I used Firebug and checked the css, and it is not appearing on that tab. Also when I debug the page I get this error...

    "NetworkError: 404 Not Found - https://rev-rec-cappad.oraclecorp.com/i/css/none"

    So I am not sure if this error is showing the root cause, or if this is something separate.
    Appears to be something separate as that does not relate to a CSS file located at <tt>#WORKSPACE_IMAGES#revrec1.css</tt>.

    Suggest you reproduce the issue on apex.oracle.com.
  • 5. Re: APEX referencing custom css file
    960543 Newbie
    Currently Being Moderated
    I did as you suggested. I added the css and changed a page temple and then a region to the same settings I have on this app to an app on apex.oracle.com.

    It works on apex.oracle.com.

    Would this mean the reason it is not working on my other server is that I need the server to refresh so it can use the css? Or is there some other setting for an APEX instance to allow uploaded css files?
  • 6. Re: APEX referencing custom css file
    960543 Newbie
    Currently Being Moderated
    So not sure why, but I had to add the tags below to make it work.
    <specialtitle1>#TITLE#</specialtitle1>
  • 7. Re: APEX referencing custom css file
    fac586 Guru
    Currently Being Moderated
    Joel Pritchett wrote:
    So not sure why, but I had to add the tags below to make it work.
    <specialtitle1>#TITLE#</specialtitle1>
    This indicates that the change to the CSS file is not being seen by your browser. The original <tt>specialtitle1</tt> selector without the "." would act as an element selector, applying styling to <tt>&lt;specialtitle1&gt;...&lt;/specialtitle1&gt;</tt> elements. It didn't work originally as there were no such elements in your page. You've now created one, and you're seeing the effects of the original CSS file.

    However, HTML is not XML and you can't just invent your own elements. These creations won't work properly in all user agents. Change it back to
    <div class="specialtitle1">#TITLE#</div>
    and figure out why the new CSS is not working.

    Either the change to the CSS file in APEX on your server was not properly applied, or the old file is cached somewhere in your environment and is being picked up by your browser.

    Check the CSS file in APEX contains
    .specialtitle1 {color:#CC0000;font-size:14pt;}
    Perform a force refresh of the page in your browser using the appropriate menu option/keyboard shortcut (e.g. Cmd-R or Ctrl-R).

    Inspect and open the <tt>revrec1.css</tt> CSS file in Firebug to see the contents. If the new version of the file is shown in APEX, and the old version in the browser, then you need to talk to whoever is responsible for your browser/proxy/web cache set-up to understand how it's configured and what effect it's having on your app.

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points