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

2 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