7 Replies Latest reply: Feb 22, 2013 2:31 AM by fac586 RSS

    APEX referencing custom css file

    Joel Pritchett
      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
          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
            Joel Pritchett
            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
              Joel Pritchett
              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
                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
                  Joel Pritchett
                  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
                    Joel Pritchett
                    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
                      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.