Casper change colour

Hi,
i’m new ghost user.
I want to change some colour of Casper themes
In the footer I change the colour as the logo. But in the header I note something different.
I use inspect function of firefox to discover the code to change but I have some problem in this case
I try to change background class but change the color and the logo disappeared
The site is this http://www.assembleapopolare.it
Thanks

Which class did you modified?

i want the same colour in the menu in the header in all the pages

    <style>
.site-footer-nav a[href="https://ghost.org"] {
  display: none;
}
.site-footer {
  background: #009fe3;
}
</style>
1 Like

You have to goto /assets/css and open screen.css. Then you have to goto the header styles. In my file, it started from line 112 class name .site-header-background.

You can find it easily. Refer to my snapshot. Cheers.

Then find the color and change it.

if i download and modify the file, then how can i put in the ghost? i don’t see upload button
thanks

You have to uplad whole theme

Are you aware that you can customise the navigation shown in the footer of Casper? The HTML for this link is in the default.hbs template, as shown here:


Removing that line would be better than hiding it with CSS.

Also, you only need to upload the theme folder as a zip file. From your screenshot it appears to be called “ap1”, locate this folder and zip that up before uploading it to Ghost admin :+1:

I don’t undestand locate. I rename in ap1.zip to avoid the deleting of standard theme

Sorry, I was mistaken. I thought you were trying to upload your entire Ghost install to Ghost. I now see there’s a permission error with your Ghost install. Have you set up the permissions correctly?

I don’t install ghost i use a free account on digitalpress so I haven’t access to the folder

In that case you’ll need to contact them to find out why you don’t permission to upload themes

but with iniejction code can i solve it ?

Yes but you’ll need to add a lot of CSS to make those colour changes so it might become hard to manage in code injection

I have some problem with css.

i try with some iniejction but i think there are many part of css that use gradient or something.
I also new in css customization but I think are two simply modification

I think I see what you mean. This might help:

.site-nav-main {
  background: #009fe3;
}
.site-nav-main .site-nav-left-wrapper:after {
  background: linear-gradient(90deg,rgba(0, 159, 227, 0) 0,#009fe3);
}

That extra piece of CSS will change that gradient overlap to the same blue as the main site navigation :+1:

1 Like

thanks
the first menu is now ok but
-the logo disappeared
-a new menu with background in black is appeared

if i use only the first part i found ok the menu but it has in the other page a black effect on the right. if i solve this problem and the gradient on the logo is ok

I’ve checked your code and not only is there no logo set but you’ve also hidden it with CSS, that’s unrelated to the CSS I provided. When I view the site the extra menu isn’t there. I think you’re applying additional CSS alongside the code I provided, my code is just for changing colours

Yes it’s true I don’t set the logo but the a large background


I delete your code and the second menu disappear.

So your suggestion is upload a logo and separately the background ?

if there is some css expert I could engage for this small work. There is a little marketplace here?
N.

Hi,
your code works for the menu! Thanks
But I note a difference in the background of the banner in home pages
Thanks
Nico

1 Like