8 Replies Latest reply: Dec 4, 2013 1:28 AM by vincent_deelen RSS

    Change the background color of theme 24 under a tab

    Ryansun-Oracle

      4.2. 1

       

      theme 24 - cloudy

       

      Hi there,

       

        I have theme 24 where I use the page template, one tab left sidebar and have included the following under the theme css link

      .

      .

      .

      #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#MYCUSTOM.css" type="text/css">

      <style type="text/css">

        body {

          background-color:#000000;

      }

      </style>

        <script src="#IMAGE_PREFIX#themes/theme_24/js/4_1.js"></script>

      </head>

       

       

      As you can see I have a link to my custom CSS and I have also added the background color to black. But the background color of the page does not change. This was working fine sometime back, but for some reason after the environment was down for refresh and came up. The page background color does not take the specified value.

       

      I want to change the background color of the whole page under a tab. Not the region above the tab and is specific to theme 24.

       

      Any advice please?

       

      thanks,

      Ryan

        • 1. Re: Change the bacnground color of theme 24
          vincent_deelen

          Hi  Ryan,

           

          Is your CSS file loaded at all? If not sure you can check in firebug or similar tool. Your file path should be displayed in the HTML header of your page AND your file should show up under the "sources" tab of the debug window.

          If you're sure your CSS file is loaded, then see if your background color does change when you (temporarily!) remove the theme css or the apex css file, see if that has effect. If so, you might want to add "!important" to your background-color attribute.

          Using !important with CSS

           

          Regards,

          Vincent

          • 2. Re: Change the bacnground color of theme 24
            Pars
            div#uBodyContainer {
              background-color:#000000;
            }
            

            place this in page default template>>Cascading Stylesheet>>inline Section

            you get body background color.

             

            Pars.

            • 3. Re: Change the bacnground color of theme 24
              Ryansun-Oracle

              Thanks Pars and Vincent.

               

              I did try the following

               

              div#uBodyContainer {

                background-color:#000000;

              }

               

              under page template of my theme 24 - >One level tabs Left side bar (which is used for my pages) CSS -> Inline view

               

              No luck.

               

              I deleted my CSS and re-loaded, still no luck. In page source (browser) I can see the link to my CSS

               

              Not tried firebug.

               

              Wondering if I am missing something?

               

              thanks,

              Ryan

              • 4. Re: Change the background color of theme 24 under a tab
                fac586

                ryansun wrote:

                 

                4.2. 1

                 

                theme 24 - cloudy

                 

                Hi there,

                 

                  I have theme 24 where I use the page template, one tab left sidebar and have included the following under the theme css link

                .

                .

                .

                #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#MYCUSTOM.css" type="text/css">

                <style type="text/css">

                  body {

                    background-color:#000000;

                }

                </style>

                  <script src="#IMAGE_PREFIX#themes/theme_24/js/4_1.js"></script>

                </head>

                 

                 

                As you can see I have a link to my custom CSS and I have also added the background color to black. But the background color of the page does not change. This was working fine sometime back, but for some reason after the environment was down for refresh and came up.

                Refresh of what? What was changed?

                The page background color does not take the specified value.

                Does for me. At least some bits of the page turn black. (It's not a good look.)

                I want to change the background color of the whole page under a tab. Not the region above the tab and is specific to theme 24.

                 

                Any advice please?

                Always reproduce visual formatting and layout problems on apex.oracle.com so we can see them and investigate the code directly. No one has sufficient powers of description to accurately convey their requirements and the nature of the problem as clearly as a simple demonstration does. And the chances are that in setting up the demonstration you'll spot some obvious problem yourself.

                • 5. Re: Change the background color of theme 24 under a tab
                  Ryansun-Oracle

                  Hi Pars,

                   

                    Tried on the edit page CSS inline also. Did not work. wondering if there is some caching issue. Tried clearing cache and still no luck.

                   

                  Fac586 - It was production data refresh. Not an Apex upgrade. I have requested for an account on apex, not yet got the confirmation.

                   

                  For theme 24 - When we select a tab, the tab is white and bigger than the other tabs, I want that whole page to be set to black under that tab. Not the top portion and bottom portion. That remains as the default color. I remember you had suggested the same for theme25 which worked. Which even pars has suggested. But does not seem to work now on theme 24. Second thing is that my Apex instance is not a local one. This is installed on the company servers to which we connect to. Wondering if it has something to do with server cache /setup etc?

                   

                   

                  Thanks!

                  Ryan

                  • 6. Re: Change the background color of theme 24 under a tab
                    Ryansun-Oracle

                    Hi Everyone,

                     

                    I created a test account on Apex and made the same changes and it works great. But not in my application! Wondering what the issue could be?

                     

                    thanks

                    • 7. Re: Change the background color of theme 24 under a tab
                      Ryansun-Oracle

                      Bumping this thread. Wondering if anyone has any suggestions. Works fine on apex oracle account, but not on my apex installation in the organization. Wondering if its anything to do with server cache?

                       

                      thanks!

                      • 8. Re: Change the background color of theme 24 under a tab
                        vincent_deelen

                        Hi,

                        CSS is interpreted by your browser, so server cache seems unlikely in htis case. There is however some hierarchy in CSS, so parts of the APEX CSS, theme CSS or page CSS might overwright or block yours.

                        Does changing the CSS on runtime affect your page? Eg, run the following in your browser console and see if your page turns black: $('#uBodyContainer').css("background-color","black")

                         

                        Also try moving up your css in the hierarchy labeling it as important:

                        div#uBodyContainer { 

                          background-color:#000000 !important;  

                        }


                        See:Assigning property values, Cascading, and Inheritance


                        Regards,

                        Vincent

                        http://vincentdeelen.blogspot.com