Spice up and level up your page! Pitch is a small collection of CSS components and tweaks designed specifically for itch.io project pages.

Getting Started

Note
This is a detailed walkthrough on how to use the app. You can skip this and start using the app, as it already has a built-in tutorial.

Requirement

Custom CSS access on your itch.io account.
- Contact itch.io support to request the CSS access. Please read the CSS Customization Guide first before proceeding.
A little bit of HTML and CSS know-how.

Using the app & the components

Pick components of your choice on the sidebar. Click on its name to see the live preview of it, and tick the checkbox to add it to your collection. Click Copy CSS button, the CSS codes of the components of your selection should be copied to your clipboard.

If you're unable to copy it from the button, copy it from the 'CSS OUTPUT' container on the left instead.

Paste the copied CSS codes to your page's custom CSS field, and save it. Its located at the bottom of the theme editor sidebar.

Go to your project's edit page. Edit the content/description in HTML mode. Follow the use example for each components. Copy-paste the sample codes provided in the component's live preview for a quick start.

Important Note
Once you edit your page's content in HTML mode, Its best to keep using HTML mode onward to avoid messing up the layout.

Limitations
(Some) components are not compatible with profile pages and/or jam pages.

Best Practices & Tips

Always back up and save your HTML codes to a file, everytime you make changes.
Use external code editor, like Sublime Text or Visual Studio Code to get the advantages like syntax highlighting, autocompletion, etc.
Test your project's page against multiple screen sizes, and on multiple browsers, including the itch app before publishing it.

License

The Pitch web app is licensed under MIT license .
The CSS components are licensed under CC0 .
The placeholder content in the HTML preview and/or in the image preview may be subject to different license or copyright restrictions.

Feel free to give feedback in the comments below, and report bugs in the GitHub Issues page.

More information

Updated	2 days ago
Status	Released
Category	Tool
Platforms	HTML5
Rating	Rated 5.0 out of 5 stars (8 total ratings)
Author	nnda
Tags	css, design, framework, html, Open Source, page, sourcecode, Project template
Code license	MIT License
Asset license	Creative Commons Zero v1.0 Universal
Links	Source code, Ko-fi

Development log

v1.2.0 – Author Badge, Masonry Layout, & More!
2 days ago
v1.0.0 – Component selector web app
Sep 24, 2024
v0.0.3 – Live preview, documentation guides, and Alert Box
Nov 23, 2023
v0.0.2 – Fallback & Compability
Aug 21, 2023

Comments

Jack Selleck3 days ago (1 edit) (+1)

This is a very nice tool, I think it would be super cool to include something here which lets us section out the games like you have on your profile

nnda2 days ago (1 edit) (+1)

Thank you for the comments!

For the main projects section, I used Grid layout, and for the collections, I used List layout in the page’s theme editor.

As for the two-column layout of the collections, that was done through this custom CSS:

@media (min-width: 780px) {
  /* Split collections row into two-column layout on desktop */
  .collections {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 2em 0 !important;
  }
  .collections .inner_column {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  /* Fade out gradient */
  .collection_row {
    position: relative;
    overflow: hidden;
    margin: 0 0.8em;
  }
  .collection_row::before {
    content: "";
    position: absolute;
    bottom: 0;
    box-shadow: inset -13em 0 9em -2em #0f1116; /* Match the background color */
    pointer-events: none;
    width: 100%;
    height: 76%;
    z-index: 2;
  }
  .collection_row:first-child {
    padding-left: 1.2em;
  }
  .collection_row:last-child {
    padding-right: 1.2em;
  }
}

Jack Selleck1 day ago (2 edits) (+1)

This works well thank you :) i tried doing it using the code on your github but i couldnt get it working, by the way for the new author badge I had to type “jackselleck” rather than “Jack Selleck” for it to work

nnda1 day ago(+1)

Glad it helped! :)

Yea, for my profile page’s CSS, you’d have to build the CSS from the repo first. I’ve put the installation section for that in the readme. Its quite a mess of a system, because I want to save characters count. itch.io limits profile page’s CSS to 5120 characters for some reason :/

And yep, you need your itch.io’s username, instead of the display name for the Author Badge.

VegeTato21 days ago(+1)

Very useful tool ! Thank you <3

Can you please add a section for components like hover on a game window on creator page/Outline/some tweens and other cool CSS effects ? :)

nnda21 days ago(+1)

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

VegeTato20 days ago(+1)

Thank you <3

CSS Hover effects and animated stuff, or even a tiny outline, can give a huge boost to the user itch store page and make it look appealing !
Hope to see it soon in your tool :)

Sheyne36 days ago

Hello, any way to get the code for the Preview Theme switcher ? I would love to add a swicther like that in my page

nnda36 days ago (2 edits) (+2)

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

Sheyne36 days ago(+1)

Thank you very much for your answer, it is awesome to see that you are still very active!

Marwan_Tm1147 days ago(+1)(-2)

Hello, I liked the idea of the program, but I want a Linux version AppImage

IRON257 days ago(+1)

This really helps a lot thank you :-)

Sofy292 days ago

any way to make those “Responsive layout adapts to different screen sizes “ boxes? :3

nnda292 days ago

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

Sofy292 days ago

awww tysm :D

Pitch – CSS Components and Tweaks for Your Project Pages