Background

Templates

2 - Builder Blue

22 - Bluejay

24 - Cloudy

26 - Productivity

Applications

25 - Blue

Responsive

77

94

99

107

?

42 - Universal Theme

52

26 - Productivity

Applications

25 - Blue

Responsive

107

77

Spot the Differences

Template Options add an extra degree of configuration (or styling) to just about any template.

It's an elegant, simple and yet powerful approach to styling templates with developer defined options.

CSS Classes

.t-Region--hideHeader>.t-Region-header {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.t-Region--accent1>.t-Region-header {
  background-color: #ff2d55;
  border-bottom: 1px solid #ff607e;
}

.t-Region--accent1>.t-Region-header .t-Region-title {
  color: #fff;
}

.t-Alert--success .t-Alert-icon {
  color: #4cd964;
}

.t-Region--scrollBody>.t-Region-bodyWrap>.t-Region-body {
  background-repeat: no-repeat!important;
  background-size: 100% 12px,100% 12px,100% 6px,100% 6px!important;
  background-attachment: local,local,scroll,scroll!important;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.t-LinksList--showArrow .t-LinksList-link {
  padding-right: 32px;
}

.t-Button--warning {
  background-color: #fc0;
  color: #000;
}

.t-Button--hot {
  background-color: #2578cf;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,.1);
}

.t-Button--large {
  padding: 1.4rem 1.6rem;
  line-height: 1.6rem;
  font-size: 1.4rem;
}

.t-MediaList--showBadges {
  display: table-cell;
}

.t-Cards--colorize .t-Cards-item:nth-child(2n)
 .t-Card-icon .t-Icon
, .t-Cards--colorize .t-Cards-item:nth-child(2n)
 .t-Card-wrap:before {
  background-color: #007aff;
}

.t-BadgeList--circular .t-BadgeList-value a {
  display: block;
  border-radius: 100%;
  text-decoration: none;
  transition: box-shadow .1s,color .1s,background-color .3s;
}

Organization

Template Option Groups

Template Option Groups

Some Template Options are Global

Some Template Options are Component Specific

Defining your own Template Options

Unsubscribing a Theme

Enabling "Other" Functionality

Use Template Options to drive JavaScript functionality

Demo

Carousel Region

Carousel

Carousel Options

Demo:

tts on previous themes

APEX Dictionary

APEX_APPL_TEMPLATE_OPTIONS


select REGION_TEMPLATE_OPTIONS
  from APEX_APPLICATION_PAGE_REGIONS
 where application_id = 89361
   and page_id = 5
   and name = :NAME

REGION_TEMPLATE_OPTIONS
-------------------------------------------------
#DEFAULT#:c-Region--Border:t-Form--stretchInputs

select apex_view_name || '.' || column_name result
from apex_dictionary
where column_name like '%TEMPLATE_OPTIONS'

--------------------------------------------------------
APEX_APPLICATION_PAGES.PAGE_TEMPLATE_OPTIONS
APEX_APPLICATION_PAGES.NAV_LIST_TEMPLATE_OPTIONS
APEX_APPLICATION_PAGE_REGIONS.REGION_TEMPLATE_OPTIONS
APEX_APPLICATION_PAGE_REGIONS.COMPONENT_TEMPLATE_OPTIONS
APEX_APPLICATION_PAGE_BUTTONS.BUTTON_TEMPLATE_OPTIONS
APEX_APPLICATION_PAGE_ITEMS.ITEM_TEMPLATE_OPTIONS
APEX_APPLICATION_TEMP_BC.DEFAULT_TEMPLATE_OPTIONS
APEX_APPLICATION_TEMP_BC.PRESET_TEMPLATE_OPTIONS
APEX_APPLICATION_TEMP_BUTTON.DEFAULT_TEMPLATE_OPTIONS
APEX_APPLICATION_TEMP_BUTTON.PRESET_TEMPLATE_OPTIONS
APEX_APPLICATION_TEMP_LABEL.DEFAULT_TEMPLATE_OPTIONS
APEX_APPLICATION_TEMP_LABEL.PRESET_TEMPLATE_OPTIONS
APEX_APPLICATION_TEMP_LIST.DEFAULT_TEMPLATE_OPTIONS
APEX_APPLICATION_TEMP_LIST.PRESET_TEMPLATE_OPTIONS
APEX_APPLICATION_TEMP_PAGE.DEFAULT_TEMPLATE_OPTIONS
APEX_APPLICATION_TEMP_PAGE.PRESET_TEMPLATE_OPTIONS
APEX_APPLICATION_TEMP_REGION.DEFAULT_TEMPLATE_OPTIONS
APEX_APPLICATION_TEMP_REGION.PRESET_TEMPLATE_OPTIONS
APEX_APPLICATION_TEMP_REPORT.DEFAULT_TEMPLATE_OPTIONS
APEX_APPLICATION_TEMP_REPORT.PRESET_TEMPLATE_OPTIONS
APEX_APPL_USER_INTERFACES.NAV_LIST_TEMPLATE_OPTIONS
APEX_APPL_USER_INTERFACES.NAV_BAR_TEMPLATE_OPTIONS