Basic colors of buttons

Authoring Twine
1

Please specify version and format if asking for help, or apply optional tags above:
Twine Version:2.3.13 which is online now
Story Format: Harlowe 3.2.1

Hello ! I would like to know what are the exact basic colors for the buttons ( the choices ). Its a calm blue something. Can you give me a html colorcode for it please? Or is there a way to add a comand to use that exact color again? Thank you !

3

If you mean the ‘button’ like effect generated by Passage code like the following…

(button:)[[Hello]]

…then the CSS being applied to that ‘button’ is…

tw-link.enchantment-button, .enchantment-link.enchantment-button, .enchantment-button:not(.enchantment-link) tw-link, .enchantment-button:not(.enchantment-link) .enchantment-link {
    border-radius: 16px;
    border-style: solid;
    border-width: 2px;
    text-align: center;
    padding: 0px 8px;
    display: block;
}
tw-link, .enchantment-link {
    color: #4169E1;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}
tw-link, .link, tw-icon, .enchantment-clickblock {
    cursor: pointer;
}

…and the colour of that ‘button’ is #4169E1

You can use your web-browser’s Web Developer Tools to Inspect the HTML element structure being generated for the above macro call…

<tw-expression type="macro" name="button" return="command"></tw-expression>
<tw-expression type="macro" name="link-goto" class="enchantment-button">
	<tw-link tabindex="0" data-raw="">Hello</tw-link>
</tw-expression>

…and if you select the <tw-link> element in the above structure you will be shown the CSS I included above.

4

Thank you very much Greyelf !
I have seen you’ve been replying to so many people. I used your other answers here and then. So a really big thanks for you ! We need people out there like you !

I’m just about to release my game and your help was so fast, i really appreciate it !
It’s a cool Die Hard game, I would send it to you but it is in hungarian language…

My problem was actually that twine gives a different color to visited links and then also changes the color of hovering those. It was purple something and it wasn’t going well with my game, so i just wanted to leave visited links with the same color.
I have a slight other problem, but it really is not a big thing. I use red in my menu and i use the following commands :

tw-hook[name=“bela”] tw-link, tw-hook[name=“bela”] .enchantment-link {
color: red;
}

tw-hook[name=“bela”] tw-link, tw-hook[name=“bela”] .visited:hover
{
color: red;
}

so i make a certain link red, and i want it to stay red when im hovering it… But when i reenter the page ( or maybe also when i enter the page the first time ) it seems to jump a bit and take on a slightly different red color. I really dont know whats happening but its just in the menu so i dont care. I just got tired. Im happy im finished with the game. Maybe i should check what you send, and i use f12 to inspect it, but i dont find a coloring for it. Im too dumb and tired right now.

Im planning to make a cool Alien game in the future, maybe I can send you that, but thats just an idea yet.

Thank you again and may Crom be with you !

5

Looking at the Harlowe’s core CSS I see that link styling has a color related transition property…

tw-link, .enchantment-link {
	color: #4169E1;
	font-weight: bold;
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}

…which I don’t remember it having before. This is likely what is cause the shift in shade of colour.

The core link hover selector looks like this…

tw-link:hover, .enchantment-link:hover {
	color: #00bfff;
}

…so if you want to style your bela Named Hook targeted links you would use the following…

tw-hook[name="bela"] tw-link:hover, tw-hook[name="bela"] .enchantment-link:hover {
	color: red;
}

Harlowe uses a visited CSS class to mark which links have been selected previously, and the core CSS looks like…

.visited {
	color: #6941e1;
}

…and you only need to override the above if you want links other than your Named Hook targeted ones to have a different colour than the Harlowe default, because selectors like your tw-hook[name="bela"] related ones should take precedence over that visited class selector.

note: Please use the Preformatted text option in the tool bar when including code samples, it makes them easier to read and stops the forum’s software converting valid standard quotes into invalid typographical (curly) quotes.

P.S. It seems you also know about the Cimmerian people, unless Crom has another origin than that I’ve read in Conan comics. :slight_smile: