Layout change from left to right and better language support

Using Ghost
1

Hey all,

Ghost is honestly increadible, but I’m having hard time writing in Hebrew and changing the layout from left to right (for example, moving the entire logo and header tabs fro, left to right).

I’ve seen some hold topics mentioning the same kind of issue, and there are many countries in the middle list that could use this platform to create great things, but it’s lacking these features.

Happy to hear what you think and discuss.

Thank you!

2

If you are using the Casper theme you can use the following CSS code for RTL layout. Copy and paste it into the Code Injection Site Header area.

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

For the Ghost admin, you can check out my recent topic about it Ghost Tips & Tricks #2 / Ghost Admin Right to Left (RTL) Support

3

Does the code injection feature work for the default Ghost amp template? It messes everything when I open my posts from Google results or when they are shared to twitter or facebook.

4

No. AMP doesn’t support most desktop-oriented JS or CSS so code injection isn’t pulled in because it would likely break AMP validation.

What you can do is override the default AMP template in your theme if you want to make changes to it.