RTL for Ghost Blog Admin

Jul 10, 2018

---

Ghost does not come with Right to Left interface for the admin and for the writing area. We can fix this adjusting the interface with CSS and a help of a Google Chrome extension.

First, install the CSS and Javascript Injection Chrome extension. The purpose of this extension is to enable us to write custom CSS code for the Ghost admin.

Click on the extension icon and copy the following code and paste it into the CSS window.

body.ember-application {
  direction: rtl;
  text-align: right;
}

.gh-nav-list svg {
  margin-right: 0;
  margin-left: 15px;
}

.koenig-plus-menu-button {
  margin: -2px -66px 0 0;
}

.gh-publishmenu-dropdown {
  right: auto;
}

.settings-menu-container {
  text-align: left;
  direction: ltr;
}

.gh-publishmenu-dropdown {
  direction: ltr;
}

.ember-power-select-trigger {
  padding: 0 30px 0 8px;
}

.dropdown-menu {
  right: 0;
}

.dropdown-menu svg {
  margin-right: 0;
  margin-left: 10px;
}

.gh-notification-content {
  text-align: left;
}

.koenig-cardmenu {
  left: auto;
}

The final result will be like:

You can also find the code at GitHub.

---