Oh that's already an incredible help, thank you! ; 0;
It works like a charm! <3
Another question if you don't mind (also I'm totally hitting up your ko-fi with a donation to thank you for your time and this tool), if I wanted to add additional custom content sections, how would I go about that? ;w;
omg thank u so much!!
For the content sections, Toggle component in this version can only have two contents TwT”
But! in the next update, you can have as many Toggle contents as you want (It is actually done, and I’m sitting on it rn. Hopefully I can push this update today.)
Here’s the new Toggle’s CSS, it can have up to 5 contents (content-a → content-e), which you can still add by tweaking the CSS a bit if you need more!
/* Styling for the toggles container */
.custom-toggles {
display: inline-flex;
background: var(--itchio_bg2_color);
border: 1px solid var(--itchio_bg2_sub, currentColor);
border-radius: 24px;
}
/* Styling for the individual toggle */
.custom-toggle {
padding: .1em .8em;
margin: 2px;
border-radius: inherit;
transition: .3s;
}
.custom-toggle:not(:hover) {
text-decoration: none;
}
/* Initial state of the content (hidden) */
[class^="custom-content-"] {
display: none;
}
:is(#wrapper, .primary_column):not(:has(a.custom-toggle:target))
/* Default visible content ( .custom-content-a ) */
.custom-content-a,
/* Make sure to match the rule below */
:is(#wrapper, .primary_column):has(a.custom-toggle:target[name="toggle-a"]) .custom-content-a
, :is(#wrapper, .primary_column):has(a.custom-toggle:target[name="toggle-b"]) .custom-content-b
, :is(#wrapper, .primary_column):has(a.custom-toggle:target[name="toggle-c"]) .custom-content-c
, :is(#wrapper, .primary_column):has(a.custom-toggle:target[name="toggle-d"]) .custom-content-d
, :is(#wrapper, .primary_column):has(a.custom-toggle:target[name="toggle-e"]) .custom-content-e
/* Add as much as you want. Just change the toggle-* and the .custom-content-* accordingly */
{
display: block;
}
.custom-toggles:not(:has(a.custom-toggle:target))
/* Default clicked button ( toggle-a ) */
a.custom-toggle[name="toggle-a"],
/* Make sure to match the rule above */
/* Styling for the individual toggle when clicked/activated */
.custom-toggles > a.custom-toggle:target
{
color: var(--itchio_button_fg_color) !important;
background: var(--itchio_button_color);
}
Use this instead of the one copied from the app in the current version.