Back to Changelogs

Krabi Changelog

Theme version: 1.1.9 — 27 September 2022 Documentation

Back Up Your Current Theme First

Please backup your current theme before updating to a new version.

  • Log in to your Ghost admin
  • Go to Settings > Design > Change theme > Advanced
  • Download your active theme

Theme Updating

If you made no changes to your current theme files, download the latest theme version and upload it to your website—no need to worry about updating the files in the following steps.

First, download the new theme version from the theme update email. If you lost the email or the download link, click here for more details.

To update your current theme, copy and replace the Changed Files below from the new theme version to your theme.

In case of any listed Deleted Files, safely remove the files from your theme.

If any New Files are listed, copy the files to your theme with the same file path.

Copying a file from the new version to your theme will override your file.

Redo your customizations only if that file receives an update.

If you did CSS customizations in Code Injection, there is no need to worry about these unless I mention any CSS changes.

Once finished, zip your theme files, and upload the final zip file to your Ghost website.


Watch the following short video for a quick tutorial.

I always recommend updating your theme to the latest theme version to avoid future Ghost compatibility and API depreciation issues. Also, it will be easier to update to future theme updates, too.

If you missed updating a version, for example, your current theme is 1.0.0, and the latest one is 1.0.2, does it mean you need the middle 1.0.1 version to update your current version? No. Instead, use the newest version (1.0.2) as a base for the 1.0.1 changelog. The most recent version has the latest updated files. So, go through the 1.0.1 changelog, and apply the file changes from 1.0.2.

Troubleshooting

In case you encounter any issue while updating the theme, do/double-check the following:

  • Deactivate and activate the theme again
  • Upload the new/fresh theme version to see if the problem is from your theme or the new version
  • Restart Ghost
  • Make sure you uploaded the routes.yaml file if it is updated in the new theme version
  • Make sure you updated all the mentioned files in the changelog below

Version: 1.1.9 — 27 Sep 2022

Please make sure you have the latest version of Ghost before upgrading.

  1. Added Ghost Native Comments (docs)
  2. Dropdown menu support (docs)
  3. General design and typography fixes/improvements

Changed files

Big update. I suggest uploading the latest version instead of messing with files. Check the updating process first paragraph.

package.json
gulpfile.js
assets/js/app.js
assets/js/app.min.js

partials/compiled/inline-css.hbs
partials/compiled/inline-css-rtl.hbs

post.hbs
partials/header.hbs
partials/navigation.hbs

/partials/comments/

(Copy all the `/partials/comments/` folder inside your /partials/ folder.)

/locales/

(Copy all the `/locales/` folder and override your current theme one.)

/assets/sass/

(Copy all the `/sass/` folder and override your current theme one.
Too many files changed here, so it’s easier to do this instead of
doing it one by one.)

New files

partials/drop-down-js.hbs

Version: 1.1.8 — 22 July 2022

New

  1. Added support for the new Ghost Native Search.

Changed files

package.json
partials/compiled/inline-css-rtl.hbs
partials/compiled/inline-css.hbs
partials/header.hbs

Version: 1.1.7 — 30 May 2022

Fix

  1. Compatibility issues with the recent Ghost 5.1.0 update

Changed files

package.json
routes.yaml

/locales/

(Copy all the `/locales/` folder and override your current theme one.)

Deleted files

members/account.hbs
members/signin.hbs
members/signup.hbs
members/subscribe.hbs
partials/member-plans.hbs

Version: 1.1.6 — 24 May 2022

New

  1. Ghost 5.0 support
  2. Updated Ghost Deploy Action

Changed files

package.json
page.hbs

partials/page-upgrade-cta.hbs
partials/post-upgrade-cta.hbs

.github/workflows/deploy-theme.yml

The .github/workflows/deploy-theme.yml file is for the GitHub Deploy Action. It is part of the theme, but since the folder starts with a dot ( .github ) it might be hidden on your computer. No worries if you are not using GitHub for theme deployment.)


Version: 1.1.5 — 25 March 2022

New

  1. Support all the new Ghost Editor Cards
  2. Krabi is now using the Ghost Portal and the new Tiers for membership. Clicking the header Login in and Subscribe buttons will show up the Portal instead of going to the Login or Membership pages.
  3. New theme settings for social media links. Now you can add Instagram, YouTube, Pinterest, YouTube, and LinkedIn links from the admin instead of editing the theme. Documentation.
  4. Added option to show Table of Contents in individual post or page using a hashtag. Documentation.

Fixs

  1. Removed the extra . in the bookmark card

Changed files

bower.json
gulpfile.js
package.json

assets/js/app.js
assets/js/app.min.js
assets/js/ghosthunter.js

post.hbs
page.hbs
partials/header.hbs
partials/page-upgrade-cta.hbs
partials/post-upgrade-cta.hbs
partials/sidebar-social-icons.hbs
partials/compiled/inline-css-rtl.hbs
partials/compiled/inline-css.hbs

/locales/

(Copy all the `/locales/` folder and override your current theme one.)

Version: 1.1.4 — 22 Nov 2021

New

Added multi-author support. If a post has multi authors, they will be visible in homepage post cards and single posts.

Krabi multi-authors support


Fixs

  1. Scroll to Top button English translation
  2. Removed JavaScript console log for search

Changed files

package-lock.json
package.json

assets/css/style-min-rtl.css
assets/css/style-min.css

assets/sass/components/_post-card.scss
assets/sass/components/_post-header.scss

partials/compiled/inline-css-rtl.hbs
partials/compiled/inline-css.hbs

post.hbs

partials/post-card.hbs
partials/post-header.hbs
partials/scroll-to-top.hbs

Version: 1.1.3 — 8 Nov 2021

New

  1. Support for Ghost Accent color. Now, you can change the theme Accent color from the Ghost admin instead of using CSS variables. Accent color used throughout the theme in buttons background, quotes border,… Change the Accent color from the admin Settings > Design > Brand > Accent color. Krabi demo Accent color is: 5869DA (the blue color). Ghost Accent Color Setting

  2. Table of Contents. Documentation Krabi Content Notes

  3. Content Notes. Documentation Krabi Content Notes

  4. Scroll to top button. Documentation Krabi Scroll to Top Button

  5. Dropcaps typography styles. Documentation Krabi dropcaps typography styles

  6. Added a gradient shadow effect to the article content if the reader has no content access and the Preview Card is used. Thanks, Isabelle & Allan. Krabi Content Gradient


Improvements

  1. Change the subscribe form data-members-form attribute from subscribe to signup. This change will make the Welcome page – which you can set from Settings > Membership – work if you want to redirect people to a custom page after they subscribe.

  2. Added responsive support for Descript embedded videos.

  3. General design improvements. I spent a lot of time working with small details to shape the design, and the theme now looks much shiny.

  4. Updated Node dependencies modules


Accessibility

  1. Added ‘Skip to content’ link—an accessibility enhancement for site navigation with a keyboard. When using a keyboard to navigate the website, the ‘Skip to content’ link will enable you to skip the navigation and go directly to the main content area. This is useful if people are only using the keyboard or using a screen-reader to navigate your website. Krabi Content Gradient

  2. Improve the heading structure of sidebar widgets.

  3. Remove redundant title attribute from the home page and sidebar postcards date and the post page date.

  4. Remove the redundant ALT attribute from the featured image on the post page to avoid confusion with the adjacent post title. This will only happen if there is no custom caption. If custom caption text is set, it will be used.

  5. Remove social media link’s target attribute for opening links in a new tab. Let people decide how they want to open the links.

  6. Add screen readers alternative text to social icons.

  7. Stop no-essential motion if a reader has requested the operating system to minimize the amount of motion it uses. Mozilla: prefers-reduced-motion


Fixes

  1. The post call to action card for the membership upgrade copy. Instead of showing one message for members and paid posts, now it shows a different message if the post is for members only or if it is for paid members only. Thanks, Bruce!

  2. Add a unique page title to the membership pages – (Login, Subscribe, and Account) – instead of the website name.


Changed files

bower.json
gulpfile.js
packagelock.json
package.json
.jshintignore

assets/css/styleminrtl.css
assets/css/stylemin.css

assets/js/app.js
assets/js/app.min.js
assets/js/ghosthunter.js

index.hbs
page.hbs
post.hbs
tag.hbs
error.hbs
author.hbs
default.hbs
custom-authors.hbs
custom-tags.hbs
default-wide.hbs

members/account.hbs
members/signin.hbs
members/signup.hbs
members/subscribe.hbs

partials/card-author-mini.hbs
partials/card-author.hbs
partials/card-tag.hbs
partials/commentbox.hbs
partials/commento.hbs
partials/disqus.hbs
partials/fonts.hbs
partials/footer.hbs
partials/head.hbs
partials/header.hbs
partials/member-plans.hbs
partials/page-upgrade-cta.hbs
partials/post-card.hbs
partials/post-header.hbs
partials/post-upgrade-cta.hbs
partials/related-posts.hbs
partials/search-form.hbs
partials/search-icon.hbs
partials/share.hbs
partials/sidebar-authors.hbs
partials/sidebar-featured-posts.hbs
partials/sidebar-social-icons.hbs
partials/sidebar-subscribe-form.hbs
partials/subscribe-form.hbs
partials/tags-list.hbs
partials/teaser.hbs
partials/compiled/inline-css-rtl.hbs
partials/compiled/inline-css.hbs

/assets/sass/

(Copy all the `/sass/` folder and override your current theme one.
Too many files changed here, so it’s easier to do this instead of
doing it one by one.)

/locales/

(Copy all the `/locales/` folder and override your current theme one.)

New files

partials/post-subscribe-form.hbs
partials/scroll-to-top.hbs
partials/skip-to-content.hbs
partials/subscribe-box-icon.hbs
partials/table-of-contents.hbs

Class name changes

 [-] u-bg-white → u-bg-secondary
   ↳ You might be using this if you added a sidebar widget so change it.

CSS color variables name changes

Consider these changes if you are using Code Injection to change the theme color scheme with CSS variables. See below the new color variables.

[-] --color-white → --color-text-white

[-] --color-text → --color-text-primary

[-] --color-gray → --color-text-secondary

[-] --color-error → --color-text-error

[-] --color-success → --color-text-success

[-] --color-border → --color-border-primary

[-] --bg-gray → --color-background-primary

[-] --bg-white → --color-background-secondary

Old CSS variables

:root {
 --color-brand:   #5869DA;
 --color-white:   #FFFFFF;
 --color-dark:    #000C2D;
 --color-text:    #000C2D;
 --color-gray:    #687385;
 --color-error:   #CC3C64;
 --color-success: #07815C;
 --color-border:  #EAECEE;

 --bg-gray:         #F5F7F9;
 --bg-gray-darker:  #EDEFF1;
 --bg-dark:         #12245A;
 --bg-white:        var(--color-white);

 --color-code-inline: var(--color-text);
 --bg-tag-list:      linear-gradient(to left, var(--bg-white), rgba(255, 255, 255, 0));
}

[⇄] New CSS variables

With this new update to the CSS variables and the core CSS code, it’s now easier to change the whole theme colors dynamically and for all elements. New updates are coming in the following theme updates with new and ready color schemes; feel free to add your own and let me know if you have any feedback.

:root {
 --color-text-primary:   #000C2D;
 --color-text-secondary: #687385;
 --color-text-white:     #FFFFFF;
 --color-text-error:     #A01F1F;
 --color-text-success:   #085E38;

 --color-background-primary:   #F5F7F9;
 --color-background-secondary: #FFFFFF;
 --color-background-info:      #F3F6FF;
 --color-background-success:   #ECFDF5;
 --color-background-warning:   #FFFAF2;
 --color-background-danger:    #FDF4F4;

 --color-border-primary:  #DFE3E9;
 --color-border-info:     #3366FF;
 --color-border-success:  #52BD95;
 --color-border-warning:  #FFB020;
 --color-border-danger:   #D14343;

 --color-subscribe-form-icon: #021637;
 --color-background-subscribe-form: var(--color-text-primary);
}

[⇄] Removed CSS variables

I removed the brand color and now you can set it from the Ghost admin.

  --color-brand: #5869DA;

Version: 1.1.2 — 28 July 2021

[+] New: Added support for the feature image caption released in Ghost v4.9.0.

[+] Improve: Input field text color contrast.

[+] Improve: Added background to content images/gallery instead of a white background. A grey background color will be visible instead of white space before the images load to improve the loading experience.


Changed files

package-lock.json
package.json

assets/css/style-min-rtl.css
assets/css/style-min.css

assets/sass/components/_gallery.scss
assets/sass/components/_kg-card.scss
assets/sass/components/_post-header.scss
assets/sass/elements/_input.scss

partials/compiled/inline-css-rtl.hbs
partials/compiled/inline-css.hbs

partials/post-card.hbs
partials/post-header.hbs
partials/teaser.hbs

Version: 1.0.6 — 27 Jan 2022

[+] Update: Gulp/Sass modules packages.

[+] Fix: Change sidebar RSS icon URL from /rss to /rss/ to avoid redirects issues.

[+] Fix: Remove duplicate subscribe from showing on a small screen on the article page. When viewing the article page on a small screen, the sidebar will be under the article content. Instead of having two subscription forms near each other, this update hides the article in small screens and only keeps the sidebar form.


Changed files

gulpfile.js
package-lock.json
package.json

assets/css/style-min-rtl.css
assets/css/style-min.css

assets/js/app.min.js

assets/sass/components/_post.scss

partials/compiled/inline-css-rtl.hbs
partials/compiled/inline-css.hbs
partials/pagination.hbs
partials/sidebar-social-icons.hbs

Version: 1.1.0 — 22 March 2021

❗ Please update to Ghost 4 first and then apply this version.

[+] New: Ghost 4.0 Support. Fixing all compatibility issues. Support for the new Public Review content card.

[+] Fix: Sidebar Author card image and content alignment in Firefox

[+] Update: The theme is now using Portal notifications instead of the built-in ones. In Ghost 4.0, membership becomes an essential part of Ghost and no longer a beta feature. Accordingly, the login/subscribe, and all membership browser notifications come from Portal whether Portal is enabled or not. So, when a person logins to the website, the theme will show a message, and Portal will show one. Using Portal notifications ensures all notification messages will be up to date with Ghost membership updates, eliminate the conflict while login in, subscribe, or update a person’s information.

Ghost CMS Notifications


Deleted Files

partials/notifications.hbs
assets/sass/components/_notifications.scss

Changed files

package-lock.json
package.json
page.hbs
post.hbs
error.hbs
default-wide.hbs
default.hbs

assets/css/style-min-rtl.css
assets/css/style-min.css

assets/js/app.js
assets/js/app.min.js
assets/js/ghosthunter.js

assets/sass/components/__all.scss
assets/sass/components/_content.scss
assets/sass/components/_card-author-mini.scss

locales/ar.json
locales/da.json
locales/de.json
locales/en.json
locales/es.json
locales/fi.json
locales/fr.json
locales/it.json
locales/nl.json
locales/pt.json
locales/ro.json
locales/tr.json

members/account.hbs
members/signin.hbs
members/signup.hbs

partials/compiled/inline-css-rtl.hbs
partials/compiled/inline-css.hbs

partials/footer.hbs
partials/header.hbs
partials/loop.hbs
partials/member-plans.hbs
partials/page-upgrade-cta.hbs
partials/post-card.hbs
partials/post-upgrade-cta.hbs
partials/sidebar-authors.hbs
partials/sidebar-featured-posts.hbs
partials/sidebar-subscribe-form.hbs

VERSION - 1.0.9: Release on 05 March 2021

[+] NEW: Romanian translation. Thanks, Daniel!

[+] Improve: Italian translation. Thanks to Federico!

[+] Improve: Turkish email translation

[+] Improve: Bookmark card and table design

[+] Added outline to buttons for Accessibility

[+] Improve: Source code blocks are now responsive. No text breaks, and now scrollable. Thanks, Ben!

[+] Fix: Sidebar subscribe widget title word breaking for long words

[+] Fix: Author Twitter icon alignment


New Files

locales/ro.json

New Files

package.json
package-lock.json

assets/css/style-min-rtl.css
assets/css/style-min.css

assets/sass/components/_bookmark-card.scss
assets/sass/components/_card-author.scss
assets/sass/components/_content.scss
assets/sass/components/_subscribe.scss
assets/sass/elements/_code.scss
assets/sass/elements/_tables.scss
assets/sass/components/_buttons.scss

locales/it.json
locales/tr.json

partials/compiled/inline-css-rtl.hbs
partials/compiled/inline-css.hbs

VERSION - 1.0.8: Release on 16 December 2020

[+] Update: ISO code for the Dutch language in search

[+] Update: Rename the Dutch language translation file name to nl.json instead of du.json

[+] Fix: Fixed search date. Now using the published date instead of the created date. Thanks, Klevin!

[+] Fix: Missing translation for the sidebar form Newsletter heading

[+] Fix: Missing translation for the membership plans Free word

[+] Fix: Missing Arabic translation for header Log out word and other grammar improvements


New Files

locales/nl.json

Deleted Files

locales/du.json

Changed files

.jshintignore
assets/js/app.min.js
assets/js/ghosthunter.js
gulpfile.js
locales/ar.json
locales/da.json
locales/de.json
locales/en.json
locales/es.json
locales/fi.json
locales/fr.json
locales/it.json
locales/pt.json
locales/tr.json
package-lock.json
package.json

VERSION - 1.0.7: Release on 3 December 2020

[+] Improve: General design improvements. Small details matter

[+] Improve: Typography improvements for content elements (UL, OL)

[+] Improve: Responsive images performance

[+] Improve: Inter font loading performance. Now, the font is served from Google Fonts CDN instead of loading the font locally

[+] Improve: Added explicit width and height attributes to images to avoid Cumulative Layout Shift

[+] Improve: Membership text copywriting improvements. For example, Log in instead of Log In

[+] Improve: Used CSS max-height to control the logo image instead of max-width. This makes resizing the logo more flexible. Consider reviewing your logo size after this update. Docs: https://aspirethemes.com/docs/krabi#customize-logo-size

[+] Improve: Search result post date to be capitalized instead of uppercase. Consistency with other theme date format

[+] Update: NPM packages

[+] Update: The tooltips CSS package to use the new repo (@primer/css)

[+] Update: Deploy Ghost Theme Github action config file

[+] Fix: Translation for the Newsletter word in the site footer

Around 15% to 20% overall performance increase with Google Page Speed


New Files

partials/fonts.hbs

Deleted Files

assets/fonts/inter/Inter-italic.var.woff2
assets/fonts/inter/Inter-roman.var.woff2
assets/sass/settings/_fonts.scss

Changed files

README.md
.github/workflows/deploy-theme.yml
assets/css/style-min-rtl.css
assets/css/style-min.css
assets/js/app.js
assets/js/app.min.js
assets/sass/components/_author.scss
assets/sass/components/_bookmark-card.scss
assets/sass/components/_card-tag.scss
assets/sass/components/_content.scss
assets/sass/components/_logo.scss
assets/sass/components/_post-card.scss
assets/sass/components/_post-header.scss
assets/sass/components/_search.scss
assets/sass/components/_social-icons.scss
assets/sass/components/_tags-list.scss
assets/sass/components/_teaser.scss
assets/sass/settings/__all.scss
assets/sass/settings/_colors.scss
assets/sass/settings/_fonts.scss
assets/sass/settings/_grid.scss
assets/sass/settings/_type.scss
assets/sass/vendor/__all.scss
author.hbs
locales/ar.json
locales/da.json
locales/de.json
locales/du.json
locales/en.json
locales/es.json
locales/fi.json
locales/fr.json
locales/it.json
locales/pt.json
locales/tr.json
members/signin.hbs
members/signup.hbs
package-lock.json
package.json
partials/card-author-mini.hbs
partials/card-author.hbs
partials/card-tag.hbs
partials/compiled/inline-css-rtl.hbs
partials/compiled/inline-css.hbs
partials/footer.hbs
partials/head.hbs
partials/header.hbs
partials/member-plans.hbs
partials/page-upgrade-cta.hbs
partials/post-card.hbs
partials/post-header.hbs
partials/post-upgrade-cta.hbs
partials/sidebar-social-icons.hbs
partials/teaser.hbs

VERSION - 1.0.6: Release on 14 October 2020

[+] New: Turkish translation

[+] Improve: Background color for zoomed images

[+] Improve: Code quality

[+] Improve: Table design by adding a white background to be more visible


Changed files

assets/css/style-min-rtl.css
assets/css/style-min.css
assets/sass/components/_header.scss
assets/sass/components/_search.scss
assets/sass/elements/_code.scss
assets/sass/elements/_input.scss
assets/sass/elements/_tables.scss
assets/sass/settings/_colors.scss
assets/sass/vendor/_image-zoom-custom.scss
package-lock.json
package.json
partials/compiled/inline-css-rtl.hbs
partials/compiled/inline-css.hbs

New files

locales/tr.json

VERSION - 1.0.5: Release on 24 September 2020

[+] Improve: Content typography and embedded iframe improvements

[+] Improve: Remove white background from Twitter and Instagram embeds

[+] Improve: Search results typography style

[+] Improve: Commento commenting box design improvement

[+] Fix: Commento MARKDOWN preview styling issues


Changed files

assets/css/style-min-rtl.css
assets/css/style-min.css
assets/sass/components/_content.scss
assets/sass/components/_kg-card.scss
assets/sass/components/_search.scss
assets/sass/elements/_blockquote.scss
assets/sass/vendor/__all.scss
package-lock.json
package.json
partials/commento.hbs
partials/compiled/inline-css-rtl.hbs
partials/compiled/inline-css.hbs

Changed files

assets/sass/vendor/_commento.scss

VERSION - 1.0.4: Release on 02 September 2020

[+] Fix: Gulp zip script to include hidden files that are used in and help in development mode. Thanks, Daniel!

[+] Improve: Search close icon design. Thanks, Matthew!

[+] Improve: Add loading indicator for Subscribe buttons. This will improve the people experience as the connection between Ghost and Stripe might take a second. This will also remove the confusion that clicking the button didn’t work from the first time. Thanks, Angus!


Changed files

assets/css/style-min-rtl.css
assets/css/style-min.css
assets/sass/components/_buttons.scss
assets/sass/components/_kg-card.scss
assets/sass/components/_post-card.scss
assets/sass/components/_search.scss
assets/sass/elements/_input.scss
gulpfile.js
package-lock.json
package.json
partials/compiled/inline-css-rtl.hbs
partials/compiled/inline-css.hbs

VERSION - 1.0.3: Release on 11 August 2020

[+] Fix: Tags page tag card title margin-bottom issue

[+] Improve: Subscribe page layout width if the reader is logged in.

[+] Improve: Hide footer secondary navigation title if there is no secondary navigation items


Changed files

assets/css/style-min-rtl.css
assets/css/style-min.css
assets/sass/components/_card-tag.scss
members/subscribe.hbs
package-lock.json
package.json
partials/card-tag.hbs
partials/compiled/inline-css-rtl.hbs
partials/compiled/inline-css.hbs
partials/footer.hbs
partials/header.hbs

VERSION - 1.0.2: Release on 20 July 2020

[+] Improve: Markup for posts page

[+] Improve: Post text readability

[+] Improve: Added blog URL to the authors sidebar link

[+] Improve: Comments section design

[+] Improve: Show the featured posts section only if there are featured posts exist

[+] Fix: Author image in the author card when the image does not exist


Changed files

assets/css/style-min-rtl.css
assets/css/style-min.css
assets/sass/components/_content.scss
assets/sass/components/_post-card.scss
default-wide.hbs
default.hbs
package-lock.json
package.json
page.hbs
partials/card-author-mini.hbs
partials/card-author.hbs
partials/commentbox.hbs
partials/commento.hbs
partials/compiled/inline-css-rtl.hbs
partials/compiled/inline-css.hbs
partials/disqus.hbs
partials/post-header.hbs
partials/sidebar-authors.hbs
partials/sidebar-featured-posts.hbs

VERSION - 1.0.1: Release on 29 June 2020

[+] Fix: Bookmark card text underline.

[+] Fix: Post date issue. Thanks Maxence!

[+] Fix: Theme CSS validation issue.

[+] Improve: Added French translation to the Latest word in the tags menu.


Changed files

assets/css/style-min-rtl.css
assets/css/style-min.css
assets/sass/components/__all.scss
assets/sass/components/_bookmark-card.scss
assets/sass/components/_gallery.scss
assets/sass/components/_kg-card.scss
assets/sass/components/_subscribe.scss
assets/sass/components/_widget.scss
locales/fr.json
package-lock.json
package.json
partials/compiled/inline-css-rtl.hbs
partials/compiled/inline-css.hbs
partials/post-card.hbs
partials/post-header.hbs

VERSION - 1.0.0: Release on 15 June 2020

Initial Release

Support

Have any questions? I’m here to help.

Contact Ahmad
Ahmad Ajmi