Skip to content
Download the Ghost Themes Bundle for only $149 — Use BUNDLE code for 10% discount 🔥

Add Right to Left (RTL) support to the Ghost CMS default Casper theme


Today, I want to share with you how to add Right to Left (RTL) support to the Ghost CMS default Casper theme. This is useful if you are writing in a language like Arabic or Hebrew for example and you want your visitors to view the articles and the blog in the right direction. This is the part two of the last post about Ghost Admin Right to Left (RTL) Support.

All you want to do is to copy and paste the following CSS code into the Code Injection Site Header area. Then click the Save button.

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

.site-nav-logo {
  margin-right: 0;
  margin-left: 32px;
}

.site-nav-left {
  margin-right: 0;
  margin-left: 10px;
}

.site-nav-left .nav li:last-of-type {
  padding-right: 0;
  padding-left: 20px;
}

.nav-post-title.dash {
  left: auto;
  right: -25px;
}

.site-nav-main .site-nav-left-wrapper:after {
  right: auto;
  left: 0;
}

.author-header-content {
  margin: 5px 30px 0 0;
}

.author-card .author-info {
  margin: 0 20px 0 0;
}

.subscribe-overlay button {
  margin: 0 15px 0 0;
}

.subscribe-form button {
  margin: 0 10px 0 0 ;
}

@media (min-width: 795px) {
  .post-card-large .post-card-content-link,
  .post-card-large .post-card-meta {
    padding: 0 40px 0 0;
  }
}

.post-card-byline-content {
  margin: 2px 6px 0 0;
}

.static-avatar {
  margin: 0 -6px 0 0;
}

.post-full-byline-content .author-list {
  padding: 0 0 0 12px;
}

.author-list {
  margin: 0 4px 0 0;
}

.post-full-content blockquote {
  border-left: 0;
  border-right: 3px solid #3eb0ef;
}

.site-footer-nav a {
  margin-left: 0;
  margin-right: 20px;
}

.site-footer-nav a:before {
  left: auto;
  right: -11px;
}
</style>

The final result will be like

Casper Right to Left Home page

Post

Casper Right to Left Post page

About

Casper Right to Left About page

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



Make a stunning Ghost blog.

Browse through a collection of beautiful, minimal, and functional Ghost themes and choose the perfect theme for you.

Browse themes →

I Make Ghost CMS Themes.

I’ve helped 1000+ people build fast, functional and beautiful Ghost blogs.

Choose from different Ghost Themes that suits you well. Or,

Choose a Ghost theme and get started. Or,

Get all themes for $149 →