# Ghost Tips & Tricks #2 / Ghost Admin Right to Left (RTL) Support

**URL:** <https://forum.ghost.org/t/ghost-tips-tricks-2-ghost-admin-right-to-left-rtl-support/14357>\
**Category:** Marketplace\
**Created:** [May 14, 2020, 6:19pm UTC](https://forum.ghost.org/t/ghost-tips-tricks-2-ghost-admin-right-to-left-rtl-support/14357 "2020-05-14T18:19:49Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![ahmadajmi](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ahmadajmi/32/23173_2.png) [@ahmadajmi](https://forum.ghost.org/u/ahmadajmi)\
**Post date:** [May 14, 2020, 6:19pm UTC](https://forum.ghost.org/t/ghost-tips-tricks-2-ghost-admin-right-to-left-rtl-support/14357/1 "2020-05-14T18:19:49Z")

</div>

Hello everyone,

_This is the second issue of Ghost Tips & Tricks. I will be happy to share with you some practical Ghost tips that I find useful. Brought to you by [**Aspire Themes**](https://aspirethemes.com/)._

* * *

Today, I want to share with you how to add Right to Left (RTL) support to the Ghost admin with CSS and the help of a Google Chrome extension. This is useful if you are writing in a language like Arabic or Hebrew for example.

The first step is to install the [CSS and Javascript Injection](https://chrome.google.com/webstore/detail/css-and-javascript-inject/ckddknfdmcemedlmmebildepcmneakaa/related?hl=en) Chrome extension. The purpose of this extension is to enable us to add custom CSS code which will be applied to the Ghost admin.

After the extension is installed, click on the extension icon and copy the [**style.css**](https://github.com/aspirethemes/ghost-admin-rtl/blob/master/style.css) code and paste it into the CSS window.

 ![RTL for Ghost Blog Admin Extention](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/4/4ab5498e588d0f350a797fa64767e1db9a9a6c1c.png)

### The final result will be like

 ![admin](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/5/5825d33f5c36017af70370a640f934e13fb4e01a.jpeg)

#### Editor

 ![editor](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/0/023d757c3b095a72b01ff994cca9c840db39591d.png)

#### Posts

 ![posts](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/1/1dc1df4d154d74bd3e89858688168da8d7dfa0b2.png)

#### Staff

 ![staff](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/b/b5b53dfdd48d4f3752e4e266034ae616c2859e8d.png)

#### Tags

 ![tags](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/2/2fbee3020af8143584e916875ef912a6049c5a5e.png)

#### Design

 ![design](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/b/b01ebedf2cac8fec97d30511721197e90d16438c.jpeg)

#### Code Injection

 ![codeinjection](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/6/67fe12dc3fa38512b948299ec1440ce0f8759e61.png)

I went over all the admin screens and provided a fix even for buttons and border-radius corners. You can find the code at [**GitHub**](https://github.com/aspirethemes/ghost-admin-rtl). You are welcome to contribute any fixes and improvements. The CSS code is commented on with every component or admin section.

That’s it for today and I hope you find this useful…

* * *

You can check out the first issue if this series at [Ghost Tips & Tricks #1 / Show Publish Date in the day time with AM and PM format](https://forum.ghost.org/t/ghost-tips-tricks-1/14289)

Also, I started a [**Ghost Websites Inspiration**](https://forum.ghost.org/t/ghost-websites-inspiration-1/14185) series where share inspiring websites created with Ghost. I hope you can find it inspiring and useful too.

* * *

Stay safe!

_Ahmad_

---

<div class="post-metadata">

**Author:** ![Oren\_Cohen](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/oren_cohen/32/6776_2.png) [@Oren\_Cohen](https://forum.ghost.org/u/Oren_Cohen)\
**Post date:** [May 17, 2020, 11:02am UTC](https://forum.ghost.org/t/ghost-tips-tricks-2-ghost-admin-right-to-left-rtl-support/14357/2 "2020-05-17T11:02:42Z")

</div>

Thanks so much, Ahmad! I was wondering if this solution applies only to the admin area or will the CSS changes added in the editing phase will also carry out to the published article? I guess what I’m asking is whether this solution allows my visitors to view my articles in the correct direction or not (and not just me as I write them).

---

<div class="post-metadata">

**Author:** ![ahmadajmi](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ahmadajmi/32/23173_2.png) [@ahmadajmi](https://forum.ghost.org/u/ahmadajmi)\
**Post date:** [May 17, 2020, 2:50pm UTC](https://forum.ghost.org/t/ghost-tips-tricks-2-ghost-admin-right-to-left-rtl-support/14357/3 "2020-05-17T14:50:05Z")

</div>

My pleasure, Oren! This solution is only applied to the admin area, only for you. If you want to add RTL to the theme so your visitors can view the articles and the blog in the right direction, theme customization will be required. If you are using the Casper theme, you can use this custom CSS code I recently added here [Layout change from left to right and better language support - #2 by ahmadajmi](https://forum.ghost.org/t/layout-change-from-left-to-right-and-better-language-support/14339/2)

---

<div class="post-metadata">

**Author:** ![mamoon101](https://avatars.discourse-cdn.com/v4/letter/m/e0b2c6/32.png) [@mamoon101](https://forum.ghost.org/u/mamoon101)\
**Post date:** [September 28, 2021, 7:59pm UTC](https://forum.ghost.org/t/ghost-tips-tricks-2-ghost-admin-right-to-left-rtl-support/14357/5 "2021-09-28T19:59:49Z")

</div>

Thanks alot for this. When I tried it, I noticed that the publish button (which is usually on the right side and now with RTL gets on the left side) gets hidden making it difficult to click and publish accordingly

anyway around that?

---

<div class="post-metadata">

**Author:** ![ahmadajmi](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ahmadajmi/32/23173_2.png) [@ahmadajmi](https://forum.ghost.org/u/ahmadajmi)\
**Post date:** [October 1, 2021, 12:14am UTC](https://forum.ghost.org/t/ghost-tips-tricks-2-ghost-admin-right-to-left-rtl-support/14357/6 "2021-10-01T00:14:29Z")

</div>

You can add the following CSS snippet, and it should be fine.

```auto
.gh-publishmenu-dropdown {
  right: auto !important;
}

```

---

<div class="post-metadata">

**Author:** ![ahmadajmi](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ahmadajmi/32/23173_2.png) [@ahmadajmi](https://forum.ghost.org/u/ahmadajmi)\
**Post date:** [October 1, 2021, 12:18am UTC](https://forum.ghost.org/t/ghost-tips-tricks-2-ghost-admin-right-to-left-rtl-support/14357/7 "2021-10-01T00:18:27Z")

</div>

_Update: It seems like the **CSS and Javascript Injection** Chrome extension is no longer available. The [**User JavaScript and CSS**](https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld/related) extension will do the same job._

---

<div class="post-metadata">

**Author:** ![mamoon101](https://avatars.discourse-cdn.com/v4/letter/m/e0b2c6/32.png) [@mamoon101](https://forum.ghost.org/u/mamoon101)\
**Post date:** [October 1, 2021, 8:05am UTC](https://forum.ghost.org/t/ghost-tips-tricks-2-ghost-admin-right-to-left-rtl-support/14357/8 "2021-10-01T08:05:34Z")

</div>

It works fine now. Thanks alot.

Follow-up question please. If I only want the post editor to be RTL and keep everything the same, which part of the CSS I shall keep and delete the rest ?

---

<div class="post-metadata">

**Author:** ![ahmadajmi](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ahmadajmi/32/23173_2.png) [@ahmadajmi](https://forum.ghost.org/u/ahmadajmi)\
**Post date:** [October 3, 2021, 1:09pm UTC](https://forum.ghost.org/t/ghost-tips-tricks-2-ghost-admin-right-to-left-rtl-support/14357/9 "2021-10-03T13:09:45Z")

</div>

In the extension settings, change your website URL by adding `ghost/#/editor` to it. I tested it with the _[**User JavaScript and CSS**](https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld/related)_ extension I mentioned recently, and it works.

 ![Screen Shot 2021-10-03 at 3.08.06 PM](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/e/e3179486c909880bad5e8847ce9a16d01a134297.png)

---

<div class="post-metadata">

**Author:** ![mamoon101](https://avatars.discourse-cdn.com/v4/letter/m/e0b2c6/32.png) [@mamoon101](https://forum.ghost.org/u/mamoon101)\
**Post date:** [October 4, 2021, 9:01am UTC](https://forum.ghost.org/t/ghost-tips-tricks-2-ghost-admin-right-to-left-rtl-support/14357/10 "2021-10-04T09:01:33Z")

</div>

Thanks. But it brought back everything back to normal again

---

<div class="post-metadata">

**Author:** ![ahmadajmi](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ahmadajmi/32/23173_2.png) [@ahmadajmi](https://forum.ghost.org/u/ahmadajmi)\
**Post date:** [October 5, 2021, 12:06am UTC](https://forum.ghost.org/t/ghost-tips-tricks-2-ghost-admin-right-to-left-rtl-support/14357/11 "2021-10-05T00:06:35Z")

</div>

Then, you can remove all the CSS code and only use the following:

```auto
.gh-koenig-editor-pane {
  direction: rtl;
  text-align: right;
}

[data-kg="plus-menu"] {
  position: absolute;
  left: 0;
}

```

It might not be perfect for all the elements, but it gets the job done for the main layout.

---

<div class="post-metadata">

**Author:** ![rebrandr](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/rebrandr/32/15556_2.png) [@rebrandr](https://forum.ghost.org/u/rebrandr)\
**Post date:** [October 27, 2021, 6:40am UTC](https://forum.ghost.org/t/ghost-tips-tricks-2-ghost-admin-right-to-left-rtl-support/14357/12 "2021-10-27T06:40:36Z")

</div>

hi, thank you for your efforts!  
I have a question please, so I wanted to write from RTL and I pasted the code for that in the header. everything worked well but it messed a few things, such as the email sign up in the footer and upon opening a post, the writer profile picture gets almost stuck with the date section and username (the space between them gets smaller). is there a way to fix that?

thanks!

---

<div class="post-metadata">

**Author:** ![ahmadajmi](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ahmadajmi/32/23173_2.png) [@ahmadajmi](https://forum.ghost.org/u/ahmadajmi)\
**Post date:** [November 3, 2021, 4:55am UTC](https://forum.ghost.org/t/ghost-tips-tricks-2-ghost-admin-right-to-left-rtl-support/14357/13 "2021-11-03T04:55:35Z")

</div>

Hey! The CSS code is not fully compatible with the Ghost 4 dashboard and needs some work, but the editor should work fine for writing. Would you mind sharing any screenshots of the current issues to consider in future updates?

---

<div class="post-metadata">

**Author:** ![rebrandr](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/rebrandr/32/15556_2.png) [@rebrandr](https://forum.ghost.org/u/rebrandr)\
**Post date:** [November 3, 2021, 8:51am UTC](https://forum.ghost.org/t/ghost-tips-tricks-2-ghost-admin-right-to-left-rtl-support/14357/14 "2021-11-03T08:51:21Z")

</div>

hi, thank you.

the issues:  
inside a post:

- profile picture (+name and date)  
Footer inside a post:
- subscribe
- contribute contact data and privacy  
(the dots between them).

this is most of the issues that i faced.  
thanks!

[Screen Shot 1443-03-28 at 11.42.24 AM|690x390](https://forum.ghost.org/uploads/short-url/je8czQw2ha9NOozRVEkKs9RSAcG.jpeg)

 ![Screen Shot 1443-03-28 at 11.42.53 AM](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/1/1d46dd5030fa98da44cbb8cd81418d6f9073ee09.jpeg)

---

<div class="post-metadata">

**Author:** ![ahmadajmi](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ahmadajmi/32/23173_2.png) [@ahmadajmi](https://forum.ghost.org/u/ahmadajmi)\
**Post date:** [November 10, 2021, 8:00am UTC](https://forum.ghost.org/t/ghost-tips-tricks-2-ghost-admin-right-to-left-rtl-support/14357/15 "2021-11-10T08:00:21Z")

</div>

I updated the complete code, and looks good now. Give it a try and let me know.

```auto
<style>
body {
  text-align: right;
  direction: rtl;
}

/* Header nav */

.home-template .gh-head-menu {
  margin-left: 0;
  margin-right: -2.5vmin;
}

.gh-head-menu .nav li {
  margin: 0 0 0 2.5vmin;
}

/* Header social icons */

.gh-social {
  margin: 0 0 0 1.5vmin;
}

.gh-social a + a {
  margin-right: .8rem;
}

/* Post-card list */
.post-card-byline-content {
  margin: 0 8px 0 0;
}

/* Post */
.article-byline-content .author-list {
  padding: 0 0 0 12px
}

/* Call to action */

.footer-cta-button {
  padding: 5px 15px 5px 5px;
}

/* Footer */

.site-footer-nav a {
  margin-right: 10px;
}

.site-footer-nav li:not(:first-child) a::before {
  margin: 0 0 0 10px;
}
</style>

```

---

<div class="post-metadata">

**Author:** ![rebrandr](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/rebrandr/32/15556_2.png) [@rebrandr](https://forum.ghost.org/u/rebrandr)\
**Post date:** [November 10, 2021, 8:35am UTC](https://forum.ghost.org/t/ghost-tips-tricks-2-ghost-admin-right-to-left-rtl-support/14357/16 "2021-11-10T08:35:15Z")

</div>

hi, idk if the subscribe button supposed to be in this direction in the original casper theme, but IT WORKS!! thank you soooo much, well done!  
I was almost going for wordpress, but i think i could give ghost another try.

I have question, what do you think about ghost for arabic content?

thanks for your efforts and time  
best regards

---

<div class="post-metadata">

**Author:** ![ahmadajmi](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ahmadajmi/32/23173_2.png) [@ahmadajmi](https://forum.ghost.org/u/ahmadajmi)\
**Post date:** [November 10, 2021, 8:51am UTC](https://forum.ghost.org/t/ghost-tips-tricks-2-ghost-admin-right-to-left-rtl-support/14357/17 "2021-11-10T08:51:19Z")

</div>

> [@rebrandr](#):
>
> if the subscribe button supposed to be in this direction

It should be on the left side now.

> [@rebrandr](#):
>
> what do you think about ghost for arabic content?

In terms of what?

---

<div class="post-metadata">

**Author:** ![rebrandr](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/rebrandr/32/15556_2.png) [@rebrandr](https://forum.ghost.org/u/rebrandr)\
**Post date:** [November 10, 2021, 9:03am UTC](https://forum.ghost.org/t/ghost-tips-tricks-2-ghost-admin-right-to-left-rtl-support/14357/18 "2021-11-10T09:03:49Z")

</div>

blogging and monetizing in arabic

---

<div class="post-metadata">

**Author:** ![ahmadajmi](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ahmadajmi/32/23173_2.png) [@ahmadajmi](https://forum.ghost.org/u/ahmadajmi)\
**Post date:** [November 10, 2021, 12:16pm UTC](https://forum.ghost.org/t/ghost-tips-tricks-2-ghost-admin-right-to-left-rtl-support/14357/19 "2021-11-10T12:16:44Z")

</div>

One issue I know is that there is no RTL support for emails content. So, if you will send emails to your readers, it will be LTR. Two Arabic websites I know use Ghost [https://ahmed.so/](https://ahmed.so/) & [https://alfarhan.ws/](https://alfarhan.ws/)

---

<div class="post-metadata">

**Author:** ![AlSharif](https://avatars.discourse-cdn.com/v4/letter/a/3ab097/32.png) [@AlSharif](https://forum.ghost.org/u/AlSharif)\
**Post date:** [November 29, 2021, 3:09pm UTC](https://forum.ghost.org/t/ghost-tips-tricks-2-ghost-admin-right-to-left-rtl-support/14357/20 "2021-11-29T15:09:34Z")

</div>

Thanks Ahmad,  
I applied the snippet you shared and it works fine however I want to use  
Arabic digits not Hindi. Is there a way to modify it ?

---

<div class="post-metadata">

**Author:** ![ahmadajmi](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ahmadajmi/32/23173_2.png) [@ahmadajmi](https://forum.ghost.org/u/ahmadajmi)\
**Post date:** [December 6, 2021, 9:38am UTC](https://forum.ghost.org/t/ghost-tips-tricks-2-ghost-admin-right-to-left-rtl-support/14357/21 "2021-12-06T09:38:20Z")

</div>

In the Ghost admin area or the Casper theme?

To be on the same page, which numbers system do you mean, 123 or ١٢٣?

The numbers in the admin are (123). In Casper or any theme, If you changed the site language setting to `ar`, numbers should be (١٢٣).

[Next page](https://forum.ghost.org/t/ghost-tips-tricks-2-ghost-admin-right-to-left-rtl-support/14357.md?page=2)