Changing Background color in Oracle APEX.

We all get many requirements when it comes to changing the background color or style change in APEX , but we feel handicapped many times especially when  we are accessing the remote server and we donot have rights to change the core css or images of the theme.

We can still do it in apex , using shared components . 

Lets Try to change some background color of my theme .

Now the first question is how do i come to know what is that i actually need to edit . 

Steps:-

1) Create an application with  default theme , currenlty i had choosen as ( Mightnight blue theme which comes as one of the options of the apex themes).

2) Run the application , right click on the page , got to the    VIEW PAGE SOURCE  option .

3)  Try to find the test

  <link rel="style sheet" href="/i/themes/theme_3/css/theme_4_0.css" type="text/css"/> in the source of the page .

4) Click on the link /i/themes/theme_3/css/theme_4_0.css and open it in new tab .ou

5) Now you can view the whole css related to the theme you have choosen .

and soooo onn....

Currently lets try to edit the background color of the theme.

To edit it , there can be two ways , one thru local and another @ server side , the best example i can give is to edit @ shared components level such that we can test this example on oracle apex site.

6) Create an .css file as blackbg.css file .

body { background-color:black; min-width: 980px; max-width: 1920px; margin: 0 0 24px 0; padding: 0; font-family: Arial, Helvetica, Geneva, sans-serif; font-size: 12px; color: #CCC; }

try to change the background color of it , as you wish too . here i opted for black .

7) Upload this file to the application shared components , while uploading it , you can choose the application level or the workspace level upload.

Workspace upload can be used for multiple application , where as the application upload will be specific to the application for which it has been uploaded .

8) Now next step is to make a reference to this css using

<link rel="stylesheet" href="#WORKSPACE_IMAGES#blackbg.css" type="text/css">

one shud make sure that we are including this link only after the 

<link rel="style sheet" href="/i/themes/theme_3/css/theme_4_0.css" type="text/css" />

Else this last link will override your css and gives the same background o/p as that was previous .

9) Now run the application .

Troubles faced during this :-

1) i had uploaded the file and again when i changed the color directly in the shared components and saved , then run the application the changes were not reflected @ all.

Then i had deleted the file completely and uploaded the chnaged file from the system itself.

Now this was running perfectly.

2) I uploaded the changed file but though the page source was showing the old css uploaded , i had deleted all the files which i had upload but the old version of the css link was still accessible on from my page source view .

Need to check the root cause of this and get back on this .