Making file card customazible

Themes
1

Hey everyone. I’ve been dealing with an unpleasant issue here: Ghost’s file card blends with the our website’s theme, making it barely visible. I’ve tried changing its colour in the main css file, but couldn’t find anything. After manually adding kg-file-card attribute in the CSS file, i still couldn’t make it work. After reviewing the page code i noticed that file-card inherits it’s value from cards.min.css on the server which i have no access too affter downloading the template. Any idea how i can make the file-card customizable?

13123
13123674×785 38.8 KB

13124
13125

2

Docs for how to override the default styles are here :slightly_smiling_face: https://ghost.org/docs/themes/content/#editor-cards

3

For the file card, should it be like that?

"card_assets": {
    "exclude": ["file"]
}
4

Yep :+1: You can see the default CSS here if you want to copy that over to your theme before modifying to your needs.

5

Well, i added the exclude part in json file, plus added the default file card CSS to my main css file, but it’s still uses the cards.min CSS.

image
image696×213 5.78 KB

6

How are you making changes to your theme? If you’re making file changes directly rather than using the theme uploader you’ll need to restart Ghost for the exclusion to take effect.

7

I am using the theme uploader after making changes directly in theme’s files locally.

8

For the context, changes timeline:
1 Added cards_assets exclude in json
2 Copied file card css from the link you gave me
3 added that css in my style.css file (copy paster, no changes made)
4 uploaded the updated template through template uploader on the website

9

Which theme is this? Does it need to be processed with gulp perhaps?

10

I made numerous changes natively before, it all worked fine.

11

The very first bullet point here: https://themeforest.net/item/valkyrie-a-highly-visual-ghost-blog/22576630?gclid=Cj0KCQiAqOucBhDrARIsAPCQL1bvw0VWClUPjCHnJhcbR_GFb8qF-H5uVM-H-llqlfcNuY4L7yKEBz4aAiZJEALw_wcB# lists integration with Gulp. Gulp takes all the individual css files and converts them into one minimized css file. If you aren’t running gulp after editing CSS, that’s likely your problem, and consistent with making changes that don’t seem to show up. You can’t just zip the theme, you need to run gulp zip to have it rebuild the css first.

Here’s directions: How to update CSS in a Ghost theme

12

damn i feel so dumb for not checking if it uses gulp. thank you

1 Like