How to change the orange brand color of Dawn theme

Hi!

I’m trying to change the orange brand color of the Dawn theme.
I have changed the color code in line 2 of: assets/css/general/basics.css
I have then compressed it to a zip and uploaded. But it doesn’t work. It’s still orange. What am I doing wrong?

Thanks in advance.
Michell

You need to run yarn css after making changes, and then run yarn zip. Very similar to the development process

Thanks for the advice, but I’m afraid I have no idea what that means. Could you please explain it? (I’m using ghost pro)
Michell

I have the same issue and am using Ghost Pro, so not comfortable working in the command line. Is there another way of customizing theme’s for Ghost Pro?

You basically need to follow the instructions in Github to set up a development environment so you can build the css. Here’s an easier option - add this snippet to your Code Injection Head:

<style>
/* any css you want goes here */
:root {
  --brand-color: #333; /* put your brand color here */
}
</style>
2 Likes

Thank you so much!

I would love to learn more about setting up a development environment, but I’m too much of a novice to decipher the language of Github. It’s a bit like when you sit next to engineers at a dinner party… It’s the “mechanic mindset” and it tends to exclude those of us not blessed with it. We need a little nudging to find our way. :slight_smile:

The way I understand it I have to download three different programs to just change a little code and compile a new version of a theme…? Is that correct? It seems very complicated.

Anyway, will have a look at it. And again, thanks for the code snippet.

Michell

It worked like a charm.
One more thing, though, to clarify my understanding.
I tried to do the same for changing the width of the cover image by pasting this little code snippet in too:

<style>
.cover-icon-image {
width: 200;
}
</style>

It worked fine to begin with, but then the theme sort of went back to where it was to begin with. I don’t understand why. Is there a limit to how many times one can change a code injection?

There shouldn’t be any limit :slight_smile: You might want to check in incognito to make sure you’re not looking at any stale data.

Re: your development question, you need 2 main things - node.js, and yarn. Node.js is a programming/scripting language that is heavily used by Ghost, and yarn is a tool for node.js to install third-party dependencies. The reason you need these is because the css is written in multiple parts (as you might have seen), and there’s a build step to squoosh them together and optimize it. I prefer using a package manager to install software - for Windows, there’s scoop or chocolatey, for Mac, there’s homebrew, and Linux has one preinstalled

1 Like

Thanks again so much for taking your time to explain. Will have a look at it.
:slight_smile:

1 Like

Btw. I figured out my mistake in above code snippet. Somehow I must have managed to delete the “px” after the numerical value.

Should have been:

.cover-icon-image { width: 200px; }

Works splendid now. :slight_smile:

1 Like

I find the instructions hard to do. I changed my blog’s brand color in assets/css/general/basics.css and in assets/built/screen.css.

The colors work fine at blog.coulf.com.

You’ll have to use “Yarn” through terminal / CLI to watch the files and later on build your distribution zip. Yes, it may be difficult for some. Hope Ghost can put up a set of documents to help newbies with installing Yarn/Gulp/Node locally.