Run your application and click the Theme Roller link in the APEX Developer Toolbar:
- Style: there're two styles that come with APEX 5.0: Blue and Gray. You can start from one of those and see how your application changes color. It will set predefined colors for the different parts of the templates.
- Color Wheel: when you want to quickly change your colors, an easy way to see different options is by using the Color Wheel. You've two modes: monochroom (2 points) and dual color (3 points - see screenshot). By changing one point it will map the other point to a complementary color. Next you can move the third point to play more with those colors.
- Global Colors: if the Color Wheel is not specific enough for what you need, you can start by customising the Global Colors. Those are the main colors of the Universal Theme and used to drive the specific components. You can still customise the different components e.g. the header by clicking further down in the list (see next screenshot).
- Containers etc. will allow you to define the specific components. A check icon will say it's the standard color coming with the selected style. An "x" means the color was changed and an "!" means the contrast is probably not great.
 | 
|
| Original with style | After changing colors |
This is just awesome... but what if you don't like the changes you did?
Luckily you can Reset either your entire style or you can refresh the specific section by clicking the refresh icon. There's also an undo and redo button. But that is not all... for power users when you hit "ALT" when hovering a color you can just reset that color! (only that color will get a refresh icon in it and clicking it will reset it)
Note that all changes you're making are locally stored on your computer in your browsers cache (HTML5 local storage), so you don't effect other users by playing with the different colors.
Finally when you are done editing your color scheme you can hit the Save As button to save all colors to a new Style. When you close Theme Roller the style will go back how it was.
The final step to apply the new style so everybody sees that version, is to go to User Interface Details (Shared Components) and set the style to the new one.
Note that this blog post is written based on APEX 5.0 EA3, in the final version of APEX 5.0 (or 5.1) you might apply the new style from Theme Roller directly.
Want to know more about Theme Roller and the Universal Theme - we're doing an APEX 5.0 UI Training May 12th in the Netherlands.
Thanks for the post, still don't understand the 3 points in the Color Wheel though :-)
ReplyDeleteThank you for posting this information on Theme Roller with APEX Developer Toolbar. Can you please tell me how to get the Theme Roller link in the APEX Developer Toolbar?
ReplyDeleteThank you
Hello Dimitri, I'm your follower, great Blog. I wonder if it's possible to customize a Template for role, or users group for the same App. I mean one sigle Apex App with more than one custom Theme. Greetings
ReplyDelete@Tracy: in APEX 5.0 when using the Universal Theme, the Theme Roller link is automatically there.
ReplyDelete@Contacto Orex: You can do that, but it requires a bit of work as it's not declarative included. You need to save the theme roller settings in different files and then call the different css depending the user. In a future version of APEX they might make this more easy to do, but for now you'll have to do it yourself.
Thank you Dimitri.
ReplyDeleteI created a starter app, applied universal theme, and used theme roller to customize. Now how do I "apply" all those styles to other applications, that already exist? It appears subscribing to that template/theme works different now too.
ReplyDeletetop copy the settings see http://reynde.blogspot.be/2015/09/copy-theme-roller-settings-from-one-app.html
ReplyDeleteI tried follow the steps listed in this article and everything works fine until I close the themeroller. Once that happens the page seems to lose all css attributes. Have you seen this before
ReplyDeleteHi Christopher,
ReplyDeleteThis is normal behaviour, you need to save the style and make it current.
Hope that helps,
Dimitri
Thanks for your response on this issue but I think I was unclear. I have saved this style and saved it as current and I always see this issue. If I log out and come back in and run any page I get the same results until I open the themeroller from the developer toolbar.
ReplyDeleteSome additional info. I see on my browser console that I am getting a Failed to load resource: the server responded with a status of 503 (Service Unavailable) - http://localhost/ords/ps/r/100/files/theme/42/v68/custom_themeroller_test.css
ReplyDeleteI have the same issue as Christopher, the themeroller css file is not found, but it works OK when the themeroller is open. This happened after exporting the App from one server/workspace and importing into another.
ReplyDeleteIt's OK now - the issue was caused by server config (an apache rule) blocking access to the css file
ReplyDeleteDear Darrin Parker
ReplyDeletecan you please explain how you resolve ... as theme roller files issue ???
an apache rule)???? can you please guide i am facing same issue .
Thanks for you time
wasim
Hi Wasim by default themeroller makes the css available at a path such as #THEME_DB_IMAGES#123456789.css where #THEME_DB_IMAGES# is an apex substitution variable for the path to the file. Apparently we had an apache rule in our web server fronting ORDS that blocked this path... we fixed the apache config and it worked
ReplyDeleteHi Darrin,
ReplyDeleteI am also facing the same issue and have couple of questions regarding your last comment.
1. How do we find the path to the css file represented by the #THEME_DB_IMAGES#?
2. How and where do we find which apache rule is blocking access to the css file and how do we remove it? Could you give steps for it?
Thanks and Regards
Anuj
Hi Darrin,
ReplyDelete.a-IRR-headerLabel, .a-IRR-headerLink {
padding: 8px;
white-space: normal !important;
}
i tried to use the above css to break the Interactive Report Header in to Two Rows...but still it is showing in same row can u please suggest me a solution
Hello Dimitri, I have tried to customize my theme y theme roller. But When I save as a new Theme and apply it as current theme .. All colors being white. How to solve it
ReplyDeleteTo enable the theme style you need to click the set as current theme button.
ReplyDeleteHi Dimitri,
ReplyDeleteGreat blog - thanks
I've had a service request in with Oracle for five months with exactly the same problem MD Khairu Islam describes.
We use Glassfish, not Apache. Universal Theme 42.
We can create a new style with Theme Roller, save it, set as current. However as soon as we close Theme Roller we get just black on white background. Weirdly, if we open Theme Roller, the style is applied (i.e. Colors appear). When we close Theme Roller back to black and white.
I don't think it is a server issue. We have several APEX environments on this server with different ORDS war files. They were all built from same procedure and software. Some have the problem and some do not.
Any help would be much appreciated.
Running java -jar ords.war validate resolved the above problem for us.
ReplyDeleteAny way to use themeroller in Apex 21.1 to set the title of ALL IRs in an app to have text centered and of a certain font size?
ReplyDelete