πŸ€‘ Indie game storeπŸ™Œ Free gamesπŸ˜‚ Fun games😨 Horror games
πŸ‘· Game development🎨 AssetsπŸ“š Comics
πŸŽ‰ Sales🎁 Bundles

A new theme editor for project pages

One of my favorite parts of itch.io is how developers can take the creativity they put into their project and display it on their project/store pages. From the very beginning, one of itch.io's guiding principles has been about giving developers a page that they can customize with content that they control. 

Sadly, itch.io's project page theme editor hasn't really kept up with the development of the rest of the site... until now. Thousands of lines later, the oldest part of the site is now rewritten. Introducing the new theme editor!

Updating the theme editor has always been a challenge for us. Thousands of developers use our page editor to make some really unique stuff, and when we make updates to it we have to be careful about inadvertently breaking their designs. For this update I analyzed game pages using Custom CSS, since they're the most fragile. I viewed 600+ project pages, got to see a lot of interesting stuff, and took notes about the things they did. The most common changes became the inspiration for the new features that are available today, and the ones I have planned for the future.

What's new

This release was mostly concerned with getting the rewrite out, so I'm calling it Phase 1. The architectural changes will make way to many more advanced customization options in the future. Here's a brief overview of what's new today:

  • Theme editor now displays from the side. Has been completely rewritten with modern components.
  • You can now select any font available from Google fonts for your page
  • You can now separately control colors for buttons and headers
  • You can control how the screenshots sidebar appears. On downloadable pages you can hide it, and on browser games you can bring it back
  • The page background image can now be attachment fixed
  • You can control the transparency of the BG2 area
  • The default margins around screenshots have been improved (screenshots are now inset and no longer touch the edge)

Many changes were also made to address users who work with CSS (you should have gotten an email about it!):

  • A brand new CSS Customization Guide that gives you some tips, a layout of the page from a CSS perspective, recommended selectors to use, and pitfalls to watch out for.
  • CSS generated by us will now use lower precedence CSS classes so it's easier for your CSS to take precedence with an ID selector.
  • The differences between browser and downloadable project pages have been normalized, they use the same markup where appropriate.
  • Flexbox is now used for alignment in many more places.

Go make some pages!

Try it out, and tell us what you think. With the foundation improved it's much easier for us to continue adding new customization options. Please don't hesitate to leave a comment here with any ideas you'd like to see.

While working on this project I had the opportunity to see a lot of cool pages. You can check them out in my collections:

Enjoy

Support this post

Did you like this post? Tell us

Leave a comment

Log in with your itch.io account to leave a comment.

YYYYESSSSSSSSSSSSS. Thank you so much. Bless your heart. Everything little thing you add exponentially allows for people to create completely unique game pages, I love it. Please never stop improving profile/game theme editors, it adds such personality into the website - which I love.

Suggestions:

  1. Please keep expanding this, you're on the right track.
I

I've just updated the page for my main game with the new tools! Fantastic!

Thanks for your work!

(+1)

What's the chance of this project also happening with Profile pages? I know a few of us even use Custom CSS over there as well. (Managore's in particular is impressive.)

Admin(+1)

Yeah. If you've  noticed there two styles of theme editors. The goal is make make them all look and work like this new one.

(+1)

Can’t wait for my browser to load megabytes worth of Google fonts on my 100kbps connection when the original fonts were doing their jobs just fine. πŸ€”

Admin(+3)

That's a good point, I think it would be worth having a account setting that disables the fonts, like how we have one to disable gifs.

(Edited 1 time) (+2)

I never thought I’d see the day a corporation would reply to one of my complaints… 😿

(+1)

Hooray! I have already switched to the new theme editor and away from custom css due to these changes, thanks so much for your hard work!

(+1)

New toys!