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

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 .


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 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 code and paste it into the CSS window.

The final result will be like

Editor

Posts

Staff

Tags

Design

Code Injection

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. 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

Also, I started a Ghost Websites Inspiration series where share inspiring websites created with Ghost. I hope you can find it inspiring and useful too.


Stay safe!

Ahmad

3 Likes

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).

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

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?

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

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

Update: It seems like the CSS and Javascript Injection Chrome extension is no longer available. The User JavaScript and CSS extension will do the same job.

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 ?

In the extension settings, change your website URL by adding ghost/#/editor to it. I tested it with the User JavaScript and CSS extension I mentioned recently, and it works.

Thanks. But it brought back everything back to normal again

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

.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.

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!

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?

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

1 Like

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

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

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

It should be on the left side now.

In terms of what?

blogging and monetizing in arabic

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://alfarhan.ws/

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 ?

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 (١٢٣).

1 Like