This discussion is archived
1 2 Previous Next 15 Replies Latest reply: Nov 15, 2012 1:54 PM by 973991 RSS

Theme upgrade

973991 Newbie
Currently Being Moderated
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 Pro
    Currently Being Moderated
    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 Newbie
    Currently Being Moderated
    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 Journeyer
    Currently Being Moderated
    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 Newbie
    Currently Being Moderated
    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 Journeyer
    Currently Being Moderated
    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 Guru
    Currently Being Moderated
    >

    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 Pro
    Currently Being Moderated
    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 Journeyer
    Currently Being Moderated
    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 Newbie
    Currently Being Moderated
    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 Newbie
    Currently Being Moderated
    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 Pro
    Currently Being Moderated
    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 Newbie
    Currently Being Moderated
    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 Newbie
    Currently Being Moderated
    Still had a question

    Edited by: Devan_SJ on Nov 15, 2012 9:08 AM
  • 14. Re: Theme upgrade
    Mindmap Pro
    Currently Being Moderated
    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

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points