tutorial on drop down lists? that don’t look ugly and work correctly? lol please twine master 🙏🏻
Hi Anon!
So... I am flattered, but very far from being a Twine Master :P You should check the Twine Discord to understand what I mean, hehehe.
But a tutorial you would like, a tutorial you will get!
TLDR: if you are lazy, copy the code in my templates.
DROP DOWN LISTS a.k.a LISTBOX!
Drop down lists are lovely and useful! Whether you use it in your settings for a font change or in your story for character creation, it is very easy to set it up !
THE CODE (Story)
Say you need to add a list box in your story for X reason, like setting a betting card for definitely not placing bets at a shooting context in @crimsonroseandwhitelily.
Note: excuse the bare look, this is my testing file.
Setting it up is easier than coming up for the reason to use a listbox and which option you want to add in there. You just need to use the <<listbox>> macro! See the Sugarcube Documentation for all options.
In our example, here would be the code:
<<listbox "$betwin" autoselect>> <<option "No bet" 0>> <<option "Baron Riley Échelles">> <<option "Ser Carla Caggiano">> <<option "Viscount Colin Pouinzin">> <<option "Count Guillem of Razac">> <</listbox>>
THE CODE (Settings)
This assume that you use the built-in Settings Dialog box. If you are making a customised Setting menu, this may be different.
To have a setting with a list box, you need to create a setting with string options instead of a boolean (true/false options). See the SugarCube documentation.
Most common options found in SG templates are: font size, font family, and theme change. Let's take the font size as an example here:
var settingFontSize = ["100%", "130%", "150%"]; var resizeFont = function() { var size = document.getElementById("passages"); switch (settings.fontSize) { case "100%": size.style.fontSize = "100%"; break; case "130%": size.style.fontSize = "130%"; break; case "150%": size.style.fontSize = "150%"; break; } }; Setting.addList("fontSize", { label : "Change font size.", list : settingFontSize, default : "100%", onInit : resizeFont, onChange : resizeFont });
Copy the code in PasteBin.
Adding this to your JavaScript will get you the font size setting in the Settings, like shown below!
Note: The order of your settings in the Setting Dialog Box is dependent on the order of the code in the JavaScript.
STYLING IT!
If you've noticed in the two previous examples, the listboxes look quite different. Not just because the first one is actually styled and the second has just the basic SugarCube style.
While you can still style your listbox quite a bit, from how it looks as is or when you hover your mouse/focus it with keyboard, there will be things you won't be able to edit. I have double checked in the Twine discord, and this is due to browser use, restricting certain aspects.
To make it easier, let's get the second screenshot and show the differences from 2 different browsers: Firefox (left) and Opera (Chromium based, right):
Differences to note:
the Chromium is more compact than Firefox
the arrows dropping down is more or less obvious
the hovered option has a different colour (grey for Firefox, blue for Chrome)
Those differences will always be there, no matter how much you will want to try to change it. Note: I don't have Safari, so I can show you how different it is for that one either).
But there are still options you can style :D
Let's take some simple examples of what you can do:
Taken from: my Simple Book Template (Firefox), Crimson Rose & White Lily (Chrome), Exquisite Cadaver (Chrome), Meeting the Parents (Chrome, also ew...).
You can add a background image, have rounded borders or borders of different thickness, change the colours of the background and text when hovered... the world (with some CSS restrictions) is your oyster!
Styling a listbox should be done under the < select > tag (it's the HTML markup the macro is based on), the < .macro-listbox > class or the ID linked to the specific list box (more relevant for the Settings).
From Exquisite Cadaver, here is the < select > option and the relevant CSS code:
select { background-color: transparent; color: var(--text); border: 1px dashed var(--text); } select:hover, select:focus { background: var(--title); border: 1px solid var(--white); color: var(--white); }
Note: I use :root to save the colours I use in my code, for organisation's sake. You can use HEX or RBG codes instead of the Var.
BUT: using this option will format EVERY listboxes (settings and story ones) you have in your project with the CSS rules you included.
If you just want to edit the list boxes you created with the <<listbox>> macro, you would need to replace { select } from the code above with { .macro-listbox }.
If you want to go even more specific and target only ONE listbox, you will need to use the ID of that listbox instead. The easiest way to find the ID of a listbox is to use the Inspect function in your browser.
What you should look for:
Aaaaand that's about it! Go wild with your design!
Important: Use a colour contrast checker when you choose your palette, to be sure it is accessible/readable for players.
