Oracle APEX | How to change theme template to support RTL [Arabic Language]
Welcome Apex lovers ,
How to change theme template to support RTL [Arabic Language]
Apex version: 5
Theme number: 42
Basically you must learning CSS OR Basic of CSS language to can edit any Apex template.
Now i helping you to change Apex template theme to support Arabic language [RTL].
Now watching & Apply
Standard page template CSS code:
/* Arabic Font */
@import url('https://fonts.googleapis.com/css?family=Droid Arabic Kufi');
body{
font-family: Droid Arabic Kufi !important;
}
/* Regions */
.col, .t-Form-labelContainer {
float: right !important;
}
.t-Region-headerItems--buttons {
text-align: left !important;
}
.t-Region-headerItems--title {
text-align: right !important;
}
.t-Button--navBar .t-Icon.fa {
margin-left: 4px;
}
.t-Region-title {
font-weight: 500;
}
.t-Region-headerItems--controls {
padding-right: .8rem;
}
.a-IRR-controls {
float:right;
}
.a-IRR-buttons{
float:left;
}
.t-Alert--horizontal .t-Alert-buttons, .t-Alert--horizontal .t-Alert-content, .t-Alert--horizontal .t-Alert-icon {
display: table-cell;
padding: 16px 16px 16px 16px;
vertical-align: middle;
}
/* IR */
.a-IRR-header.a-IRR-header--group {
text-align: right;
}
.a-IRR-table td {
padding: 4px !important;
}
.t-Form-inputContainer, .t-Form-inputContainer.col, .t-Form-labelContainer, .t-Form-labelContainer.col {
padding: .2rem !important;
}
.a-MenuBar.u-RTL .a-MenuBar-item.a-Menu--split>.a-Menu-subMenuCol {
border-left: 0px solid;
border-right: none;
}
.t-Report-wrap {
float: right;
}
Modal Dialog page template CSS code:
/* Arabic Font */
@import url('https://fonts.googleapis.com/css?family=Droid Arabic Kufi');
body{
font-family: Droid Arabic Kufi !important;
}
/* All Regions */
.col, .t-Form-labelContainer {
float: right !important;
}
.t-ButtonRegion-col--content, .t-ButtonRegion-col--left .t-ButtonRegion-buttons, .t-ButtonRegion-col--right .t-ButtonRegion-buttons {
padding: 16px 16px 16px 16px;
}
.t-Button + .t-Button {
margin-right: .4rem;
}
.t-Region-headerItems--title {
text-align: right;
padding: 1.6rem 1.2rem;
}
.a-IRR-header--group{
text-align: right;
}
/* Form*/
t-Form-checkboxLabel, .t-Form-inputContainer .checkbox_group label, .t-Form-inputContainer .radio_group label, .t-Form-label, .t-Form-radioLabel, .t-Form-required {
float: right !important;
}
.t-Form-inputContainer, .t-Form-inputContainer.col, .t-Form-labelContainer, .t-Form-labelContainer.col {
padding: .2rem;
}
.ui-dialog-title{
direction:rtl;
}
/* report*/
.t-Report-wrap {
float: right;
}