Universal Theme Is Your Design System
Universal Theme, included with every APEX installation since version 5.0, is a comprehensive, responsive design system that provides consistent styling across all APEX components. Rather than writing custom CSS for every page, leverage Universal Theme’s built-in template options and CSS utility classes to create polished, professional interfaces with minimal effort.
Template Options
Template options are predefined visual variations that you apply to regions, items, buttons, and other components through the property editor. They control layout, spacing, colors, and visual style without requiring any CSS knowledge:
For regions: Remove Body Padding, Use Template Defaults, Add Border, Accent Edge Left. For items: Large, Stretch Form Item, Align Center. For buttons: Hot (primary action color), Warning, Success, Small, Large, Icon Only. These options are applied through checkboxes in the page designer, and they generate the appropriate CSS classes automatically.
CSS Utility Classes
Universal Theme includes dozens of utility classes that you can apply through the CSS Classes property on any component:
u-color-1 through u-color-45 -- Predefined color palette
u-hot, u-success, u-warning -- Semantic colors
u-textCenter, u-textRight -- Text alignment
u-hidden-sm-down -- Responsive visibility
u-pullRight, u-pullLeft -- Float positioning
margin-top-sm, padding-left-lg -- Spacing utilitiesThese utility classes follow a consistent naming convention and are documented in the Universal Theme sample application that ships with every APEX installation.
Theme Roller
Theme Roller, accessible from the APEX developer toolbar, lets you customize the global appearance of Universal Theme without writing CSS. You can change the primary and accent colors, navigation bar style, body background, and font sizes. Theme Roller generates a custom CSS file that overrides the defaults, and you can save multiple theme styles and switch between them.
Custom CSS: When and Where
When Template Options and utility classes are not enough, add custom CSS in the application’s static CSS file (Shared Components then Static Application Files) rather than inline on individual pages. This keeps your styles centralized, cacheable by the browser, and easier to maintain. Follow BEM naming conventions or prefix your classes with your application’s abbreviation to avoid conflicts with Universal Theme’s class names.