5

I added a RTL language translation file (e.g. Arabic, Persian, Farsi) to my Drupal 8 site. I want all the administration menus to always be in English and LTR. On the other hand, I want the front-end pages of my site to be in another language (e.g. Persian, Farsi).

I did the following.

  1. I enabled the Language module, and set up one additional language. Installation was done in English; I added Persian.

    screenshot

  2. I configured the administration language using the following settings.

    • /admin/config/regional/language/detection
      Account administration pages: enabled

    screenshot

  3. Admin >> Edit Profile >> Edit

    screenshot

This works properly for all the administration pages. Those are in English and LTR except the front page, user/1/, and admin/structure/block/demo/[theme name] where the administration menu is in Persian and RTL.

screenshot

screenshot

1
  • @kiamlaluno♦: Thank you so much for your editing, I sincerely appreciate you. Oct 1, 2017 at 14:36

1 Answer 1

2
+50

For forcing the administration menu to be LTR, and get rid of jumping to right side, you can add the following styles to the style.css file in the template folder of your site.

/* Administration Toolbar
------------------------------------------------------------------ */
//#toolbar-administration, #toolbar-administration *{
    box-sizing: border-box;
    float: left;
    direction: ltr;
}

[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
[dir="rtl"] .toolbar .toolbar-tray-horizontal li {
  float: left;
}

[dir="rtl"] .toolbar .toolbar-tray-horizontal > .toolbar-lining {
  padding-right: 5em;
  padding-left: 0;
}

[dir="rtl"] .toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab {
    float: right;
}

[dir="rtl"] .toolbar .toolbar-icon {
    padding-right: 1.3333em;
    padding-left: 2.75em;
}

[dir="rtl"] .toolbar .toolbar-icon::before {
    right: auto;
    left: 0.6667em;
}

[dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {
    right: 0;
    left: auto;
}

[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
    background-position: right center;
    padding-right: 1.3333em;
    padding-left: 2.75em;
}

[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
    right: auto;
    left: 0.6667em;
}

/* Toolbar Tray Vertical
------------------------------------------------------------------ */
[dir="rtl"] .toolbar-oriented .toolbar-tray-vertical.is-active {
    right: auto;
    left: 0;
}

[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu a {
    padding-right: 4em;
    padding-left: 2.75em;
    text-align: left;
}

[dir="rtl"] .toolbar .toolbar-icon.toolbar-handle {
    right: 0;
    padding: 0;
    left: auto;
}

[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul a {
    padding-right: 0;
    padding-left: 2.75em;
}

[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul ul a {
    padding-right: 0;
    padding-left: 3.75em;
}

[dir="rtl"] .toolbar .toolbar-toggle-orientation > .toolbar-lining {
  float: right;
}

See also Admin toolbar should always be rendered in the admin language (if set).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.