itch.io

Thank you for the comments!

I’ve been a little hesitant on adding hover effects or animation-related stuff. Since I’m aiming more on CSS stuff for the page’s content.

But I do plan on adding more decorations, including animation-related tweaks.

And if or when there’s the components/tweaks like you’ve described, it’ll probably be under the ‘Decorations’ or ‘Tweaks’ section/category :)

Nope, I’m in Indonesia.

Or, maybe its because I haven’t received any payments/donations with 0% revenue share?

I set mine to 0%, but my dashboard doesn’t get the grayscale filter :/

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.

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.

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

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.

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) :)

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.

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.

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.

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

Hi, the buttons are actually just radio-type <input> elements. I don’t think you can insert it in project pages directly, since input/form elements will be sanitized.

The project is open source. Here’s the snippet of the codes that makes the buttons if you’re interested:
Script: https://github.com/nndda/Pitch/blob/80ac0c31949f5ef281493bcbb7d416ca868be869/src/app/scripts/themes.ts#L61C1-L74C7
Styling: https://github.com/nndda/Pitch/blob/80ac0c31949f5ef281493bcbb7d416ca868be869/src/app/styles/_input.scss#L107C1-L140C2

Just tested it, it seemed so, anyone that you added as admins in your project, will also have the access to the Custom CSS field in the project page’s theme editor.

As long as the project is created under the user who has the Custom CSS enabled.

From what I experienced, if its the otherwise: a user who doesn’t have Custom CSS enabled creates a project, and then adds a user who has Custom CSS enabled, both user won’t have access to the project page’s Custom CSS. But this was quite a long time ago, maybe its different now.

Try this, not a very elegant solution, but should works:

<table>
<tbody>
  <tr>
    <td style="border: 1px solid transparent;">
      Left Column
    </td>
    <td style="border: 1px solid transparent;">
      Right Column
    </td>
  </tr>
</tbody>
</table>

If you want to make the table takes the full width of the page, add style="width: 100%;" to the <table>:

<table style="width: 100%;">
<tbody>
  <tr>
    <td style="border: 1px solid transparent;">
      Left Column
    </td>
    <td style="border: 1px solid transparent;">
      Right Column
    </td>
  </tr>
</tbody>
</table>

By “home page”, I assume you mean your profile page? and by “subpages/sub-items”, I assume you’re referring to the individual project pages?

As for the clickable banner taking users back to your profile page, I don’t think that would make much sense. There’s already a link to your profile page in the user tools at the top-right corner.

I tested it, the copy button worked fine on Firefox and the itch app. But on Chrome it returned the error you mentioned.

I have a web app that also have a copy button, and it behaves the same way. But I do have fallback/workaround for this case, though not very elegant: which is just showing the text to be copied in a container, and then tell the user to manually ctrl + C it, if the copy button doesn’t works.

I found this hacky workaround, but haven’t tested it myself: https://stackoverflow.com/a/72239825

It involves creating <textarea> element, putting the text there, focusing and selecting its content, and then use document.execCommand('copy'); to copy it.

But it seems like Document.execCommand has already been deprecated.

The emojis generated on your app can still be selected and copied manually on Chrome though. Which I think is good enough.

Pretty 🔥

I love the use of the custom CSS.

Some tiny nitpicks:

• The images could be optimized. The 2 bundle image buttons is displayed at ~300px width, but the actual file is 624px, twice the size as needed. Resizing the images and the bg could helps loading time a little.

• The links at the top could use inline-block in the custom CSS. So that it won’t break awkwardly in the middle on smaller screens.

  Before:

  

  After inline-block:

  

The page looks pretty solid.

I appreciate that you took your time to format the text & the paragraphs. Not only on the game page, but the devlogs are pretty well-formatted too!

Though, I find the link color a little bit too hard to read against the background color. It could use some more contrast.

And I think it would be better to replace the last screenshot with another gameplay shot instead of the main menu.

Also, if you want to get feedback, I think you’d want to post it on Get Feedback instead of here.

Alrighty, thank you for the response!

Hello,

I’m working on some CSS-related projects, and want to create demo project pages to showcase their design and functionalities. These pages would be public but unlisted.

For demonstration purposes, I’m planning to upload placeholder files (some zipped .txt files) and categorize them as executables for platforms like Linux, Windows, etc. Just to show how the layout handles downloads section, buttons, and other elements.

I just wanted to confirm: would this approach violate any ToS, be considered misleading, or cause any other issues I might not be aware of?

Thanks in advance for your input!

I think its ok. But why not use devlog in the game page for the game overview too? And then you can add the link to that devlog post.

yay :D

Nah u don’t have to. I can run Windows app with Wine here. I’ve played your game, it was fun btw :) Although it would be nice to have some sort of UI indicator for how long my jump will be, I overshot a lot.

+1. I always prefer desktop option, web games can gets very laggy. I provided every OS I can export to, but web games still beats desktop/PC games in play counts.

also can you provide Linux build too… :3

thank you for the comment! you can drag and drop the soap dispenser to the faucet on the sink to clean your hands

very cute. took me a while to figure out the last level

love the levels. though i should’ve lower down my volume before repairing the generators. and the robots could use some more buff

this would be so much more fun with more mechanics, maybe a way to defeat the cheese lord too. but well, that would be against the jam’s prerequisite

I forgot to add collision/wall on that part 🤦‍♂️ sorry abt that You’d want to clean the two cobwebs on the top (double jump), and on the bottom, and then proceed to the door.

Thanks for the feedback!

I picked kantan because it rhymes, and it meant ‘easy’.

we planned to make the items draggable initially, but its a lot more harder to implement than I thought lol

Indeed a silly, and visually nice game idea generator! and i think the crossing word animation could be a little faster

I like the shadow effects when you pick up stuff. The ui can be a little bit hard to read sometimes. and rotating stuff with mousewheel feels a bit slow.

but nice tool overrall!

There’s tooltip/hint when you’re using tools on the bottom-left, but the buttons could also be styled to indicate if its toggled/active or not.

works with pen tab, but i find it easier if i used mouse instead

but still, nice tool!

thats not a part of the css components actually 😅 but heres the html & css source code for those https://gist.github.com/nndda/63ff54c575dbb9e9f6158dc8a446c0db

Sorry, theres currently no 32-bit build

Hi, You can use W, A, D, to move/jump, and F to clean. This was made for Gamedev.Js Jam 2023