Caspar Theme minimized Header Space/Image?

Developer help
1

Hello Folks of the Ghost Community,

I was wondering about how i could make the Appearance of the Header-Space within the CASPAR Theme for Ghost much smaller.

image
image2732Ă—1530 1.91 MB

At the Moment in the Standard Configuration out of the Box its a very wide/high Space there at the Top of the Site, where the Titel and Description of the Site shown.

HOW can i minimize this whole Space, maybe just by half?

Where and What do i have to edit in the Lab Section or maybe in the Theme Files itself in order to do the necessary Changes?

When i already this deep in it, how can i play around with the 2 Colors of the Standard Theme, the Top and Background?

I’m not a Programmer by any means, so be patient with me… :smirk::wink:

2

Hey there! If you want to make styling changes then you can do it in the Code Injection section. There you could add some custom code to modify the presentation of the header. By viewing the HTML of the header I can see that there’s some CSS setting the height and padding of the main header, we can overwrite those by doing the following into the Site Header textarea in the Code Injection section:

<style>
  .site-header-content {
    padding: 7vw 4vw;
    min-height: auto;
  }
</style>

You might need to make some tweaks for yourself and try some things out, but this should get you heading in the right direction

1 Like
3

@DavidDarnes thank you a lot, for this quick and very helpful Response. :grinning:
I inserted the Changes you mentioned and it works like a breeze, really appreciate that!

But what’s about the Colors of the Site, specially for the Background, is there some kind of “overwriting” within in the Code Injections i can do to change them?

4

No problem! Colors can be done in the same fashion. I’m afraid I can’t help you with every form of theme modification, as I’ll be essentially showing how to do front-end development :sweat_smile:. https://forum.ghost.org/uploads/short-url/hb9rsV0ELFfIvKPMHiSRutcCTDH.mp4

I’ve made a short video of how you can edit styles on your site, steps as follows:

  1. Find the element you want to modify, right click and select “Inspect”
  2. Navigate the HTML by clicking the elements in the inspector until you find the element that possesses the style you want to change
  3. Use the CSS panel to modify the styles, some values provide a helpful interface to make tweaking much quicker
  4. Copy the styles you modified, including the brackets and element name. In this case it’s
    body {
  background: #e6b6c7;
}
  5. Paste these style changes into a <style> element inside one of the Code Injection fields
  6. Click save at the top to save the code
2 Likes
5

@DavidDarnes thank you again, so much. For your Help. :+1::blush:

It worked out of the Box.

When i find a Way of “How-to” do this Site Inspection on an iPad Pro i might be end up by doing all further Changes by myself, hopefully.

Of course i have access to a normal PC but mostly i work of my iPad Pro because i only do a lot of Writing and other graphical Stuff with it. I had a Mac once, was to much for my Tasks.

1 Like