How to use Custom CSS on Itch.io Pages

A splashy Itch page makes a good first impression. You can use CSS to spruce things up. I’ll walk you through how.

The example screenshot above is from my latest game jam game. You can check out a live version of the page here!

Request CSS access

You will need to request CSS access from Itch support. Here is a template email you can use. You essentially need to acknowledge their rules on what you can and cannot change the style of.

To: support@itch.io
Title: Request for CSS Access
Body:

Hello!

I'm writing to request access to use custom CSS on my itch.io game pages. I would like to use CSS for hover effects on the page. I am aware that the page needs to remain accessible. I will not use CSS in a way that makes the page difficult to read or operate.
I will not alter itch.io's built in UI with my CSS and the scope of my changes will only affect the page contents.

Thank you in advance!

From,
x

Give it a few days for approval.

Create and Edit Your Game Page

First, take a gander at their CSS guide.

On to editing! Once you have CSS permission enabled on your account, click “Edit Theme”. You will see a new option to edit the CSS on a page at the bottom of the Editor side bar.

The CSS editor is highlighted in orange in the bottom left

You can expand the CSS editor with the arrow button!

Itch has some rules they want you to stick to when editing the CSS. Keep the page readable and accessible. Only modify things under .wrapper. Don’t hide the footer links.

Itch’s CSS Guide is a key reference for what the major html elements are (see below). These elements are the ones you will be focusing on editing.

Itch’s documentation

While I was making my Itch page, I discovered some limitation / quirks.

• You cannot create new html elements outside of .formatted_description
• You can style any element on the page, Itch doesn’t sanitize the CSS
• Itch removes custom classes of nested HTML elements under .formatted_description. This means you can’t directly define a style for any nested HTML elements. Instead, you can select nested elements with .my_class_name element_type. Here’s an example.

<!-- Style -->

    .custom-text {
        font-size: 16px;
        font-family: 'Nunito', sans-serif;
        font-weight: 850;
        margin-left: 10px;
        margin-right: 10px;
    }

    .custom-box img {
        position: absolute;
        margin-top: -20%;
        max-width: 88%;
    }

<!-- HTML -->

<div class="custom-box">
    <img src="https://my.domain.org/my_img.png">
</div>

Styling tip: hover effects are cool! Use easing! Example:

    .screenshot {
        max-width: 80%;
        transition: transform 0.3s ease;
    }

    .screenshot:hover {
        transform: scale(1.05) rotate(5deg);
    }

Related Links

[YouTube] Making your itch.io page 3x more interesting
CSS Image Styling