customising the sidebar in Harlow

Question

I'm trying to customise the left sidebar in Harlow 2.1.0, and for the life of me I can't work out why my custom content isn't displaying.

In the story stylesheet I have the following:

tw-sidebar 
{
    position: fixed;
    top: 0;
    left: 0;
    width: 20%;                        
    max-height: 100%;
    margin-top: 5%;                    
    padding: 0 0.5em 0.5em 0.5em;
    text-align: left;
    background-color: transparent;
}

And I have a passage with the 'footer' tag in which I am trying to append the content using the following code:

(append: ?Sidebar)[
	(link:"Save")[
  		(if:(save-game:"Slot A"))[Position saved!]
		(else: )[Sorry, save failed!]
	]
	(if: (saved-games:) contains "Slot A")[(link: "Load")[(load-game:"Slot A")]
	]
	(link: "Restart")[(reload:)]]

I've trawled through the manual, and the cookbook, and thought I'd understood how to do this, but all I get is the usual back and forward arrows, with no custom content appended. Any ideas about what I'm doing wrong here would be gratefully received.

Answer 1

If I create a new Harlowe v2.1.0 based story project, and added your CSS example to the project's Story Stylesheet area and your (append:) macro example to a new footer tagged passage, then I see both a Save link and a Restart link within the blank left margin area of the tw-story element when the project is viewed using either the Test or Play options as well as when the story HTML file (generated via the Publish to File option) is opened with a web-browser.

Does your project also contain any CSS that either styles the links or changes the size of the tw-story element's left padding (which defaults to 20% of the width of web-browser's view-port area)?

Comments

Thanks for your answer greyelf. No I've not tried to style links or change the size of the tw-story left padding, just styled some headings, and a (failed) attempt to change the background colour of specifically tagged passages.

Here is the full story Stylesheet:

@import url(http://fonts.googleapis.com/css?family=Merriweather Sans:400,700,400italic,700italic);
@import url('https://fonts.googleapis.com/css?family=Allerta+Stencil');

html
{
  background-color: #000000;
	font-family:Merriweather Sans, sans-serif;
	font-size:18px;
}

tw-story[tags="flashback"] 
{
	background-color: #ffffff;
	color: #000000;
  	font-family: 'Allerta Stencil', sans-serif;
}

tw-sidebar 
{
    position: fixed;
    top: 0;
    left: 0;
    width: 20%;                        
    max-height: 100%;
    margin-top: 5%;                    
    padding: 0 0.5em 0.5em 0.5em;
    text-align: left;
    background-color: transparent;
}

tw-passage
{
  color: #888899;
}

tw-icon
{
	opacity:1;
	color:#6666ff;
}

h1
{
	font-family:Merriweather Sans, sans serif;
	font-size:48px;
	color:#8888aa;
}

h2
{
	font-family:Merriweather Sans, sans serif;
	font-size:36px;
	color:#8888aa;
}

h3
{
	font-family:Merriweather Sans, sans serif;
	font-size:28px;
	color:#8888aa;
}

h4
{
	font-family:Merriweather Sans;
	font-size:24px;
	color:#8888aa;
}

h5
{
	font-family:Merriweather Sans, sans serif;
	font-size:20px;
	color:#8888aa;
}

I know it is probably something blindingly obvious, but I cannot work out what it is.

---

OK... problem solved. I posted the CSS and footer passage code into a brand new test project and it worked fine. However, I noticed some differences in the Twine environment. When I checked I discovered that the project, which I started developing under Harlow 2.0.1, and then left for about a year, had for some reason defaulted back to Harlow 1.2.4 rather than upgrading to 2.1.0

Changed the story format, and everything worked.

Not sure whether to feel stupid for not checking the obvious, or irritated that Twine did something weird.

---

re: Your full CSS and Harlowe's default font and colours

If you use your web-browser's built-in Web Developer Tools to Inspect the HTML structure and releated CSS of a Harlowe v2.1.0 based story HTML file you will see that it sets up many of it's default values on the tw-story element.

tw-story {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    font: 100% Georgia, serif;
    box-sizing: border-box;
    width: 100%;
    min-height: 100%;
    font-size: 1.5em;
    line-height: 1.5em;
    padding: 5% 20%;
    margin: 0;
    background-color: #000;
    color: #fff;
}

I suggest you do the same with your project's default font-family, font-size, and background-color.

eg. Move the rules of your html element based selector to the tw-story element instead.

tw-story {
    background-color: #000000;
    font-family: "Merriweather Sans", sans-serif;
    font-size: 18px;
}

 

---

Thanks greyelf, that's really good to know and very helpful