Right to Left (RTL) version of Start can be easily setup with special Gulp and Webpack task that depends on Gulp RTLCSS and RTLCSS tools.
--rtl
flag in theme/tools/
folder to generate the RTL versions of CSS files.
gulp --rtl
npm run build --rtl
*.rtl.css
suffix to files that have RTL versions generated in assets folder:
<!--begin::Page Vendor Stylesheets(used by this page)-->
<link href="assets/plugins/custom/prismjs/prismjs.bundle.rtl.css" rel="stylesheet" type="text/css" />
<!--end::Page Vendor Stylesheets-->
<!--begin::Global Stylesheets Bundle(used by all pages)-->
<link href="assets/plugins/global/plugins.bundle.rtl.css" rel="stylesheet" type="text/css" />
<link href="assets/css/style.bundle.rtl.css" rel="stylesheet" type="text/css" />
<!--end::Global Stylesheets Bundle-->
<html direction="rtl" dir="rtl" style="direction: rtl">
"compile": {
"rtl": {
"enabled": false,
"skip": [
"select2",
"line-awesome",
"fontawesome5",
"nouislider",
"tinymce",
"sweetalert2"
]
}
}
data-kt-menu-placement="bottom-start" => data-kt-menu-placement="bottom-end"
data-kt-menu-placement="right-start" => data-kt-menu-placement="left-start"