CSS Customization Guide - itch.io Skip to main content itch.io Browse Games Game Jams Upload Game Developer Logs Community Log in Register Indie game store Free games Fun games Horror games Game development Assets Comics Sales Bundles Jobs Tags Game Engines General About itch.io FAQ Community rules Hosting a jam Support & contact Buying Finding existing purchases Creating Creator FAQ Quality guidelines Getting started Access control Search & Browse Designing your page Interacting with fans Widget embed HTML5 games Limited releases Exclusive content Custom CSS Integrations Kickstarter Patreon Selling How buying works Getting paid & VAT Pricing Download keys Hosting a sale Co-op bundles Accounts Two-factor authentication Followers App itch.io app FAQ App guide API Overview OAuth Applications Server-side API reference JavaScript API reference Sub-products reference More Press Kit Become a Sponsor Legal Terms of service Privacy Policy Cookie Policy CSS Customization Guide 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. Please review this entire guide before requesting CSS access. We do not grant CSS access to empty accounts. Instructions are located on the bottom of this page. The CSS editor is available on: * Project pages (Including Devlog posts) * Jam pages * Profile pages Table of contents * Introduction * Considerations * Custom classes * Project page layout * Embedded games * Jam page layout * Theme variables * Considerations for jam theme designers * External content * Getting CSS access 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. If we make major changes, we'll try to email all CSS users about the updates. 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. Once you start writing HTML with the rich text editor then we recommend only editing as HTML, as the rich text editor may rewrite your markup and strip tags you have added. 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 Jam page layout Please place all your custom rules inside of #wrapper (described below) to avoid breaking or altering itch.io core functionality, such as the site header, which lives outside of it. #wrapper (also .jam_page_wrap ) Where your customization starts. Carries the jam s background color, background image, and text color, as well as the page font, font size, and a set of theme CSS variables (see below). Target this element to change the page background. .view_jam_page (default width 100% ) A wrapper element that will containing all jam page children elements: banner image, body, embedding game grid). Note the elements contained can have different widths, either full width or a fixed narrow width. .jam_banner_outer .jam_banner The jam s banner image, if uploaded. Has the class .full_width when the banner is set to full width. .jam_body (default max-width 960px ) The main content panel. Its background uses the secondary background color ( bg_color2 ), which is semi-transparent when the creator lowers the panel transparency option, allowing the page background to show through. Its drop shadow is controlled by the theme s shadow preset. Contains the jam header ( .jam_header_widget ), the submitter widget ( .jam_submitter_widget ), and the jam description ( .jam_content.user_formatted ). #entries (default width 100% ) In some cases, a jam may show submitted entries directly on the jam s page. This is a full width grid of the jam s entries. Theme variables The theme editor exposes its colors to the page as CSS custom properties set on #wrapper ( .jam_page_wrap ). Read or override these instead of the individual built-in selectors, which is more robust against future updates: * --itchio_link_color * --itchio_button_color , --itchio_button_fg_color , --itchio_button_hover_color , --itchio_button_active_color , --itchio_button_shadow_color , --itchio_button_border_color * --itchio_border_color * --itchio_border_radius For example, to override the link and button colors: # wrapper { -- itchio_link_color : #ff66cc ; -- itchio_button_color : #00aaff ; } Considerations for jam theme designers * Scope your rules to #wrapper . Site UI like the header and lightboxes lives outside it, so keeping your customization inside #wrapper avoids accidentally affecting them. * Do page background work on #wrapper . The background image lives here so it scrolls with the page content. (The jam s background color is also applied to body so it fills the viewport behind the wrapper.) * Prefer the theme variables on #wrapper over overriding the built-in color selectors. It keeps your CSS working when we update the page. * Test responsive layouts. Jam pages are built for mobile web, so test your CSS against smaller viewports. Custom CSS can use media queries to tailor your styles per screen size. * Test while logged out. When you view a jam you can edit, the page wraps the content in extra editor elements. Scoping to #wrapper keeps your rules working regardless; verify the result as a regular visitor. 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. Getting CSS access If you would like CSS access on your account then please contact us . Please tell us what kinds of changes you'd like to make to your page. We restrict access to the CSS editor by default because it makes it harder for us to upgrade game pages on itch.io without breaking custom layouts, additionally we expect you to use CSS responsibly. In your message: * Please ensure that what you're trying to accomplish can t already be done with the built in theme editor. * Briefly describe the types of changes you would like to make. * Confirm that you are aware that you must ensure that your page remains accessible. Do not use CSS in a way that makes your pages difficult to operate or read. * Confirm that you will not alter itch.io s built in UI with your CSS and that you will scope all changes only to the visuals of your page content. Follow itch.io on YouTube , Bluesky , X , Facebook , or Join our Discord for new games and site updates. itch.io on Twitter itch.io on Facebook About FAQ Blog Contact us Copyright © 2026 itch corp · Directory · Terms · Privacy · Cookies