1 2 Previous Next 15 Replies Latest reply: Nov 15, 2012 3:54 PM by 973991 RSS

    Theme upgrade

    973991
      Hi,

      I have been given the task to modify our company's Apex from 4.1 to 4.2. The upgrade has been completed; in addition, the current UI, blue and tan has been updated to BlueJay. I have noticed the structure of the page gets shuffled as well as contents within modules. What would be the best way to "re-organize" my pages.

      - Would it be easy for me modify the page, if so how do I do this. The settings look identical, so what would I change ?
      - Do I recreate the entire page from scratch ?

      Any help would be great.

      -Devan

      Edited by: 970988 on Nov 14, 2012 1:16 PM
        • 1. Re: Theme upgrade
          Mindmap
          Hello,
          Please check the following:

          Go to Shared Components >> Templates the choose:
          Theme: BlueJay
          Type: page

          Click Preview to see the layout of each PAGE template .... then edit your page and choose the best template for your page .... and you may need to change the Display Point of your regions.

          and this thread could be helpful to you:
          APEX 4.2 Page Item UI changed to Template --> No Label


          Best Regards,
          Fateh
          ---------------------------
          If you believe that my answer was correct or helpful to you, then please mark the answer as helpful or correct.
          • 2. Re: Theme upgrade
            973991
            Hi Fatech,

            Thanks for the tip. That will help in after i get through this step.

            Let re-state my question as I have had more time in APEX. I need to modify the template via CSS. I have replicated the original CSS and changed some values and uploaded it via shared component->CSS. I have then referenced the CSS ----- <link rel="stylesheet" src="#WORKSPACE_IMAGES#devan.css" type="text/css" /> ----- in the HTML header and no changes have been made.

            Any light on this ?

            Edited by: 970988 on Nov 14, 2012 9:31 AM
            • 3. Re: Theme upgrade
              Kofi
              How did you upload the css file? You may have to reference #APP_IMAGES# instead of #WORKSPACE_IMAGES#.
              Also, I would consider having the css file on the server file system rather than from the database for potential caching advantages.
              Also, see Re: Shared Components -> Files -> CSS not being deleted
              Cheers
              Kofi

              Edited by: Kofi on Nov 14, 2012 1:51 PM
              • 4. Re: Theme upgrade
                973991
                Hi Kofi,

                Thanks for replying. I tried to replace the tag but that didn't help. In firefox when I goto inspect element I can see my style sheet being referenced.

                Do you think its easier just to backup and modify the css directly on the "I" folder

                -Devan
                • 5. Re: Theme upgrade
                  Kofi
                  Hi Devan,
                  that's interesting. If the CSS file is being referenced properly and you've verified that it's not dishing up an old cached version then a few things come to mind.
                  - The tags have changed during the theme upgrade and are thus not reflective of the classes you've styled in your CSS
                  - Another CSS is overriding this one
                  - The changes you made were not successful in that they might have been incorrect or at the wrong level, for example being overridden by certain higher level tags.
                  You can put an example on apex.oracle.com

                  Kofi
                  • 6. Re: Theme upgrade
                    fac586
                    >

                    Please update your forum profile with a real handle instead of "970988".
                    I have been given the task to modify our company's Apex from 4.1 to 4.2. The upgrade has been completed; in addition, I have updated the current UI, blue and tan, to BlueJay. In doing so, I have noticed the structure of the page gets shuffled as well as contents within modules. What would be the best way to "re-organize" my pages.
                    Please explain in detail what "the structure of the page gets shuffled as well as contents within modules" means (an example on apex.oracle.com is the best way to do this: it won't strain your powers of description). What browser(s)/version(s) are you using?
                    I have replicated the original CSS and changed some values
                    What "original CSS"? Changed what values?
                    • 7. Re: Theme upgrade
                      Mindmap
                      Hello,
                      Uploaded cascading style sheets are available to your entire workspace, not just to a specific application.
                      So, you should use #WORKSPACE_IMAGES#

                      Please do the following:
                      Clear your browser cache.
                      if not changes, then make sure that your CSS file does not have the tag of
                      <STYLE>
                      In the CSS file, you should use only CSS rules.
                      if does not work, then try to add *!important* to each CSS rule.

                      And you could try the following to isolate the problem, paste your CSS rules into the page header. Edit your page and add the CSS rules into the header section inside the STYLE tag

                      Best Regards,
                      Fateh
                      • 8. Re: Theme upgrade
                        Kofi
                        Fateh,
                        You can upload a CSS file via Shared Components->Static File too in which case it could be APP specific. Anyhow it's obvious in this case the Workspace level is working for him.
                        I would go with Paul on creating an example on apex.oracle.com.
                        Kofi
                        • 9. Re: Theme upgrade
                          973991
                          Hi All,

                          Thank you for being helpful and I will upload the apex later today.

                          Here is a screenshot of the HTML (The highlighted part is my CSS):
                          http://i46.tinypic.com/nc1a3a.png


                          For starters, I am trying to change the width of my login window. Hence I copied the CSS sheet(theme_4_0.css) modified the #Login-Main attribute to "width 300px" from "width 640px".

                          I don't believe this is a cache issue; I have tried it on multiple machines.




                          -Devan

                          Edited by: 970988 on Nov 14, 2012 1:27 PM

                          Edited by: 970988 on Nov 14, 2012 1:28 PM
                          • 10. Re: Theme upgrade
                            973991
                            So I couldn't get the exact application copied over; however, I used a template application to illustrate my case.

                            You can login to the APEX:
                            http://apex.oracle.com

                            Workspace: DEVAN_TEST
                            UserName: TEST
                            Pass: TEST
                            Application -->Sample Dialog

                            What I am trying to accomplish is to modify the width of the login window. I have copied the CSS and uploaded a new one with the change made to the following containers (div#uLoginContainer , section.uRegion.uLoginRegion ) and referenced them in my HTML Header (<link rel="stylesheet" src="#APP_IMAGES#mod.css" type="text/css" />).

                            I changed the width from 480px -> 600px.

                            After doing this I am don't see any changes being made and this is my problem. Am I missing something ?

                            -Devan
                            • 11. Re: Theme upgrade
                              Mindmap
                              Hello,

                              Please check it now:
                              I edited your page and added this in CSS >> Inline section
                              section.uRegion.uLoginRegion {WIDTH: 600px !important}
                              When I viewed the page source of your log in page, and clicked on the file mod.CSS, it does not opened. So, I referenced that file in the Template of the Login Page . and Now, if you view page source and click on it, it will work.....

                              put the rule I used on your CSS file, and it should work... (in case you do not wish to use it in Inline Section)

                              Regards,
                              Fateh

                              ------
                              If you believe that my answer was correct or helpful to you, then please mark the answer as helpful or correct.
                              • 12. Re: Theme upgrade
                                973991
                                Hi Fatech,

                                Thank You so much for taking the time to do it and explain it to me. However one more question.

                                You stated that either should work, inline or reference it on the template. I deleted the inline code and left the reference on the template yet no changes are made. Is there a reason why the template doesn't acknowledge the "mod.css" ?

                                -Devan

                                Edited by: Devan_SJ on Nov 15, 2012 9:05 AM
                                • 13. Re: Theme upgrade
                                  973991
                                  Still had a question

                                  Edited by: Devan_SJ on Nov 15, 2012 9:08 AM
                                  • 14. Re: Theme upgrade
                                    Mindmap
                                    Sorry, I could not figure it out.... Apparently, when we reference mod.css on the page template, it does not affect the page ... but I do not know why....

                                    When I referenced the file in the page >>> File URLs, it works .... So, you can add the CSS rule in the page or even in the region attribute ....

                                    Best Regards,
                                    Fateh
                                    1 2 Previous Next