Wednesday, February 04, 2015

APEX 5.0 EA3 - Universal Theme Styles - Gray!

In APEX 5.0 theme 42 is included - this is the Universal Theme. The theme comes with two styles: Blue and Gray.


The UI is so much improved in APEX 5, it's really a game changer. When you look at the details for example from such a style you will see it's using a Less file (Less is a CSS pre-processor) behind the scenes. So it's very easy to make changes to the CSS. But you probably even don't need to do that as the development team allows you to make customisations with ThemeRoller which generates JSON (another nice example where JSON is used - interested in JSON - I did some other posts on this blog about JSON).

To change the color for example, below you see the JSON for that.


Note that Theme Roller will generate the JSON for you. Accept from those customisations, the blue and gray style are using the exact same css.

From the Blue style many screenshots have been posted already, but I love the Gray style too, here's a screenshot when you switch the sample application's style to Gray.

5 comments:

  1. Hi Dimitri,

    where are the theme roller attributes in the Application Builder, cannot find them.

    Thanks,
    ~Dietmar.

    ReplyDelete
  2. Hi Dietmar,

    You find them in Shared Components > User Interface Attributes - Next you take the Desktop User Interface and you will see the Style on there.

    Hope that helps,
    Dimitri

    ReplyDelete
  3. Hello!
    Dimitri, I love your blog!
    As a newcomer to html\css let me ask is there a way to put a tree region on the left side of the page? Instead of a navigation, I mean

    ReplyDelete
  4. Sure you can use for example the minimal template without navigation and put a region on the left with a tree.
    If you put the tree on the global page (page 0) it will show up on every page.

    ReplyDelete
  5. Hi Dimitri, thanks for the note. I am a newbie in Apex ( version 5.0.0.00.31 database 11.2.x). I do not see any minimal template. All I see is No Template and system does not accept this setting. Whatever I tried it does not allow the Global Desktop page to move left and the left sidebar always appears (although it is blank). Appreciate your help,
    Srini

    ReplyDelete