Changing colours in edition theme

Themes
1

Hi Folks,

I am new to Ghost and would need some help. I installed the edition theme version 1.0.0.
For my branding I would like to change the following colours:

  • Text colour of buttons on the landing page.
  • Text and icon colours when opening the navigation in mobile mode.
  • Ghost accent colour at some places, e.g. login modal (accent colour is too bright for the white background).

Any help would be very much appreciated! I assume code injects may help?

Many thanks,

Seb

2

Hi @sebsigloch,

Generally speaking if you want to modify some specific elements, the easiest way is to inspect those elements and see the css rule that is setting the property you want to change.

The accent color can be changed from the Admin (Settings > Branding > Accent color).

Regarding the text and icon colors on mobile, you can overwrite them with this code injection:

<style>
  @media (max-width: 991px) {
    .with-alt-header #site-header .menu-item, 
    .with-full-cover #site-header .menu-item {
        color: #aaa;
     }

    .with-alt-header #site-header .social-item, 
    .with-full-cover #site-header .social-item {
       color: #aaa;
    }
  }
</style>

Just replace #aaa with your color.

1 Like
3

Thanks so much! This solved a big part of what I was looking for.
Any idea how i may change the font-colour of the buttons and the logo as well?

many thanks for your help!