itch.io Community » itch.io » Questions & Support

[Solved] How to make a slider in custom CSS ? (Can't use id, radio, textarea...)

A topic by Sheyne created Jan 22, 2025 Views: 690 Replies: 18

Viewing posts 1 to 5

Sheyne136 days ago (1 edit)

Hello there,

For my project I asked and got the custom CSS to be activated.

I want to make a very simple Slider, with only HTML and CSS, it could be like this codepen exemple : https://codepen.io/chriscoyier/pen/XwbNwX

However, the id elements are stripped out of the DOM when added into the HTML rich editor of a project page, so I cannot use the exemple of codepen.

So I pushed my luck and tried to achieve that with a radio element, but every input tags like Input - Form - radio - button,

seem to be also sanitized away. They all appear as plain text.

I was left with the use of tabindex, but tabindex is also removed from the DOM.

I found this issue https://itch.io/t/2967766/suggestion-checkboxradio-button-object-in-the-html-page-editor, that explained that despite not having access to radio elements there are the details - summary ones. But they are just foldable. Which mean if I click on one, I can certainely register that it has been clicked, but then if I click another it won't reset the state of the first one. So it is not usable for a slider. I could bypass that but I would then need to include all my details in a form element. But the form is also sanitized.

So I am left with no option, perhaps you have an idea of a way to reproduce the radio button settup in itch.io custom CSS ? Or any other way to achieve a slider like the example ?

nnda136 days ago(+2)

For CSS-only slider with no input elements, one option is automatic carousel/slider. I’ve made a pen for it, designed for itch.io page, you can test it out in your page directly:

https://codepen.io/nnda/pen/KwPGgXX

Though, as the name suggest, the image will slides automatically without any user interactions.

There might be a workaround to achieve clickable/interactable elements with :target CSS selector, and the <a> tag with name attribute. As demonstrated by this project: https://npckc.itch.io/content-warning-generator

Sheyne136 days ago(+1)

Thank you very much once again nnda. The automatic slider is pretty nice and will definitively be cool at the bottom of a game page, to loop through notices and stuff. However I am still in need of an interactable one. I will dig what you said about the a tag and the name attribute, and come back here with whatever I managed to achieve or not. If in the meantime someone else have another idea it would also be worth a shot!

redonihunter136 days ago

So. Let me get that straight. You want to put up a design element on your game page. The place people would go look and decide if they want to play your game or not. And you want to use that design element to hide information behind other information that the user would have to click away like it were a presentation of slides?

Sorry. But the only interaction a game page would get from me is scrolling the page. If you require me to do anything else, that is not going to happen. Have your info hidden in a video or other stuff I need to click on to see it? Pity. I am browsing on Itch and not your website. If you can't have your cool features on that page on display for me to easily see it, I will not see it.

In other words, I have never ever seen a game I would want to play, because the dev impressed me with the css. But I did see some I ignored because they annoyed me by doing silly things with the css. And remember, whatever you do, it has to work on a tiny mobile screen and in landscape and portrait and a setup with extra big resolution and on the aspect ration of the Itch app. The silly stuff I saw, did not even work properly on my mostly regular setup.

If any, you should go with the automatic slider, not one that needs a click. If clicking is possible then only to stop the animation.

nnda136 days ago

I do agree with some of that. I’m not really a big fan of interactable either (which is why I rarely use hover effects).

I think of it as just a neat way to organize and present information. Like with an accordion or collapsible element, I can pick and decide which info I want to see rather than scrolling through an entire wall of text. Just like with the “More information” button.

As for the silly stuff, I assume you meant the cat-image-carousel thingy? I apologize if it doesn’t look right on your browser or machine. Since it’s just a prototype made in about half an hour, I didn’t have much time to consider how it would look on the itch app or other browsers.

Also, thank you for the suggestion for stopping/pausing the animation, I forgot about it. I updated the carousel/slider CSS to be paused on hover.

And also, I just find it fun playing around with project pages. :) itch.io is one of few places that gives that freedom.

redonihunter135 days ago(+1)

I was not talking about your pages, I never visited your pages before. But some of the things you do on pitch are not allowed (in my opinion).

https://itch.io/docs/creators/css-guide

Confirm that you will not alter itch.io’s built in UI with your CSS

I consider certain things to be part of the user interface. To pick one example, the buttons on the upper right corner. If you exchange the text for icons only, to me, the user interface has changed. A thing you promised to not do when applying for custom css.

Itch staff might have a different opinion about what is the ui and what is not. And what is an alteration and what is not.

I do not approve of Itch in general to give custom css privilege. I am browsing Itch and not the homepage of some developer, so it should look and feel the same on all pages. No exceptions. This is not geocities or some other olden homepage territory.

And when browsing on the known place "Itch" I expect information at the places I am used to. Everything else is hampering my quick absorption of the information. It is not enhancing a page. It is distracting. Even a seemling simple thing as putting the info box in the middle. I do not care if you exchange an anigif with a css animation. But the whole framework must be the same on every page - the things I consider the user interface. It is not only the existence of buttons but also how they look and where they are. And clever things like exchanging the mouse cursor is also not really a good approach. Again, not talking about your projects, I just have seen some disturbing use of css.

Putting rain or snow as a css effect on a thematically fitting page might be a good use. Shaking buttons right down to the report button that I used to report the seemingly hacked page is not a good use. That really happened.

nnda135 days ago(+1)

Ah, the Pitch’s collapsible user tools? Yeah, I’ve been questioning whether or not I should include it since I made it. I’ve decided to add it because I’ve seen other people tweak it too, and its obstructing the ‘help’ button of my app on the top right corner. I’ll reconsider.

I try to keep the CSS stuff there to be used only within the project’s description section/column (aside from the user tool tweak).

I’ve definitely come across some crazy (as in not very ideal) CSS use too. You made a good point about consistency, I agree with that, but I also think devs/creators can still have this freedom for their design (within reason). This creative freedom is one of the main reasons I choose itch over other platforms.

redonihunter135 days ago (1 edit)

I also think devs/creators can still have this freedom for their design (within reason)

I saw someone hiding the info box...

It should be about content design, not page design. One can of course do design with css, it is a very powerful tool. But in the end, css is meant to format the content, not be the content. So I always kinda wondered, what exactly people want to use "custom css" for. What can they not achieve with the given tools that would not also be tinkering with the ui? That is actually a serious question. I am not versed in web design. So I would not know what limitations there are for crafting a page on Itch. I would not recognise what is missing.

And what would developers do, when they realease the same game on Steam... If their design is in the css, they are out of luck.

If you have full control over a page, a css rotation is surely the more elegant solution to collapse content and still show it somehow. The poor man's version would be an animation I guess.

(Btw, I mistook your pitch web app with the css itself. I randomly opened your projects trying to see if somethign was jumping into my eyes. And then I did not notice the autoplay on the web app. But the example I picked actually was css.)

---

For the user tools I inject

.user_tools { position: static; }

on client side. For reasons I do not quite understand, this pushes it above all else, so it does not overlay with a browser game or other stuff. It is not the best ui element for some pages. When the standard css pushes the tools above the page and flattens them, that might be better. But when this happens, the screenshots scroll sideways in a box and are above the text too. I like the screens to be side by side with text while reading the text.

nnda135 days ago

I saw someone hiding the info box…

The… ‘more information’ section? I’ve read a post about someone wanting to hide it, but never seen it implemented myself. That is frustrating.

Just like with other powerful tools, there’s always great responsibility with it.

And what would developers do, when they realease the same game on Steam… If their design is in the css, they are out of luck.

I guess that’s just the quirks of different platforms. Different layout, different way to present your project.

I haven’t browse Steam in ages, but from what I remember, the designs there (in the project description) mostly relies on raster images (PNGs, GIFs) isn’t it? which is what people without CSS also relies on here.

Nothing beats the absolute consistency of raster images. But I still prefer CSS. CSS loads way faster than images (internet here sucks). And I can update its design whenever, just with text editor, without opening any design software, and then re-uploading the images.

What can they not achieve with the given tools that would not also be tinkering with the ui?

Many things. Though mostly tiny, cosmetic adjustments. You can make a static PNG image jump, without the hassle of making it a GIFs. And even things as simple as changing color of a portion of text.

I’ve seen some game pages, where there’s long, long update logs, from the beginning to the latest. Had to scroll my way way down to the download section and info box. I thought it would be nice to have these massive information condensed into collapsible, toggle-able sections.

(I guess this example is not very fitting, since the proper way should be using devlogs as the update logs.)

And also its just fun tinkering with things (reasonably) :)

nnda135 days ago (2 edits)

For the user tools I inject

You want to pin it to the top? you can try absolute positioning instead:

#user_tools { position: absolute; }

But when this happens, the screenshots scroll sideways in a box and are above the text too.

That is just itch’s responsive design, I suppose. No spaces to the side to place the screenshots, so on top it is.

When the standard css pushes the tools above the page and flattens them, that might be better.

If you prefer that, but doesn’t want the screenshot sideways, it is possible:

.user_tools {
  position: static;
  margin: 0;
  white-space: nowrap;
  text-align: left;
  padding: 8px 0 8px 10px;
  overflow: auto;
  background: var(--itchio_ui_bg_dark, #2b2b2b);
  width: 100vw;
  box-sizing: border-box;
  box-shadow: inset 0 5px 5px -5px rgba(0,0,0,0.5);
}
.user_tools > li {
  display: inline-block;
  vertical-align: top;
  margin: 0 10px 0 0;
}

That is the CSS from itch’s default mobile layout. But without the media query, so you’ll always have the user tools on top, on desktop too.

edit: removed some duplicate CSS properties.

redonihunter134 days ago

You want to pin it to the top?

No. It already is pinned on the top. The responsive design on your view is different from mine. Try making the screen smaller or rather increase the zoom %.

I want to move it out of the way. You will find several forum threads about this issue. If a page does not have a banner on top, the user tools obstruct view, which is bad for a web game. The usual client side solution for web games is to play them in full screen. You yourself reduced them to icons so they would not obstruct that help button. The usual publisher side solution is to use a banner on top.

So what kinda works is making the tools static. For whatever reason, it creates a new section with only the tools in it and the rest of the page below.

nnda134 days ago (2 edits) (+1)

No. It already is pinned on the top.

Ow, I meant on top top. Top of the page, not top of the viewport. Because the user tools is following the viewport, at least on my end.

By default, if I scroll down the page, it'll follow.

Using absolute positioning it'll stays on top.

So what kinda works is making the tools static. For whatever reason, it creates a new section with only the tools in it and the rest of the page below.

The user tools HTML structure is directly on top of the game page. So I guess if it were changed to static position, it’ll be treated as another ‘section’ of the page. Instead of floating buttons, on top-right corner.

User tools' HTML. Under it is the #wrapper element (the project page container).

User tools with its position sets to 'static'.

Though, the second CSS codes I provided should be able to force it to use this layout:

User tools, with responsive styling on desktop.

Sheyne136 days ago

Hello, it is refreshing to get your opinion since we differ a lot. I see what you mean. However there still is a place for interaction I believe, and in your specials case you would benefit from not interacting with something interact able if this part does not interest you.

Let me explain.

What I'm trying to achieve is basically showcasing how some of my characters looks like in my gâcha game.

By default I will show one character, with all the required elements, strength, story ect. So you can figure out without interaction the basics of the character feature.

If you don't need or want to see more about the characters, then you scroll and pass to another feature showcased bellow.

If, however it take your interest. There would be 3 to 4 more characters displayed, hiden by default behind a click to not piss of people that just want a simple overview.

You could then click on the character faces and watch the updated characters and get more informations.

Actually the design of informations locked behind a slider are made on purpose to give you more of the informations you want to dig. The other informations, (required and basic ones), would not be locked behind a click.

It's a win in your use case. If you don't click because it is boring for you, you don't have the "boring stuff"

redonihunter135 days ago

I am simple in that. I would just use animated images for most if not all what you describe. For character updates I might take inspiration from those pokemon style evolution or level up pictures.

But from a more pragmatic view, people are not used to click on images to see more information. Not on Itch. They might mistake the layered image for an ingame image.

You might be interested in the spoiler method. https://itch.io/t/2151831/adding-spoiler-text-to-your-game-description You can hide information even without css.

nnda135 days ago(+2)

Update: I’ve managed to create an interactive carousel, by using the ~ and :active CSS selector, with <a> tags using its name attribute:

https://codepen.io/nnda/pen/LEPgvYJ

Though, it require more configurations compared to the previous automatic carousel. And I consider this to be quite a hacky approach.

There’s also a limitation: the carousel won’t work on secret project URL. Which is one of the reasons of why I haven’t tested it out on other browsers and in the itch app yet.

Sheyne135 days ago

Damn that is exactly what I needed i will try that out ! Thank you very much nnda !

Sheyne122 days ago (1 edit) (+1)

Hello @nnda,

I managed to complet the custom page that I was trying to do, so I wanted to thank you once again for your advices.

I'm dropping that here, in case anybody would be interested about checking out a slider integration in a real game page https://sheyne.itch.io/alumnia-knights
Issue solved.

Have a wonderful day!

redonihunter122 days ago(+1)

Those are the type of changes that I dislike. I have trouble parsing your page layout. I cannot gather information about the game in the usual manner and decide if I might be interested or not. And some of those changes, in my opinion, break the promise you made, when you asked for custom css. "Confirm that you will not alter itch.io’s built in UI with your CSS"

Your size changes do not fit on my screen, your devlogs are cut of left side. ~~Unity 6 and WebG~~L! Play in Browser (the strikethrough is not visible on my screen.)

You changed the iconic Itch download button and it's placement. It feels not like an Itch page. In fact at first sight I was not even sure, if a project was uploaded. You made the the download button look like an external button. Bolstered by the fact that you made a custom GooglePlay Button that also links to the purchase dialogue - which feels out of place, since it is no longer a "popup". If I would not know about custom css, I might even suspect, I somehow got redirected to an impostor site.

Also, on a page without custom css you will see pricing and files without the need to click anything.

I am not even sure, if you uploaded screenshots. They are not where they usually are. They seem to be hidden in that auto slider thingy - so that I cannot view them in the pacing that I chose.

The user tools are also collapsed to icons and barely visible for anyone searching for text.

The centered info box and comment buttons are mildly irritating, it is not that bad, but I do not think it enhances the page. But if it does not enhance the page, it does distract from the normal user experience, so why even bother a center instead of the usual left alignment of those elements.

Oh, and I think I understand what you did and why, with the "Play in browser" feature, but it might not work out the way you might think it would work out. The webgame is not where it is expected. If I go to a page that promises me a browser game, and I see no browser game, I go away and play something else. I do not search on that page for some hidden in plain sight button that takes me to the real webgame.

The most bitter part is, I only just realized that I could click on the round portraits after looking at the page and remembering why you opened the thread, so I searched again for that feature. So I knew that something like that should be there, but it stell flew right over my head. See above with the parsing of information. I am not used to see relevant game information being laid out in such a way.

Sheyne122 days ago(+1)

I kindly thank you for your feedback. Criticism is precious!

This topic has been auto-archived and can no longer be posted in because there haven't been any posts in a while.