Need help with some sugarcube stuff

Authoring Twine
1

Twine Version:
2.6

So I want to change some ui in the UI ar how would i do it (Sorry if this question is dumb i started twine a week ago lol)

2

It depends on what exactly you want to change about the standard SugarCube User Interface (UI):

1: If you want to display content like text, stats, and images in the Left Sidebar, then add a StoryCaption special Passage to your project and place that content in it.

2: If you want to added addition menu “buttons” in the Left Sidebar, then add a StoryMenu special Passage to your project and place links in it to create those “buttons”.

3: If you want to change the default styling (colours, font details, etc…) of the page, then use the HTML section of the documentation to learn what elements make up the default UI structure, and the CSS section to learn about the default styling of those elements. You can then use that information to craft your own custom CSS rules in the Story > Stylesheet area of your project.

note: the same default HTML & CSS information can be gained by using your web-browser’s Web Developer Tools to inspect the elements of the page, and the CSS being applied to those elements.

4: If you want to totally redesign the structure and layout and styling of the page, then you should learn about the StoryInterface special Passage.

8 Likes
3

Thanks for the response, but i wanted to change the color and border of the ui bar could you explain for me how to do it in Css(So I know the variables for it and dont have to go looking for it)

4

As Greyelf said, easiest way is to right click on the html page and inspect to find the id or class of the element you want to change. Doing that and hovering over the UI part you will see div id=“ui-bar”.
So in CSS you put a pound sign followed by the id. (If its a class put a period instead of # sign).
So if I wanted to change the ui bar border thickness to thick, style to dashed, border color to white, and background color to blue, this would go in your CSS script

#ui-bar {
border-style: dashed;
border-color: "white";
border-width: thick;
background-color: "blue";
}

More CSS border options to play around with and read up on here

3 Likes
5

Thank you bro Ive been looking for this for so long