Why I cannot modify CSS style in ANY theme?

Developer help
1

I saw the discussion regarding Casper theme’s CSS editing issues, but the link to the tutorial provided by @DavidDarnes returns 404.

But I noticed the same issue in other themes as well - for example in Atilla theme, I try to modify width property by changing its value from 100% to 50%:

.blog-cover {

    position: absolute;

    width: 50%;

    height: 100%;

    left: 0;

    top: 0;

    z-index: 5;

Yet when I refresh the page, no changes are visible. Also, when I inspect the page, the width value is back to 100%:

image

Can you please clarify how can i modify CSS properties?

2

Where are you getting the .blog-cover class selector from? As far as I can tell by looking at the demo site for the Attila theme, .blog-cover isn’t used anywhere in the HTML, so that would be why targeting that selector is not creating any changes on your site.

Note that different themes will use different classes, IDs etc. (the names of classes and IDs aren’t formally standardized and are simply chosen by whoever develops the theme) so you need to ensure that you find and target the correct selector when trying to modify CSS properties.

As an aside, you will occasionally find that you may need to use or find it useful to use !important when trying to override existing CSS e.g. width: 50% !important; however that would certainly not be the case here.

This will rather just be a case of finding and targeting the correct selector.

In the second screenshot you’ve attached

You can see in the top right style.css:1 - that’s telling you that this CSS is coming from your custom style sheet (and of course the 1 indicates that .blog-cover is on line 1). So by that, I mean, it’s not an indication that .blog-cover actually exists in the HTML of the Attila theme or its CSS.

To be honest though, I’m not entirely sure why it’s showing width: 100%; if you’ve set it to width: 50%; in your code injection… that’s a bit of an anomaly to me. I’m not an expert though.

Anyway, if you tell or show me which part of the Attila theme you are trying to change, I can help you find the correct selector and code to accomplish that goal.

3

In my case in order to see CSS changes I have to empty my browser cache before refreshing the page

4

Which means the CSS isn’t wrapped in <style>…</style> tags?

5

@Stromfeldt That would also be a factor, and good point! I didn’t notice that :crazy_face:

@paxas, your code in the Site Header section of the code injection page would need to be:

<style>
.blog-cover {
    position: absolute;
    width: 50%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 5;
}
</style>

These style tags tell browsers to treat that section of code as CSS.

However, that alone won’t solve the issue of not targeting the correct selectors. You are using the Atilla theme here, aren’t you?

6

hi @DonaldH

Yes, I’m using Attila theme and this .blog-cover property is found in /src/sass/style.scss file.

I chose to modify this property because it was highlighted when I was inspecting my site with Developer Tools in Mozilla.

I’m aware that there is another CSS file located in /assets/css/style.css but the contents of this file are not properly formatted - I assmue it is by design so that users won’t tinker with it.

Here is the fragment of /src/sass/style.scss file:

image
image1922×980 113 KB

And here is what i mean by saying that /assets/css/style.css is not properly formatted:

image
image1904×989 250 KB

7

I think the missing component in this issue is the tutorial itself. I’m not sure why it was taken down.

Many themes for Ghost are built using Gulp. Gulp is a tool for processing files, most commonly front-end files such as CSS and JavaScript. While Ghost can use CSS and JavaScript files without any modification sometimes these files can get a bit large, so breaking these files into smaller ones and letting Gulp merge them together can really help.

The large /assets/css/style.css file you’re seeing is what Gulp spat out. Files that end in .scss are most likely the source files for Gulp. These are the files you should edit. Casper has development instructions on how to work locally and edit the theme code:

Note: I would always recommend using code injection for minor CSS and JavaScript tweaks. It’s much easier to drop in minor tweaks than committing o editing the theme itself.

2 Likes
8

well well well well…

All I had to do was to run a “gulp sass” task, modify the “style.scss” and refresh the website.

I mean, how difficult is it to remark somewhere in the official documentation that “in order to edit CSS files you have to create a task in Gulp/Grunt”. Even the “veterans” of this forum couldn’t figure this out.

Ghost support & docs are laughably bad.

1 Like