Do themes allow controlling ghost/core/frontend css settings?

Themes
1

Newbie here.

I have been successfully customizing my theme css configurations either by editing assets/css/screen.css or css files in /node_modules/@tryghost/shared-theme-assets/assets/css/v2. I believe the way it works is that my edits overwrites certain defaults.

However, for example if I want to change the color or size of the toggle open/close button which seems to be defined in ghost core frontend code (link to code).

image
image2148Ă—348 72.7 KB

adding

.kg-toggle-heading-svg {
    color: rgb(255,0,0);
    width: 6px;
}

to screen.css or cards.css does not seem to work.

Is there a way to configure these css settings that is outside the theme css files?

2

There is no need to change Ghost or theme core files; instead, you can use Code Injection.

1 Like
3

Thank you, appreciated!

4

You shouldn’t change anything in the node_modules or core folders, they will be overwritten every time you upgrade.

Docs for changing card CSS can be found under the “Editor css” section here

If the changes are small then you can also use code injection to override certain styles which may be simpler than a full custom theme.

1 Like
5

Thank you Kevin. I will do things proper way from then on :) .