Quick CSS changes workflow?

Developer help
1

How can I make quick changes to CSS without having to re-zip and re-upload the theme?

  • I tried changing css/screen.css & css/global.css with no effect
  • I tried adding a built/custom.css file to see if updating that would reflect on the site

Ideally I would like to make changes in dev tools, copy to custom.css, upload and have those changes reflected on the site.

Please help by sharing your workflow.

  • What’s your URL? This is the easiest way for others to debug your issue
    https://news.sureconsult.ca/
  • What version of Ghost are you using? 2.19.3
  • What configuration? using a duplicate of casper I called hamlet… another famous ghost
  • What browser? N/A
  • What errors or information do you see in the console? none
  • What steps could someone else take to reproduce the issue you’re having?
2

I think your best bet is code injection via the admin interface - just add your styles between <style></style> tags :slight_smile:

3

Thanks Vika
In the end I got it working with the following in default.hbs:
<link rel="stylesheet" href="{{asset "built/custom.css"}}">

Then making changes & uploading just the built/custom.css seems to work well.

p.s. for others… my default.hbs now looks like this:
{{!-- Styles'n'Scripts --}}
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
<link rel="stylesheet" href="{{asset "built/custom.css"}}">

1 Like
4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.