Harlowe: How do I fix an image in my sidebar?

thilliard

I want to fix an image in my sidebar to appear on every page/passage throughout the story. How do I do this?

Here is my code so far.

tw-sidebar {
    padding-left: 145px !important;
    padding-top: 150px;
    background-image: url(" http://i1172.photobucket.com/albums/r569/ordinarytavern/Ordinary Tavern/signboard1_zpsi2215njk.png"
    background-position: left;
    background-repeat: no-repeat;
}

I have two tw-icons that follow the image. Instead, I want the image to stay fixed to the top. Am I assigning it to the wrong CSS?

Here is what the url currently looks like:

https://cdn.rawgit.com/TCHilliard/TheOrdinaryTavernProject/gh-pages-03282016/OTP Harlow V3 03.28.2016.html

greyelf

There are a couple of issues with your CSS:

1. The default width of the side-bar is 3em which is not wide enough to show your image so you will need to set a width based on the image's width dimension (119px).

2. You need to change the background-position to include the top keyword if you want it to stay at the top of the side-bar.

note: due to a bug in the forums code tag which adds a semi-colon to the end of URL the following will need to use a quote tag, which unfortunately removes indents.

tw-sidebar {
background-image: url(" http://i1172.photobucket.com/albums/r569/ordinarytavern/Ordinary Tavern/signboard1_zpsi2215njk.png"
background-position: top left;
background-repeat: no-repeat;
width: 119px;
}

You will now need to move the first tw-icon element downwards so that it does not appear in the same location as the image, the distance is the height of the image (147px) plus the default top-margin of a tw-icon element (0.5em ~> 33px).

Place the following after the tw-sidebar related CSS:

tw-sidebar tw-icon:first-child {
	margin-top: 180px;
}

P.S.
While looking at your story's source code I noticed that you a referencing your audio files directly off your hard-drive using absolute file paths, this will need to be changed before you release the generated story HTML file or the people reading your story wont be able to find those files.

thilliard

thank you, that worked really well! awesome!