Royce Documentation

Theme Installation

To install Royce on your Ghost site, follow the steps:

1. Log in to your Ghost Admin at yoursite.com/ghost.
2. In the left sidebar, go to Settings → Theme.
3. Click on Change theme.
4. Click on Upload theme.
5. Drag and drop your theme’s .zip file, or click to browse and select it.
6. Once the upload is complete, click Activate to apply the theme immediately, or Close to activate it later.

---

Getting Started

Uploading a Favicon

To add a favicon:

1. Navigate to Settings → Design & branding in your Ghost Admin.
2. Click on Customize.
3. Click Upload icon next to Publication icon.
4. Save changes.

---

Uploading a Publication Logo

To add a logo:

1. Navigate to Settings → Design & branding in your Ghost Admin.
2. Click on Customize.
3. Click Upload logo next to Publication logo.
4. Save changes.

Instead of publication logo you can display your profile image. To add a profile image:

1. Navigate to Settings → Design & branding in your Ghost Admin.
2. Click on Customize.
3. Switch to the Theme tab.
4. Upload the Sidebar avatar image.
5. Fill the Sidebar avatar alt text field.
6. Save changes.

If neither publication logo nor profile image was added, the theme shows the site title.

---

Uploading a Publication Cover

The publication cover image is displayed in the background of the error pages.

To add a publication cover:

1. Navigate to Settings → Design & branding in your Ghost Admin.
2. Click on Customize.
3. Click Upload cover next to Publication cover.
4. Save changes.

---

Adding Navigation

The theme supports primary and secondary navigation. Primary navigation is displayed in the sidebar, while the secondary navigation is displayed in the site footer.

To set up navigation:

1. Go to Settings → Navigation in your Ghost Admin.
2. Click on Customize.
3. Add your navigation items by entering a page name in the label field and a destination URL in the URL field.
4. Once finished, click Save.

---

Adding Social Media Links

The social media links are displayed in the sidebar of the theme.

To add Facebook and X links:

1. Navigate to Settings → Social accounts in your Ghost Admin.
2. Enter the URLs of your Facebook and X profiles.
3. Save changes.

To add Instagram, Bluesky, LinkedIn, and YouTube links:

1. Navigate to Settings → Design & branding in your Ghost Admin.
2. Click on Customize.
3. Switch to the Theme tab.
4. Enter the URLs of your Instagram, Bluesky, LinkedIn, and YouTube profiles.
5. Save changes.

All other social media links can be added manually in the social-links.hbs file located in the partials folder of the theme. For instance, if you want to add the link to your GitHub account use the following code:

<a href="GITHUB_LINK" target="_blank" rel="noopener" aria-label="GitHub">{{> "icons/github"}}</a>

To see the available icons, please check the /partials/icons folder of the theme.

---

Editing Hero Section

The hero section is displayed on the home page.

To edit the hero section text:

1. Navigate to Settings → Design & branding in your Ghost Admin.
2. Click on Customize.
3. Switch to the Theme tab.
4. Fill in the Hero text field.
5. Save changes.

---

Featured Posts

Featured posts appear on the homepage just below the hero section, giving them extra visibility. To highlight a post, simply mark it as “featured” in its settings. You can feature up to three posts at a time.

---

Creating Landing Page

Ghost allows you to remove the title and feature image from a page. Then, using Header and other cards you can create a unique look for your pages without having to know how to code.

To hide the title and feature image from a page, open the Page Settings and turn off the Show title and feature image toggle.

---

Members

Ghost members feature allows you to turn your site into a membership business with member signup, paid subscriptions and email newsletters.

If members feature is enabled on your site, the theme displays Subscribe and Sign in links in the sidebar and the Subscribe box above the footer. Both, sidebar links and subscribe box button, open the Ghost members portal.

If you wish, you can enable the labels on the posts indicating the post access level (Free or Paid). To do this:

1. Navigate to Settings → Design & branding in your Ghost Admin.
2. Click on Customize.
3. Switch to the Theme tab.
4. Select the option from the Post access labels dropdown.
5. Save changes.

---

Enabling Disqus Comments

Royce supports Ghost native or Disqus comments.

To enable Ghost native comments:

1. Navigate to Settings → Access in your Ghost Admin.
2. Select the suitable option from the Who can comment on posts? dropdown.
3. Save changes.

To enable Disqus commenting:

1. Navigate to Settings → Design & branding in your Ghost Admin.
2. Switch to the Theme tab.
3. Turn on Enable Disqus and add your shortname in the Disqus shortname field.
4. Save changes.

---

Syntax Highlighter

Royce comes with the Prism syntax highlighter to automatically highlight code blocks in your posts.

To make the syntax highlighter work, type the triple backticks ``` in the post editor, click enter, and add the language identifier in the Language field.

By default, the supported languages include: markup, CSS, C-like, JavaScript. If you need to support more languages, visit http://prismjs.com/download.html, select the languages you need and download the JS file. Replace the Prism code in the assets/js/post.js file of the theme with the contents of the file you downloaded.

---

Editing Copyright Information (Footer)

You can edit the copyright information in Ghost Admin.

1. Navigate to Settings → Design & branding in your Ghost Admin.
2. Click on Customize.
3. Switch to the Theme tab.
4. Enter the text in the Copyright text field.
5. Save changes.

---

Adding Google Analytics

To add Google Analytics to your site, please follow the Google Analytics Integration guide by Ghost.

---

Theme Customization

Changing Color Scheme

Royce is available in light and dark color schemes. To change the theme color scheme:

1. Navigate to Settings → Design & branding in your Ghost Admin.
2. Click on Customize.
3. Switch to the Theme tab.
4. Select the option from the Color scheme dropdown.
5. Save changes.

Changing Accent Color

To change the theme accent color:

1. Navigate to Settings → Design & branding in your Ghost admin.
2. Switch to the Brand tab.
3. Choose your color.
4. Save changes.

---

Changing Posts Per Page Number

You can set the number of post displayed per page in the package.json file of the theme. The default post number is set to 8:

"config": {
    "posts_per_page": 8
}

---

Theme Translation

The Royce theme is ready for translations. You can find the default file in the locales folder. Copy locales/en.json to locales/[language_code].json where “language_code” must be replaced with a valid code. You can edit the renamed translation file with any plain text editor.

Even if your site is in English, you can customize any theme texts by simply editing the default English file ( locales/en.json ), without modifying the theme templates.

You can find more information on how to translate the theme in Ghost documentation.

---

Adjusting Style

To customize the theme style, use the Code Injection tool and place your CSS rules in the Site Header field.

For instance, to adjust the site title size:

1. Navigate to Settings → Code injection in your Ghost admin.
2. Click on Open.
3. Add the necessary CSS rules to the Site header field.
4. Save changes.

---

Credits

• Karla font: https://fonts.google.com/specimen/Karla
• Crimson Text font: https://fonts.google.com/specimen/Crimson+Text
• Reframe.js plugin: https://github.com/yowainwright/reframe.js
• Simple Icons SVG icons: https://simpleicons.org/
• Prism plugin: https://prismjs.com/
• Simple Lightbox plugin: https://github.com/andreknieriem/simplelightbox

---

Support

The documentation included provides all the information needed to get the theme installed and customized. However, if you have any questions you can email us, and we will be happy to help you.

If you have any bug reports, or feature requests, please let us know!