If you need more control over the customization of your pages on itch.io you can request access to the CSS editor. CSS customization must be enabled on a per-account basis. If you would like to use it please contact us.

The CSS editor is available on:

• Project pages
• Jam pages
• Profile pages

Read on to learn more about effectively using custom CSS.

Introduction

The CSS editor lets you control how your pages look outside of what the built-in theme editor allows. Keep in mind we sometimes upgrade itch.io’s pages and it’s difficult to ensure those changes don’t conflict with your custom CSS. Enhancing existing components instead of trying to redo the entire page is the best way to avoid any problems.

The CSS classes and IDs listed on this page should be considered stable and you can use them for targets to your customization. Use any other CSS classes at your own risk, future updates to itch.io may not be compatible with your CSS. We'll do our best to be conservative about changes, but sometimes we have to make them. We'll email all CSS users when we make these changes.

CSS generated by the itch.io theme editors is applied using CSS classes, so you can use ID selectors to have your style take higher precedence.

Considerations

Custom CSS is a powerful tool, but can also degrade the quality of the page. Please keep the following things in mind when designing your page.

• Don’t forget about web accessibility, those with disabilities or assistive technologies should have no trouble accessing the page.
• Project pages are built for mobile web, please test your CSS against smaller viewports.
• Test your custom CSS logged out to ensure any changes to page are compatible with your CSS.
• Attempting to trick visitors into performing actions they didn’t intend will get your CSS access (and maybe your account) suspended.

Custom classes

The content you provide for your pages (project, profile, jam, etc.) supports a subset of HTML. If you'd like to target elements in your markup with custom CSS you can give them a class. In order to prevent conflict with itch.io’s own CSS, classes you use must begin with custom-. Any other classes you provide will be stripped by the sanitizer.

To access HTML mode in our rich text editor, you can click the <> button.

Project page layout

Please place all your custom rules inside of #wrapper to avoid breaking or altering itch.io core functionality.

#wrapper (default width: 100%)

#inner_column (default width: 960px)

.header

h1

The title of the game. Is not visible when there is a banner

img

The game’s banner, if uploaded

.columns

.left_col.column

.formatted_description (default width: 553px)

The text you supplied for description

Downloads, buy button, comments, devlogs, and message board links come here, depending on how your page is configured

.right_col.column

Screenshots

.footer

itch.io’s footer, do not hide these links

Embedded games

Project pages that have embedded content (HTML5, Flash, etc.) have the same layout above, but with an additional element inserted above .columns:

.embed_wrapper (default width: 100%)

.game_frame

Dimensions are the size you provided for your game, centered horizontally in the .embed_wrapper

External content

If you need to reference external resources (images, fonts), you should make sure they're hosted into a reliable place with support for HTTPS. You can embed images and fonts directly in your CSS by Base64 encoding it.