Add a header to a story

Question

Hello,
Is there a way to add a header with an image, link, and tagline to the top of a whole story? Using my browser tool, I added code like the pasted div below into the body of the html in the browser to add a header to the top of my story, but when I added the code into the actual html file and imported it to twinery.org to finish working on, the header disappeared. Do you have any direction as to how or where to add code to include a header that would be consistent on the top of the whole story. I'm looking to just add an image, link & tagline.
Thank you for your help!

<div class="BTG-header"><a href="https://website.com" title="BTG" target="_blank"><img src="https://businesstalentgroup.com/wp-content/uploads/2016/09/logo-btg-grey-bug.png" alt="BTG" width="100" height="100"></a>
<p>Example Tagline Here</p>
</div>

 

Answer 1

Yes, but how you do it depends on which story format you are using.

If using one of the Harlowe series of story formats then look at it's header tagged special passage.

If using one of the SugarCube series then look at it's PassageHeader special passage.

Comments

Hello and thank you for your help! I'm styling this story & didn't create it initially, but in the code it says -

format="Harlowe" format-version="2.0.1"

That being said, could I add the div I pasted above somewhere, and if so, where?

Thank you!

---

1. Open the Story Project in the Twine 2 application.
note: If you don't have access to the original project then you can recreate it by using the applications Import From File option to import the story HTML file.

2. Create a new Passage, you can name it whatever makes sense to you, and then assign a header tag to the new passage.

3. Cut-and-paste your code example into the new header tagged Passage.

warning:
During the running of the story you will notice that the contents of the header section will appear instantly while the displaying of the contents of the current passage will fade in. The instant displaying of the header content is a result of you using HTML elements within a Passage (any type of Passage) combined with how Harlowe performs the passage fade-in.

I don't know of a way around this effect but a more experienced CSS writer may.