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;
}

 

You may also like...