Back to Changelogs

Krabi Changelog

Theme version: 1.1.4 — 22 November 2021 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 > Theme > Installed Themes
  • Download your active theme

Theme Updating

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

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

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

In case of any listed New Files, 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 to your file only if that file receives an update.

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

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.

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

[+] Fixs:

  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.1.1 — 05 July 2021  ------------

[+] 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

  Changed 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
  [====]

  [====] New 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
  [====]

  [====] New Files:
    ----
    NOTE: These are files are used in and help in development mode. Not adding them will not affect how the theme works in your blog. They will be invisible by default. If you are using Mac, press (Command + Shift + .) to show them. If you opened the theme in your code editor, you should see them fine.
    ----

    .editorconfig
    .gitignore
    .jshintignore
    .jshintrc
  [====]
  ------------  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
    post.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
  [====]

  [====] Deleted Files:
    assets/css/dark-min.css
    assets/css/dark-min-rtl.css
    assets/sass/components/_related.scss
  [====]
  ------------  VERSION - 1.0.0: Release on 15 June 2020  ------------
  [+] Initial Release

Your feedback is very welcome ♥

I’m open to your feedback and hear your experience about my themes and work. If you have a few minutes, please send your thoughts through this Google Form.

Thank you for your time!

Support

Have any questions? I’m here to help.

Contact Ahmad
Ahmad Ajmi