Nest blocks in header card?

Using Ghost
1

Hey

Is there some way to add other cards inside of a header card? I.e. have an html card embed something, a custom form, etc… That would be incredibly powerful for me…

2

You can include any HTML you want within an HTML card. So one option would be to turn off the header entirely (if it’s a page) or hide it with CSS/code injection (either page or post), and then to create the header you want with HTML.

You could also use some of the tricks discussed here:

1 Like
3

I think I was a bit unclear: I’m talking about the “header” card in the editor, not the feature image/title. If it was possible to add something besides text and button to the header card without using html from the ground up, since that would have made my life a little easier :)

4

Ah, gotcha. It’s possible to do something a bit hybrid. Like this:

HTML card:
<div class="mycard">

put your various Ghost elements here

second HTML card:
</div>

And then style it (in an HTML card or in code injection:

<style>
  .mycard {
     background-color: pink;
     column-start: full-start/full-end; 
 /* the above should work on most official Ghost themes that use grid.*/
     } 
</style>

You’ll almost certainly need some additional styles depending on what you’re putting in the header, but that’d be a start.

Actually, you could grab the classes Ghost uses for header cards, which would reduce how much styling you had to do, i.e. make that div class="kg-card kg-header-card kg-v2 kg-width-full kg-content-wide mydiv" (Choose whichever header style you like and get the classes by inspecting it.)

It’s not perfectly WYSIWYG, but it definitely is better than writing all the HTML yourself each time, especially if you make snippets! :)

1 Like
5

That’s a pretty smart way to go about it :) although, since every element is going to need some classes anyway, it might be easier to just write some html and save it (probably won’t be doing too many changes).
also, I’m not sure this is a valid css property?

column-start: full-start/full-end;
6

You’re totally right. Bad property. should say grid-column