Skip to Main Content

APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

CSS Override Issue Inline vs File - APEX 21.2

McRiversDec 6 2021 — edited Dec 6 2021

I am working on overriding the default style of the login page for our applications. I have it working as expected if I put the following CSS into the `CSS Inline` section of the `Login Page`:

/* Override Oracle's Universal Theme CSS Variables */
:root {
 --ut-body-text-color: rgb(249, 249, 249, .7);
 --ut-login-region-background-color: rgb(0, 0, 0, .4);
 --ut-login-logo-size: 200px;
}

/* Customize Login Logo */
span.t-Login-logo {
  background-image: url(#WORKSPACE_FILES#imgs/login-logo.png);
  background-size: cover;
  background-color: transparent;
}

/* Customize Login Background */
body.t-PageBody--login {
 background-image: url(#WORKSPACE_FILES#imgs/login-background.jpg);
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
}

When I moved this code into a file, uploaded it into the `Workspace Files Shared Objects`, and used the given reference url in the `CSS File Urls` section - then the CSS doesn't work as expected anymore.

I know I'm probably overlooking something quite silly, but I cannot figure out what I'm doing wrong. Is it the specificity of the CSS now that it is no longer inline? Or is there a different way I need to reference the `#WORKSPACE_FILES#` when inside the css file? 

***Ignore the non-matching image file names below...that was me not doing a good job with screenshots assume there is a `login-logo.png` and `login-background.jpg` file and they are referenced correctly in CSS***
***...and yes, I removed the inline CSS before testing the file CSS. I just put both in for the screenshot***
css_inline_vs_file.jpg

This post has been answered by fac586 on Dec 6 2021
Jump to Answer
Comments
Post Details
Added on Dec 6 2021
5 comments
1,238 views