A little help with UI Styling

Authoring Twine
,
1

Twine Version: 2.3.16
Story Format: Sugarcube 2.36.1

I apologize in advance if the answers to this already exists on the forum, but I am at my wits’ end. I have been working on an interface for a few days now, studying the built-in stylesheets for sugarcube and finding most of my CSS instructions on w3schools, but I still can’t get it to work. I have used the special PassageHeader, and tried to wrap it in html like this:

<div id="PassageHeader"><div align="center"><span style="font-size:18px"><<if tags().includes("menu")>><<else>>''
<<button [[Character]]>>Character<</button>>  <<button [[Inventory]]>>Inventory<</button>>  <<button [[Quest Log]]>>Quest Log<</button>>  <<button [[Connections]]>>Contacts<</button>>  <<button [[Holdings]]>>Holdings<</button>>
''<</if>></span></div>

The buttons work, mind you, and most of my CSS works so far. It looks like this:

body {
    color: #000;
    background-color: #cdcdbb;
    overflow: auto;
    font-family: 'Times New Roman', Times, serif;
}
#ui-bar {
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    width: 17.5em;
    height: 100%;
    margin: 0;
    padding: 0;
    color: white;
    background-color: #000;
 	background-image: URL("Img/UIBackground.jpg");
    border-right: 1px solid #000;
    text-align: center;
}
ul#menu-core {
    background-color: Black;
    text-align: center;
  	font-variant: small-caps;
  	width: 10rem;
}
#menu-core li a:hover {
    color: gold;
}
#menu li a:hover {
    background-color: black;
    border-color: gold;
  	color; gold;
    text-align: center;
}
#menu-core li a {
    background-color: Black;
  	border: 3px ridge gold;
  	color: gold;
  	padding: 6px;
  	width: 10rem;
    text-align: center;
  	font-variant: small-caps;
}
a:hover {
  text-decoration: none;
  color: #d12200;
}
#passage-PassageHeader{
  	background-color: black
  	background-image: URL("Img/UIBackground.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
  	position: fixed;
  	top: 0;
    width: 100%;
  	max-width: 54em;
}
button{
    background-color: Black;
  	border: 3px ridge gold;
  	color: gold;
  	padding: 8px;
  	width: 10rem;
    justify-content: center;
    font-variant: small-caps;
}
button:hover{
  	background-color: black;
  	border-color: gold;
  	color: gold;
}
.link a{
  color: #d12200;
}

…but here is thing, I can’t get the header to stick to the top (posittion fixed, top 0), and I can’t get the background image to work on either the UI sidebar or my header. Any help would be appreciated. Also, I apologize if my code is a little messy or chaotic but I’m pretty green…

1 Like
2

#passage-PassageHeader ← should be just #PassageHeader

#passage-[passagename] is only for actual Story Passages. Anything in PassageHeader is prepended to the Story Passage (as in added before the passage text), but does not get a special #passage-[passagename] id.

Also:
color; gold; ← should be : and not ;

3

I actually tried both but neither worked, at least not for my intended purpose. I have updated my code, and corrected the typo you mentioned also. Is there a different way to handle this? Can I use Javascript to build a separate header, for example, or is there another function inherent to Twine/Sugarcube that I am unaware of?

4

If I use #PassageHeader as Manon says, it works for me:

image
image1197×406 40.4 KB

5

Yes the buttons work, and they did even with my own code. As I mentioned in my original post, I can’t get the header to stick to the top, despite using a fixed position, nor will the background image appear in either the UI sidebar or in the header. Those are the issues I am trying to adress :blush:

6

It does stick to the top: you can see in the screenshot that the page is scrolled down, but the buttons still appear fixed at the top, overlapping the text. I just tried the code myself and it works for me as well.

If that’s not what you want, you need to be more specific. If it is, then either you haven’t properly fixed the mistakes in the original code or there’s something else in you game that you haven’t posted that causes the problem. Is what you posted everything in the Stylesheet section?

As for the background image, in #PassageHeader you need a ; after background-color: black. The image in the UI bar works fine for me as is. Are you putting the html file in the proper directory? Because relative paths won’t work when testing from the application or from the web version.

7

As that screenshot shows, I have scrolled down and the header IS stuck to the top.

As for the background image, in the PassageHeader styles you’re missing a semicolon after background-color: black so it’s trying to treat the image declaration as part of the color. If you fix that, the passage header should get the background image… Though you also have to get the image named correctly and in the correct directory relative to the HTML file. Which would probably be tricky for the temp directory that it gets saved in when you choose Story > Play, so you’ll almost certainly want to use Story > Publish to File. If I do that, the background images work for me.

Edit: Do you know how to use the Inspector? On most desktop browsers if you right click and choose Inspect it’ll show you an interface where you can click through the tree of HTML elements and it’ll show you which rules apply. It’s not perfect: there’s no good way to ask "why doesn’t this rule apply to this element?** but for cases like your missing semicolons I think it gives a pretty good indication that it’s trying to treat it as a long weird background-color name instead of recognizing that it’s supposed to be a background-image rule. So it’s often helpful at tracking down this stuff.

8

This is a working example of customizing the Harlowe interface. I don’t know SugarCube unfortunately, but the same principles apply. Take a look at the code I use and see if there if anything different that stands out. Perhaps there is some insight to be had with the CSS.

Constructing a Persistent Interface in Harlowe

Sometimes, you need to declare the display: block;. Sometimes the Twine engine might be overriding a CSS setting you made and you have to use !important. All I can say is, good luck! :wink:

9

SugarCube has StoryInterface to change the whole interface of tge page…

1 Like
10

I corrected the semicolon and that fixed the image in the UI bar. I am sorry about my previous comment about the header, it actually does stick. Thank you very much. It seems I have some problems with the background image for the header, but I will try to crack that on my own. But thank you very much for your help - thank all of you, in fact. I really appreciate it.

11

How do I access the StoryInterface, or is that a special passage I have to add?

1 Like
12

It’s a special passage, like PassageHeader and StoryInit.

1 Like